global color 정의 및 폰트 추가#6
Conversation
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Summary of Changes
Hello @Dobbymin, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!
This pull request establishes a more robust and consistent design system foundation for the project. It introduces a new global coding-friendly font and a refined, expanded color palette, both implemented with best practices for performance and maintainability. The changes aim to improve the overall visual consistency and developer experience.
Highlights
- Global Font Integration: I've integrated the Fira Code font as the project's primary font, leveraging Next.js's
next/font/googlefor optimized loading. This includes selectively loading necessary weights (300-700) and applying it globally via the rootlayout.tsxto ensure consistent typography across the application. - Global Color System Redefinition: I've redefined and expanded the global color palette, drawing inspiration from the bluloco light VSCode UI theme. This change aims to enhance the overall user interface consistency and establish a clear color standard for future components.
- Standardized Color Naming Convention: All global color variables now adhere to a consistent naming convention by using the
blog-prefix (e.g.,--blog-pink,--blog-gray-500). This improves predictability, prevents naming conflicts with external libraries, and enhances long-term maintainability by making color variables easier to search and refactor.
Using Gemini Code Assist
The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.
Invoking Gemini
You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.
| Feature | Command | Description |
|---|---|---|
| Code Review | /gemini review |
Performs a code review for the current pull request in its current state. |
| Pull Request Summary | /gemini summary |
Provides a summary of the current pull request in its current state. |
| Comment | @gemini-code-assist | Responds in comments when explicitly tagged, both in issue comments and review comments. |
| Help | /gemini help |
Displays a list of available commands. |
Customization
To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.
Limitations & Feedback
Gemini Code Assist is currently in preview and may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments to provide feedback.
You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.
Footnotes
-
Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩
There was a problem hiding this comment.
Code Review
This pull request introduces the Fira Code font and establishes a new global color system with a blog- prefix, improving design consistency. The changes are well-described. The review includes suggestions to enhance maintainability and consistency, such as aligning CSS variable naming conventions, reviewing the distinctness of new gray color values, and improving the readability of class name composition in the root layout.
| --font-mono: var(--font-geist-mono); | ||
| --font-pretendard: var(--font-pretendard); | ||
| --font-suit: var(--font-suit); | ||
| --font-firaCode: var(--font-fira-code); |
There was a problem hiding this comment.
| --blog-gray-300: oklch(0.9401 0 0); | ||
| --blog-gray-200: oklch(0.9491 0 0); |
There was a problem hiding this comment.
The lightness values for --blog-gray-300 (oklch(0.9401 0 0)) and --blog-gray-200 (oklch(0.9491 0 0)) are extremely close. This small difference may render them visually indistinguishable on most screens. Consider adjusting one of the values to create a more noticeable contrast.
| <html lang='en'> | ||
| <body | ||
| className={`${geistSans.variable} ${geistMono.variable} ${lemon.variable} ${pretendard.variable} ${suit.variable} antialiased`} | ||
| className={`${geistSans.variable} ${geistMono.variable} ${pretendard.variable} ${lemon.variable} ${firaCode.variable} antialiased`} |
There was a problem hiding this comment.
Consider using an array-based approach to construct the className string for better readability and easier management of classes.
className={[geistSans.variable, geistMono.variable, pretendard.variable, lemon.variable, firaCode.variable, 'antialiased'].join(' ')}1 participant
📝 상세 내용
프로젝트의 전반적인 디자인 시스템 기반을 강화하고, 코드의 일관성과 가독성을 높이는 데 중점을 두었습니다. 주요 변경 사항은 다음과 같습니다.
1. Fira Code 폰트 적용
개발자 친화적인 UI/UX를 위해 코딩 전용 폰트인 Fira Code를 프로젝트의 기본 폰트로 적용했습니다.
next/font/google활용Next.js의 최적화 기능을 통해 폰트를 효율적으로 로드하도록 구현했습니다. 필요한 굵기(
300~700및 고해상도용450Retina)만 선택적으로 로드하여 초기 로딩 성능 저하를 방지했습니다.Root Layout적용layout.tsx의 최상위<html>태그에 폰트 CSS 변수(--font-fira-code)를 주입했습니다. 이 방식을 통해 프로젝트 전역에서 Fira Code 폰트를 기본으로 사용할 수 있으며, 폰트 적용을 위해 각 컴포넌트에서 불필요한 import를 할 필요가 없어졌습니다.2. Global Color 시스템 재정의
사용하고 있는 VSCode의 UI 테마인 bluloco light 테마를 모티브로, 전체적인 사용자 인터페이스와 더 잘 어울리도록 Global Color 값을 변경 및 추가했습니다. 이를 통해 통일성 있는 디자인을 제공하고, 앞으로 추가될 컴포넌트들의 색상 기준을 마련했습니다.
3. Global Color 네이밍 규칙 통일 (
blog-접두사)모든 Global Color 변수명에
blog-접두사를 붙여 네이밍 규칙을 통일했습니다.🤔 네이밍 규칙을 통일한 이유
일관성 및 예측 가능성
blog-라는 일관된 접두사를 사용함으로써, 어떤 변수가 우리 프로젝트의 핵심 디자인 시스템에 속하는지 명확히 알 수 있습니다. 동료 개발자들은 색상 변수를 사용할 때 이름을 더 쉽게 예측하고 찾을 수 있습니다.네임스페이스 및 충돌 방지
향후 외부 라이브러리나 다른 CSS 모듈을 도입할 경우 발생할 수 있는 잠재적인 변수명 충돌을 사전에 방지합니다.
blog-라는 고유한 네임스페이스를 가짐으로써 스타일 격리를 보장할 수 있습니다.유지보수성 향상
blog-키워드로 전체 프로젝트의 색상 변수를 검색하고 리팩토링하기 용이해져, 장기적인 유지보수 비용이 감소합니다.4. oklch 색상 표기법 도입
최신 CSS 색상 표기법인 oklch()를 사용하여 global color를 정의하였습니다.
🤔 Hex 대신 oklch를 선택한 이유
직관적인 색상 조정과 유지보수
oklch(L C H)는 명도(Lightness), 채도(Chroma), 색상(Hue)이라는 인간 친화적인 값으로 색을 표현합니다. 기존에는 hover 색상을 만들기 위해 디자이너가 새 Hex 값을 뽑아줘야 했지만, 이제는oklch(from var(--brand-blue) calc(l - 0.1) c h)처럼 코드 레벨에서 명도만 살짝 낮추는 식으로 일관된 파생 색상을 손쉽게 만들 수 있습니다.일관되고 예측 가능한 명도
HSL의 Lightness와 달리,
oklch의L값은 인간의 눈이 인지하는 실제 밝기와 거의 일치합니다. 따라서L값만 조정해도 모든 색상에서 일관된 느낌의 비활성화(disabled), 호버(hover) 상태를 만들 수 있어 디자인 시스템의 일관성을 유지하는 데 매우 유리합니다.더 넓은 색상 영역(Gamut) 지원
oklch는 기존 sRGB 색상 영역을 넘어, 최신 디스플레이가 지원하는 Display-P3 같은 더 넓은 색상 영역을 표현할 수 있습니다. 이를 통해 더 생생하고 풍부한 색상을 사용자에게 제공할 수 있는, 미래 지향적인 기술입니다.단순히 색상 표기 방식을 바꾸는 것을 넘어, 더 유지보수하기 쉽고, 확장 가능하며, 미래 지향적인 디자인 시스템을 구축하기 위해
oklch를 도입하여 사용해보았습니다.#️⃣ 이슈 번호
⏰ 현재 버그
x
📷 스크린샷(선택)
변경된 UI