본문으로 건너뛰기

Configure Color, Typography, and Icons (색상, 타이포그래피 및 아이콘 설정)

Lucy Studio는 색상(Color)·타이포그래피(Typography)·아이콘(Icon)을 프로젝트 전역 팔레트/토큰 형태로 미리 등록해두고, 각 화면/컴포넌트가 이를 참조해서 스타일을 적용하는 방식을 씁니다. 값을 화면마다 직접 입력(하드코딩)하지 않고 팔레트를 통해 관리하면, 나중에 브랜드 컬러나 폰트가 바뀌어도 한 곳만 수정하면 연결된 모든 화면에 일괄 반영됩니다.

타이포그래피(Semantic Font Styles) 적용​

제목, 본문, 캡션 등 텍스트 스타일이 폰트 패밀리/크기/굵기/줄간격/자간을 하나의 세트로 사전 정의되어 있어 재사용할 수 있습니다.

제목/본문/캡션 등 용도별로 30개 이상의 사전 정의 스타일이 제공되며, 폰트 패밀리는 목록에서 이름으로 선택합니다.

각 텍스트 스타일은 Mobile / Tablet / Desktop 3개의 디바이스 타입(DeviceType)으로 구성되어 있어, 스타일을 등록할 때 각 타입별로 값을 따로 입력해야 합니다. 디바이스 타입(브레이크포인트)마다 뷰포트 크기가 달라 최적의 폰트 사이즈가 다르기 때문입니다.

커스텀 텍스트 스타일 추가 (Add Text Style)​

사전 정의된 프리셋 외에, Text Style 테마 편집기에서 [+Add Custom Text Style] 액션으로 새 텍스트 스타일을 직접 추가할 수 있습니다.

커스텀 텍스트 스타일 추가 화면

Style Name, Font Size, Letter Spacing, Line Height, Font Weight, Font Family(드롭다운)를 입력해서 저장하면 프리셋(SemanticFontStyles)과 같은 레지스트리에 커스텀 스타일로 등록됩니다.

여기서 추가한 스타일은 기본 제공 스타일과 동일하게 등록되어, 다른 화면에서도 똑같이 선택해서 사용할 수 있습니다.

Figma 텍스트 스타일 가져오기 (Import Figma Text Styles)​

Text Style 편집기의 "Import from Figma" 기능으로, Figma 플러그인에서 복사한 텍스트 스타일 JSON을 붙여넣으면 파싱된 스타일을 가져올 수 있습니다.

팁

Figma가 아직 설치되어 있지 않다면 Figma 설치하기를 먼저 진행해주세요. Figma는 이미 설치되어 있지만 Lucy Studio용 플러그인만 없다면, 같은 문서의 "Figma to LucyStudio 플러그인 설치" 부분을 참고해주세요.

STEP 1. Figma에서 텍스트 스타일 복사하기​

  1. Figma 파일에서 가져오려는 텍스트 스타일(레이어 또는 텍스트 스타일 프리셋)을 선택합니다.
  2. 설치한 플러그인을 실행해, [</> Copy Code]로 선택한 텍스트 스타일을 JSON 형식으로 클립보드에 복사합니다.

Figma 플러그인에서 텍스트 스타일 복사

STEP 2. Lucy Studio에 붙여넣기​

  1. Lucy Studio의 Text Style 편집기에서 [Import from Figma] 버튼을 클릭합니다.
  2. 열린 입력창에 앞서 복사해둔 JSON 값을 붙여넣기(Paste, macOS: Cmd+V / Windows: Ctrl+V) 합니다.
  3. [Import] 버튼을 눌러 적용합니다.

Lucy Studio의 Figma 텍스트 스타일 가져오기 창

가져온 스타일은 디바이스 타입(Mobile/Tablet/Desktop)별 값이 자동으로 매핑되며, 이미 가져온 적이 있는 스타일은 업데이트되고 없으면 새로 추가됩니다. 이렇게 가져온 스타일도 기본 제공 스타일과 동일하게 사용할 수 있습니다.

색상 팔레트(Semantic Colors)​

프로젝트에서 사용할 색상은 화면마다 직접 입력하지 않고, 미리 등록된 팔레트에서 선택해서 사용합니다. 색상은 주요 색상, 배경/서피스, 테두리/라인, 텍스트, 상태 표시 등 16개 그룹으로 분류되어 있습니다.

색상 팔레트 화면

커스텀 컬러 추가 (Add Color)​

사전 정의된 색상 팔레트 외에, Color 편집기에서 [+Add Color] 액션으로 새 색상을 직접 추가할 수 있습니다. 색상 이름과 값(Hex 등)을 입력해서 저장하면 프리셋(Semantic Colors)과 같은 레지스트리에 커스텀 색상으로 등록됩니다.

여기서 추가한 색상은 기본 제공 색상과 동일하게 등록되어, 다른 화면에서도 똑같이 선택해서 사용할 수 있습니다.

Figma 컬러 가져오기 (Import Figma Colors)​

Color 편집기의 "Import from Figma" 기능으로, Figma의 Variables/Styles로 정의된 색상 값을 가져올 수 있습니다. Text Style과 마찬가지로 Figma 플러그인에서 복사한 색상 JSON을 붙여넣으면 파싱된 색상을 등록할 수 있습니다.

팁

Figma 설치 및 플러그인 설치가 필요하다면 Figma 설치하기를 참고해주세요.

Figma 컬러 가져오기 - 플러그인 화면 Figma 컬러 가져오기 - Lucy Studio 화면

가져온 색상은 이미 등록된 적이 있는 색상은 업데이트되고, 없으면 새로 추가됩니다. 이렇게 가져온 색상도 기본 제공 색상과 동일하게 사용할 수 있습니다.

아이콘​

아이콘은 기본 제공되는 Material Icons와 직접 등록하는 Custom Icons 두 가지 방식으로 사용할 수 있습니다. 위젯에 아이콘을 지정할 때 하나의 선택 화면에서 두 종류를 함께 골라 쓸 수 있습니다.

커스텀 아이콘 등록 (Custom Icons)​

SVG 아이콘들을 모아 하나의 아이콘 세트로 만들어 등록하면, 이후 아이콘 선택 화면의 Custom Icons 탭에서 선택해서 쓸 수 있습니다.

  1. 새 아이콘 세트를 만들고 이름을 붙입니다.
  2. 세트에 SVG 파일들을 추가합니다.
  3. 추가한 SVG들을 하나의 아이콘 세트로 변환(Generate)합니다.
  4. 변환된 아이콘 세트를 등록하면 완료됩니다.

등록된 커스텀 아이콘도 Material Icons와 동일하게 크기·색상을 자유롭게 지정할 수 있습니다.

커스텀 아이콘 세트 화면

기본 아이콘 라이브러리 사용 (Material Icons)​

Flutter가 기본 제공하는 Material Icons 세트를 그대로 선택해서 사용할 수 있습니다.

참고 사항​

  • 색상/폰트/아이콘 값은 팔레트·토큰 한 곳만 수정하면 참조하는 모든 화면에 반영됩니다.
  • 아이콘 선택 화면에서는 Material Icons와 Custom Icons를 탭으로 전환하면서 골라 쓸 수 있습니다.