Kor UI를 사용하여 dev.to 클론 빌드

이 이야기는 기존 웹 사이트 또는 웹 앱의 프런트 엔드를 복제하여 Kor UI의 일부 기능과 이를 사용하여 UI 디자인 및 개발에서 다양한 목표를 달성하는 방법을 보여주는 시리즈의 첫 번째 이야기입니다.

🗺️ 개요

Dev.to는 소프트웨어 개발과 관련된 주제에 대한 커뮤니티 토론에 중점을 둔 웹 사이트입니다. 우리는 레이아웃과 콘텐츠가 풍부하기 때문에 프로젝트의 기반으로 홈 페이지를 선택했습니다.


왼쪽: 원본; 오른쪽: Kor UI 클론

총 34개의 Kor 컴포넌트가 사용되었고, 8개의 표준 HTML 요소(예: div, br)와 27개의 CSS 규칙만 적용되었습니다.

프로젝트를 위해 우리가 선택한 기술은 Angular(SCSS 스타일시트 포함)였으며 코드베이스는 Stackblitz project에서 찾을 수 있습니다.

🎨 1부: 테마 설정하기

dev.to 시각 언어는 이미 Kor UI의 기본 스타일에 상당히 가깝지만 색상, 글꼴 및 구성 요소 스타일의 3단계에서 사용자 지정을 통해 처리된 몇 가지 차이점이 있습니다.

이 경우 많은 스타일이 공유되고 처음부터 정의할 필요가 없기 때문에 기본 어두운 테마를 확장하기로 선택했습니다.


왼쪽: 표준 Kor UI 어두운 테마; 오른쪽: 사용자 지정 테마

그림 물감

기본 색상과 dev.to에서 사용하는 색상 사이의 가장 분명한 차이점은 파란색을 띤 기본 색상에 관한 것입니다. 두 구성표의 광도는 비슷하지만 의도한 시각적 모양과 정확히 일치하도록 색조가 조정되었습니다.

또한 주요 강조 색상이 dev.to에서 사용된 보라색 톤과 일치하도록 조정되었습니다(예를 들어 버튼 또는 활성 탭 하이라이트 참조).

*[theme="dark"] {
  /* accent colors changed from blue to purple */
  --accent-1: 123, 120, 255;
  --accent-1b: 133, 130, 255;
  --accent-1c: 113, 110, 245;{
  /* base colors changed from dark gray to dark blue tones */
  --base-0: 26, 38, 52;
  --base-1: 13, 19, 26;
  --base-2: 20, 29, 39;
  --base-3: 26, 38, 52;
  --base-4: 45, 45, 45;
}

글꼴

dev.to의 타이포그래피 스타일은 기본 Kor UI 테마와 두 가지 주요 사항인 글꼴 크기와 글꼴 모음에서 다릅니다.

dev.to에서 글꼴이 더 크기 때문에 모든 텍스트 스타일에서 글꼴 크기 값이 2px 증가했습니다. 예를 들어 본문 글꼴이 14px에서 16px로 변경되었습니다.

글꼴 모음도 Open Sans에서 sans-serif로 변경되었습니다(편의를 위해 사용자 지정 글꼴은 로드되지 않음).

*[theme="dark"] {
  /* font sizes and family have been tweaked */
  --body-1: normal 16px/24px sans-serif;
  --body-2: normal 14px/16px sans-serif;
  --header-1: bold 18px/24px sans-serif;
  --header-2: bold 16px/24px sans-serif;
  font-family: sans-serif;
}

구성 요소 스타일

일부 구성 요소는 dev.to에서 사용되는 디자인과 일치하도록 기본 스타일을 사용자 지정해야 했습니다. 전체 목록은 다음과 같습니다.

기본 버튼의 글꼴 색상은 흰색이 아닌 검은색으로 설정되었습니다.

탭의 아래쪽 테두리가 제거되고 탭 항목의 세로/가로 크기가 줄었습니다

.

마우스를 가져가면 메뉴 항목의 텍스트 색상이 자주색(악센트)으로 변경되었습니다

.

태그 테두리가 제거되고 글꼴 색상이 밝은 음영으로 변경되었습니다.

/* standard component style changes */
kor-button[color="primary"] {
  color: var(--neutral-2);
}
kor-tabs {
  border: unset;
  kor-tab-item {
    height: 40px;
    padding: 0 12px;
    min-width: unset;
  }
}
kor-menu-item:hover {
  --text-1: rgb(var(--accent-1));
}
kor-tag {
  border: unset;
  &:not(:hover) {
    --text-1: var(--text-2);
  }
}

📐 파트 2: 레이아웃 정의

1280px보다 넓은 뷰포트에서 웹 사이트의 콘텐츠는 가장자리에서 가장자리로 확장되는 대신 페이지 중앙에 위치합니다. 이러한 이유로 kor-app-bar 및 kor-grid 자체에 수평 패딩이 추가되었습니다.

dev.to의 홈페이지는 2차원 그리드를 기반으로 하기 때문에 아래 이미지와 같이 kor-grid 컴포넌트를 사용하여 grid-template-columns: 240px 2fr 1fr 를 갖도록 설정했습니다.

🏁 결론

이 게시물에서는 Kor UI의 유연성과 개발자와 디자이너가 브랜드의 개성을 표현하기 위해 독특한 시각적 모양을 얻기 위해 테마를 사용자 정의하는 방법을 보여주었습니다.

색상과 글꼴을 변경하는 방법을 보여주는 것 외에도 개별 구성 요소의 동작을 손상시키지 않고 모양을 수정할 수 있음을 확인했습니다.

또한 최소한의 설정과 Grid와 같은 구성 요소를 사용하여 복잡한 레이아웃을 달성할 수 있는 방법을 보여주었습니다.

이 시리즈의 다음 이야기에서는 모바일 앱을 포함하여 더 다양한 사용 사례를 다룰 것입니다. 유용한 정보가 되었기를 바라며 다음에 또 뵙기를 바랍니다!