[DS-188] Color storybook 문서에 영어 번역 추가 #171

Jiyeon-lunit · 2024-04-09T09:30:27Z

jira : [ds-188]

Description

한글로 쓰여있던 Color Storybook 문서에 영어 번역을 추가
어색한 부분이 없는지 확인 부탁드립니다.

github-actions · 2024-04-09T09:34:56Z

Design System Storybook: https://62d7d1f2efc8a1e364b5e5e8-xzhqelpfsb.chromatic.com/

HyejinYang · 2024-04-09T11:15:04Z

현재 한글과 영문이 병기되어 있는데, 이 방향이 더 좋아보이지만 다른 문서와의 통일성이 걱정됩니다!
팀 내에서 논의가 있으면 좋을 것 같아요.

deminoth · 2024-04-10T23:51:01Z

병기를 한다면 영어가 위에 있고 한국어를 아래에 두는게 다른 문서와의 일관성 면에서는 나을 것 같네요?

더 나아가서는 toolbar를 이용해 언어 선택기를 제공하는 것도 좋겠습니다. 별도 PR로 진행하는게 좋겠지만요.
https://storybook.js.org/docs/essentials/toolbars-and-globals#advanced-usage

Toolbars & globals • Storybook docs
Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and documentation. It’s open source and free.

Jiyeon-lunit · 2024-04-11T04:25:43Z

컬러를 제외한 다른 문서는 영어로만 작성해도 크게 문제 없을 것 같습니다. 다른 문서들도 다국어를 지원하게 되면 그 때 툴바 등을 도입하는게 좋을 것 같아요.
혜진님 말씀처럼 통일성을 위해서라면, 컬러 문서 상단에 특별히 이 문서만 2개국어로 작성한다고 따로 설명을 붙여두겠습니다.

한글과 영어의 병기는 여러가지 형태로 테스트를 해봤는데 현재처럼 아예 함께 병기하여 작성하는 쪽이 읽는 사람에게 혼란을 덜 주는 형태인 것 같아 이렇게 작성했습니다. 다만 저희 문서 전체가 영어로 작성되어 있기 때문에 상엽님이 말씀하신대로 영어를 상단에 두고 한국어를 하단에 위치시키는 형태로 수정하도록 하겠습니다.

Jiyeon-lunit · 2024-04-11T07:58:13Z

한글과 영어의 순서를 바꾸고, 한글로 된 타이틀을 영어로 변경했습니다.
상단에 해당 문서만 한글을 병기한다는 설명도 추가했습니다.

LTakhyunKim

번역 툴을 통해 확인했을 때 어색한 표현은 없어보입니다.
(영어는 더 잘하시는 분들이 체크해주시면 좋을 것 같네요!)

HyejinYang · 2024-04-15T03:23:09Z

packages/design-system/src/stories/foundation/colors/Docs.mdx

@@ -10,62 +10,85 @@ import * as TokenInComponentStories from "./Token.inComponent.stories";
 <Meta of={ColorsStories} />

 # Color System & Token
+> _To make it easier to understand the system, we provide explanations in both Korean and English within the Color System document._  
+> _시스템의 이해를 돕기 위해 Color System 문서만 한국어와 영어를 병기하여 설명합니다._


For the color documents, we provide both Korean and English to ensure understanding of our unique color system and tokens.

문장 뜻을 조금 더 구체적으로 바꿔 보았습니다만, 원문도 문법 상 틀리지는 않아서 조금 조심스럽네용!

HyejinYang · 2024-04-15T03:30:10Z

packages/design-system/src/stories/foundation/colors/Docs.mdx

-> 루닛 디자인 시스템에서는 일관된 색상 사용을 위해 미리 색상 팔레트를 구성하고, 이를 컴포넌트나 페이지에 쉽게 적용할 수 있도록 토큰화하여 제공한다.
+In the Lunit design system, we pre-configure a color palette to ensure consistent use of colors.  
+We tokenize this palette to make it easy for developers to apply to components or pages.  
+_루닛 디자인 시스템에서는 일관된 색상 사용을 위해 미리 색상 팔레트를 구성하고, 이를 컴포넌트나 페이지에 쉽게 적용할 수 있도록 토큰화하여 제공한다._



루닛 디자인 시스템은 명시적이고 일관된 색상 사용을 보장하기 위해 공통 색상 팔레트를 정의한다. 사전 구성된 팔레트는 토큰 형태로 제공되므로 컴포넌트나 페이지 단에서 쉽게 적용 가능하다.

The Lunit Design System defines a common color palette to ensure explicit and consistent color usage. Pre-configured palettes are provided in token form, allowing for easy application within components or pages.

(이 부분은 한글도 다소 수정했습니다! 사실 처음 읽었을 때에는 약간 이해가 어려웠기 때문인데, 의견이 다를 수 있을 것 같아서 조금 조심스럽네요!)

'공통' 색상 팔레트라는 표현은 맞지 않는 것 같아요. 공통이 아니라 시스템에서 사용하는 모든 색상군의 정의해두고 있는 거라서요. 그냥 공통이라는 표현을 빼는건 어떨까요? 영문에서 common 은 크게 무리 없는 느낌이라 빼도 안빼도 나쁘지 않을 것 같구요!

네 한국어 영어도 둘 다 common을 빼는 게 자연스러울 것 같습니다!

HyejinYang · 2024-04-15T03:31:15Z

packages/design-system/src/stories/foundation/colors/Docs.mdx

+## Structure of Color system
+The color system in Lunit is structured as follows.    
+_루닛의 색상 시스템은 다음과 같은 구조로 이루어져 있다._  
+- **색상 코드 값** (ex: hex, rgb값) → **Global Palette** (ex: Red10, Blue40..) → **Token** (ex: bg_01, btn_text_primary)


색상 코드 값** (ex: hex, rgb값) 이 부분 번역이 빠져 있습니다!

음 이부분은 아래 테이블로 설명을 대체할 수 있을 것 같아서 저 줄을 빼도록 하겠습니다. 너무 텍스트가 중복되는 느낌이 들어서요!

HyejinYang · 2024-04-15T03:32:14Z

링크 부분이 다 (링크) 이런 식으로 되어있어 영어 번역이 빠진 상태입니다!

HyejinYang · 2024-04-15T03:34:30Z

packages/design-system/src/stories/foundation/colors/Docs.mdx

- Global Palette의 각 항목은 색상 코드(hex값)와 1:1 대응한다.
- Color Token은 이 Global Paltte 값과 연결된다.
+- A collection of colors organized by type and shade to be used within the AK design system.  
+  _루닛 디자인 시스템 안에서 사용할 색상을 종류와 음영으로 분류해 구성한 색상의 모음._  


이 부분은 사실 한국어가 잘 이해가 가지 않습니다. 🥲
색상 종류 안에 음영은 포함되지 않는 이유가 있을까요? 그리고 '음영'이란 표현 자체가 다소 와닿지 않아서, 구체적인 예시가 들어가는 게 나을 것 같습니다!

종류는 red, blue, green 과 같은 분류를 의미하구요. 음영은 10, 20, 50 등과 같이 밝고 어두운 것으로 나누는 분류를 의미합니다.
음영이란 표현이 이해하는데 어려우면 '밝기' 로 바꾸도록 하겠습니다. 그 편이 더 와닿을 것 같아요.
사실 글로벌 팔레트가 그냥 보면 아 이거구나! 하고 아는건데 그걸 굳이 글로 설명을 하려다보니 더 어려워진 것 같긴 하네요..

HyejinYang · 2024-04-15T03:38:35Z

packages/design-system/src/stories/foundation/colors/Docs.mdx

+- A collection of colors organized by type and shade to be used within the AK design system.  
+  _루닛 디자인 시스템 안에서 사용할 색상을 종류와 음영으로 분류해 구성한 색상의 모음._  
+- Within the Lunit design system, colors are only utilized from this palette, and colors outside of the palette are preferably avoided.  
+  _루닛 디자인 시스템에서는 이 팔레트 안에서만 색을 이용하고, 팔레트 이외의 색상은 가급적 사용하지 않는다._  


Colors outside the predefined color palette in the Lunit Design System are not allowed. If additional colors are needed, consultation with the design team is required. For one-time use colors that do not need to be added to the color palette, they should be used without utilizing the Lunit Design System.

루닛 디자인 시스템에서 사전 정의된 색상 팔레트 이외의 색상은 허용되지 않는다. 추가 색상이 필요한 경우 디자인 팀과 협의가 필요하며, 색상 팔레트에 추가할 필요가 없는 일회성 색상의 경우 루닛 디자인 시스템을 활용하지 않고 사용해야 한다.

위처럼 수정하는 것은 어떨까욤? 좀 더 설명을 추가해보았습니다!

The components and foundations provided by the lunit design system only utilize colors from this palette. 루닛 디자인 시스템에서 제공하는 컴포넌트와 파운데이션은 이 팔레트의 색상만을 이용하고 있다.

루닛 디자인 시스템에서는 이 팔레트 안에서만 색을 이용하고, 팔레트 이외의 색상은 가급적 사용하지 않는다. 라는 기존 문장을 바꿔보았는데 어떤가요?

좋은 것 같습니다! 고생하셨습니다

HyejinYang · 2024-04-15T03:42:09Z

packages/design-system/src/stories/foundation/colors/Docs.mdx

-## Color Token에 테마를 부여하는 Base Wrapper
- Color token에 테마를 부여해주는 wrapper로, Base Layer 라고도 부른다.
- Base Wrapper 설정은 **컴포넌트 className에 테마 이름을 추가하는 방식** 으로 이루어진다.
+- **Core Token**: Color tokens used universally in UI elements such as background and text colors.  


Core Tokens: These are color tokens universally used in UI elements, including background and text colors.

문법 상 틀리지는 않았는데 These are가 들어가는 게 바로 이해가 쉬울 것 같아요!

HyejinYang · 2024-04-15T03:43:20Z

packages/design-system/src/stories/foundation/colors/Docs.mdx

+- **Core Token**: Color tokens used universally in UI elements such as background and text colors.  
+  _**Core Token** : background, text 색상과 같이 범용적으로 적용되는 UI 에서 사용하는 컬러 토큰_  
+- **Component Token**: Color tokens used specifically within certain components like buttons and chips.  
+ _**Component Token** : button, chip 등과 같이 특정 컴포넌트 안에서만 사용하는 컬러 토큰_  


Component Tokens: These are color tokens specifically utilized for certain components, such as buttons and chips.

HyejinYang · 2024-04-15T03:44:39Z

packages/design-system/src/stories/foundation/colors/Docs.mdx

+- **Component Token**: Color tokens used specifically within certain components like buttons and chips.  
+ _**Component Token** : button, chip 등과 같이 특정 컴포넌트 안에서만 사용하는 컬러 토큰_  
+- It is recommended to use **Color Tokens** instead of color codes or Global Colors.  
+  _색상 코드나 Global Color 대신 **Color Token** 을 이용하는 것 을 권장한다._  


궁금해졌는데, 디자인 시스템을 사용하는 이상 색상 코드를 직접 쓸 경우가 있을까요? 만약 색상 코드를 직접 사용한다면 이는 디자인 시스템을 이용하는 것은 아닐 것 같아서요.

디자인 시스템 컴포넌트를 이용하되 다른 색상으로 커스텀하여 사용하고 싶을 때 색상 코드를 사용하게 되지 않을까 싶습니다!

HyejinYang · 2024-04-15T03:47:11Z

packages/design-system/src/stories/foundation/colors/Docs.mdx

+- It is recommended to use **Color Tokens** instead of color codes or Global Colors.  
+  _색상 코드나 Global Color 대신 **Color Token** 을 이용하는 것 을 권장한다._  
+- Color Tokens have colors for four themes (Light1,2, Dark1,2), and the theme **is determined by the Base Wrapper surrounding the respective component**.  
+  _Color Token은 4가지 테마(Light1,2, Dark1,2) 별 색상을 가지고 있고, **해당 컴포넌트를 둘러싸고 있는 Base Wrapper** 에 의해 테마가 결정된다._  


Base Wrapper라고만 하면 이게 우리 디자인 시스템에서 제공하는 특정 Wrapper라고 오해할 수 있을 것 같습니다! 바로 뒤에 설명이 나오지만, 뒤의 소제목을 링크로 걸어주는 등의 배려가 있어야 할 것 같습니다

HyejinYang · 2024-04-15T03:54:02Z

packages/design-system/src/stories/foundation/colors/Docs.mdx

+  _Color Token은 4가지 테마(Light1,2, Dark1,2) 별 색상을 가지고 있고, **해당 컴포넌트를 둘러싸고 있는 Base Wrapper** 에 의해 테마가 결정된다._  
+
+## What is Base Wrapper?
+- The wrapper that assigns themes to color tokens is also known as the Base Layer.  


In our design system, any component that encompasses another child component is considered a base wrapper. It is also referred to as a base layer, as it can assign a color theme to the color token of the child component.

루닛 디자인 시스템에서 다른 하위 컴포넌트를 포함하는 모든 컴포넌트는 베이스래퍼로 간주된다. 베이스래퍼는 자식 컴포넌트의 색상 토큰에 색상 테마를 할당할 수 있으므로 베이스 레이어라고도 불린다.

<div>  <div> Color </div>  </div>

위는 설명과 함께 바로 코드가 들어가 있어야 이해가 쉬울 듯해 내용을 추가해 보았습니다!

베이스 어쩌구 하는 애들은 다시 한번 문서를 수정해서 써보겠습니다!

HyejinYang · 2024-04-15T03:59:28Z

이건 정말 사소한 부분이고 취향 차이일 수도 있을 것 같습니다만, 가이드 문서이다 보니 국문이 경어가 아닌 평어로 작성된 게 다소 어색하다는 생각이 듭니다! 외부인이 아니라 내부인을 향한다는 느낌이에요!

Jiyeon-lunit · 2024-04-22T06:05:53Z

리뷰 반영해서 문서 업데이트 하였습니다!
문체는 경어로 바꾸려다가 전자정부 디자인 가이드라인 문서도 평서문으로 작성되어 있어 그냥 그대로 두었습니다!

deminoth · 2024-04-22T06:42:12Z

packages/design-system/src/stories/foundation/colors/Docs.mdx

+- Color Tokens have colors for four themes (Light1, 2, Dark1, 2). Themes can be set using the className of the parent element surrounding the component.  
+  _Color Token은 4가지 테마(Light1,2, Dark1,2) 별 색상을 가지고 있다. 테마는 해당 컴포넌트를 둘러싸고 있는 부모 엘리먼트의 className을 이용해 설정할 수 있다._  


해당 컴포넌트 자체의 테마도 className에 의해 바뀌지 않나요? 부모에 지정해야만 바뀌는 것처럼 읽히네요!

부모에만 적용할 수 있는 줄 알았더니 본인에게도 적용이 가능하군요..... 텍스트 수정하겠습니다 ㅠㅠ

텍스트 수정했습니다. 다시 한번 확인 부탁드립니다!

HyejinYang

고생하셨습니다!

docs(Color): translate into English

ef011b5

Jiyeon-lunit requested review from deminoth and HyejinYang April 9, 2024 09:30

Jiyeon-lunit self-assigned this Apr 9, 2024

docs(Color): update text for formatting

5c29f47

Jiyeon-lunit force-pushed the DS-188-translate-into-english branch from e8411ca to 5c29f47 Compare April 11, 2024 08:00

LTakhyunKim approved these changes Apr 15, 2024

View reviewed changes

HyejinYang reviewed Apr 15, 2024

View reviewed changes

docs(Color): update description

80d183e

Jiyeon-lunit requested a review from HyejinYang April 22, 2024 06:06

deminoth reviewed Apr 22, 2024

View reviewed changes

Jiyeon-lunit force-pushed the DS-188-translate-into-english branch from a2db7a2 to c5d4d0a Compare April 22, 2024 07:32

docs(Color): update description

fa2c708

Jiyeon-lunit force-pushed the DS-188-translate-into-english branch from c5d4d0a to fa2c708 Compare April 22, 2024 07:38

HyejinYang approved these changes Apr 22, 2024

View reviewed changes

Jiyeon-lunit merged commit 2595f0d into main Apr 22, 2024
5 checks passed

Jiyeon-lunit deleted the DS-188-translate-into-english branch April 22, 2024 07:44

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[DS-188] Color storybook 문서에 영어 번역 추가 #171

[DS-188] Color storybook 문서에 영어 번역 추가 #171

Jiyeon-lunit commented Apr 9, 2024

github-actions bot commented Apr 9, 2024 •

edited

Loading

HyejinYang commented Apr 9, 2024 •

edited

Loading

deminoth commented Apr 10, 2024 •

edited by unfurl-links bot

Loading

Jiyeon-lunit commented Apr 11, 2024

Jiyeon-lunit commented Apr 11, 2024

LTakhyunKim left a comment

HyejinYang Apr 15, 2024

HyejinYang Apr 15, 2024 •

edited

Loading

Jiyeon-lunit Apr 15, 2024

HyejinYang Apr 15, 2024

HyejinYang Apr 15, 2024

Jiyeon-lunit Apr 15, 2024

HyejinYang commented Apr 15, 2024

HyejinYang Apr 15, 2024

Jiyeon-lunit Apr 15, 2024

HyejinYang Apr 15, 2024 •

edited

Loading

Jiyeon-lunit Apr 15, 2024 •

edited

Loading

HyejinYang Apr 15, 2024

HyejinYang Apr 15, 2024

HyejinYang Apr 15, 2024

HyejinYang Apr 15, 2024

Jiyeon-lunit Apr 15, 2024

HyejinYang Apr 15, 2024

HyejinYang Apr 15, 2024 •

edited

Loading

Jiyeon-lunit Apr 15, 2024

HyejinYang commented Apr 15, 2024

Jiyeon-lunit commented Apr 22, 2024

deminoth Apr 22, 2024

Jiyeon-lunit Apr 22, 2024

Jiyeon-lunit Apr 22, 2024

HyejinYang left a comment

		- Color Tokens have colors for four themes (Light1, 2, Dark1, 2). Themes can be set using the className of the parent element surrounding the component.
		_Color Token은 4가지 테마(Light1,2, Dark1,2) 별 색상을 가지고 있다. 테마는 해당 컴포넌트를 둘러싸고 있는 부모 엘리먼트의 className을 이용해 설정할 수 있다._

[DS-188] Color storybook 문서에 영어 번역 추가 #171

[DS-188] Color storybook 문서에 영어 번역 추가 #171

Conversation

Jiyeon-lunit commented Apr 9, 2024

Description

github-actions bot commented Apr 9, 2024 • edited Loading

HyejinYang commented Apr 9, 2024 • edited Loading

deminoth commented Apr 10, 2024 • edited by unfurl-links bot Loading

Jiyeon-lunit commented Apr 11, 2024

Jiyeon-lunit commented Apr 11, 2024

LTakhyunKim left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

HyejinYang Apr 15, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

HyejinYang commented Apr 15, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

HyejinYang Apr 15, 2024 • edited Loading

Choose a reason for hiding this comment

Jiyeon-lunit Apr 15, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

HyejinYang Apr 15, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

HyejinYang commented Apr 15, 2024

Jiyeon-lunit commented Apr 22, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

HyejinYang left a comment

Choose a reason for hiding this comment

github-actions bot commented Apr 9, 2024 •

edited

Loading

HyejinYang commented Apr 9, 2024 •

edited

Loading

deminoth commented Apr 10, 2024 •

edited by unfurl-links bot

Loading

HyejinYang Apr 15, 2024 •

edited

Loading

HyejinYang Apr 15, 2024 •

edited

Loading

Jiyeon-lunit Apr 15, 2024 •

edited

Loading

HyejinYang Apr 15, 2024 •

edited

Loading