01 / 첨부 관찰 · 공식 설명
보와 기둥, 천·지·인
첨부 로고는 굵은 가로획 아래 여섯 음절과 원형·직선이 반복됩니다. 공식 CI는 건축물의 보와 여섯 기둥을 로고 구조로 확장합니다.[1] 검정이 주조색이며, 하늘·황토·노랑은 각각 천·지·인을 나타냅니다.[2]
SEJONG CENTER · COLOR & VARIABLES
색은 그대로.
경험은 더 선명하게.
기존 브랜드의 천·지·인을 지키고,
웹에서 읽고, 찾고, 예매하기 쉬운 컬러 역할을 더합니다.
A / IDENTITY
브랜드에서 UI로.
확인된 브랜드 정보와 디자인 해석,
이번 리뉴얼의 제안을 구분했습니다.
02 / 디자인 해석
단단한 틀, 열린 무대
로고의 검정과 반복 구조는 단단한 인상을, 세 가지 유채색은 다양성을 표현하는 장치로 읽힙니다. 따라서 화면 전체를 여러 색으로 채우기보다, 콘텐츠가 돋보이는 정돈된 틀을 만드는 방향이 적합하다고 판단했습니다.
03 / 웹 적용 제안
로고는 보존, 정보는 정돈
공식 로고를 일반 글꼴로 다시 만들지 않습니다. 메뉴·본문에는 Pretendard를 적용하고, 검정은 핵심 행동에 고정합니다. 새 유채색 대신 중립색 3개만 보완해 배경·설명·구분선을 구별합니다.
B / COLOR PALETTE
8개의 색, 분명한 역할.
기존 유지 5신규 중립색 3HEX를 누르면 복사
01
Primary · Text기존 유지
브랜드 블랙
로고의 중심색. 제목·본문과 예매 등 핵심 행동에 사용합니다.
02
Secondary기존 유지
하늘색 · 천
보조 버튼과 탐색·안내 영역에 사용합니다. 글자는 검정으로 고정합니다.
03
Accent / Highlight기존 유지
노란색 · 인
추천 배지와 짧은 강조에 사용합니다. 기본 예매 버튼을 대체하지 않습니다.
04
Accent / Heritage기존 유지
황토색 · 지
문화 이야기·브랜드 콘텐츠의 제한적 강조색입니다. 작은 본문색으로 쓰지 않습니다.
05
Surface기존 유지
퓨어 화이트
카드·헤더·정보 패널의 표면과 어두운 배경 위 글자에 사용합니다.
06
Background신규 제안
웜 그레이 050
페이지의 기본 배경. 흰색 카드가 놓이는 바탕을 부드럽게 구분합니다.
07
Border신규 제안
웜 그레이 300
카드의 장식 테두리·구분선에 사용합니다. 입력창의 유일한 경계로는 쓰지 않습니다.
08
Text / Secondary신규 제안
그레이 600
날짜·설명·보조 본문에 사용합니다. 입력창 경계와 검정 버튼의 호버에도 재사용합니다.
검정은 Primary, 하늘색은 Secondary. 노랑·황토는 Accent로 제한합니다. 페이지 배경은 웜 그레이 050, 카드 표면은 흰색, 본문은 검정, 보조 설명은 그레이 600, 장식 구분선은 웜 그레이 300을 사용합니다. 하나의 색은 여러 역할에 재사용할 수 있습니다.
기존 컬러의 값은 어떻게 정했나요?
첨부 자료와 공식 CI의 RGB 값을 그대로 HEX로 변환했습니다. 하늘색 84·200·232 → #54C8E8, 노랑 255·232·0 → #FFE800, 황토 195·109·21 → #C36D15입니다. 캡처 이미지의 픽셀색을 추출하거나 Pantone을 임의 변환하지 않았습니다. 자료의 흰색에 하늘색과 같은 “PANTONE 305 C”가 기재되어 있으므로 이 표기는 사용하지 않고, 흰색 RGB 255·255·255 → #FFFFFF를 기준으로 삼았습니다.[2]
C / FIGMA VARIABLES
원본값과 사용 역할을 분리합니다.
Primitive는 색의 원본값,
Semantic은 그 색이 맡는 역할입니다.
Alias는 다른 변수의 값을 연결해서 쓰는 방식입니다. 아래 Semantic은 모두 01. Primitives의 변수를 직접 참조하며, 새 HEX 값을 만들지 않습니다.[4]
01. PRIMITIVES / 원본값
color/black#000000
02. SEMANTIC / 사용 역할
action/primaryAlias → color/black
예매하기 핵심 버튼에 적용 · UI 예시로 이동
01. Primitives
색 원본 8개. 변수명을 누르면 복사할 수 있습니다.
| Collection | 컬러칩 · 색상 | 변수명 | HEX 코드 | 사용 목적 |
|---|---|---|---|---|
| 01. Primitives | 브랜드 블랙기존 | #000000 |
로고의 중심색. 제목·본문과 예매 등 핵심 행동에 사용합니다. | |
| 01. Primitives | 하늘색 · 천기존 | #54C8E8 |
보조 버튼과 탐색·안내 영역에 사용합니다. 글자는 검정으로 고정합니다. | |
| 01. Primitives | 노란색 · 인기존 | #FFE800 |
추천 배지와 짧은 강조에 사용합니다. 기본 예매 버튼을 대체하지 않습니다. | |
| 01. Primitives | 황토색 · 지기존 | #C36D15 |
문화 이야기·브랜드 콘텐츠의 제한적 강조색입니다. 작은 본문색으로 쓰지 않습니다. | |
| 01. Primitives | 퓨어 화이트기존 | #FFFFFF |
카드·헤더·정보 패널의 표면과 어두운 배경 위 글자에 사용합니다. | |
| 01. Primitives | 웜 그레이 050신규 | #F7F7F5 |
페이지의 기본 배경. 흰색 카드가 놓이는 바탕을 부드럽게 구분합니다. | |
| 01. Primitives | 웜 그레이 300신규 | #D9D9D4 |
카드의 장식 테두리·구분선에 사용합니다. 입력창의 유일한 경계로는 쓰지 않습니다. | |
| 01. Primitives | 그레이 600신규 | #626262 |
날짜·설명·보조 본문에 사용합니다. 입력창 경계와 검정 버튼의 호버에도 재사용합니다. |
02. Semantic
역할 변수 20개. 연결할 Primitive를 누르면 원본 행으로 이동합니다.
| Collection | 변수명 | 연결할 Primitive / Alias | 사용 목적 |
|---|---|---|---|
| 02. Semantic | color/gray/050 |
페이지 전체 배경 | |
| 02. Semantic | color/white |
카드·헤더·기본 정보 패널 | |
| 02. Semantic | color/gray/050 |
카드 안의 보조 영역·예시 무대 배경 | |
| 02. Semantic | color/black |
어두운 콘텐츠 패널·푸터 | |
| 02. Semantic | color/black |
제목·본문·필수 정보 | |
| 02. Semantic | color/gray/600 |
흰색·밝은 회색 위 설명·날짜 | |
| 02. Semantic | color/white |
검정·어두운 회색 위 글자, Primary 버튼 글자 | |
| 02. Semantic | color/black |
하늘·노랑·황토 배경 위 글자 | |
| 02. Semantic | color/gray/300 |
장식용 카드 경계·구분선 | |
| 02. Semantic | color/gray/600 |
입력창 등 식별에 필요한 경계 | |
| 02. Semantic | color/black |
키보드 포커스 외곽선; 흰색 간격과 함께 사용 | |
| 02. Semantic | color/black |
예매·신청 등 가장 중요한 버튼 배경 | |
| 02. Semantic | color/gray/600 |
Primary 버튼 호버 배경; 글자는 흰색 유지 | |
| 02. Semantic | color/sky |
공연 안내·탐색 등 보조 버튼 배경 | |
| 02. Semantic | color/white |
우선순위가 낮은 외곽선 버튼 배경 | |
| 02. Semantic | color/gray/300 |
사용할 수 없는 버튼 배경 | |
| 02. Semantic | color/gray/600 |
비활성 버튼 글자; 실제 disabled 속성과 함께 사용 | |
| 02. Semantic | color/yellow |
추천·기획 배지와 짧은 강조 | |
| 02. Semantic | color/ochre |
문화·브랜드 이야기의 강조 면 | |
| 02. Semantic | color/sky |
탐색·안내 패널의 강조 면 |
Figma 등록 순서[4]
1. 원본값 등록Variables에서 01. Primitives Collection을 만듭니다. Color 타입으로 변수 8개와 HEX 값을 입력합니다.
2. 역할 연결02. Semantic에 Color 변수를 만듭니다. 값에서 Create alias를 선택하고 표에 적힌 Primitive를 검색해 연결합니다.
3. 화면에 적용버튼·카드·텍스트에는 Semantic을 적용합니다. 예: 버튼 배경은 action/primary, 버튼 글자는 text/inverse.
두 Collection 모두 모드는 light 하나로 시작합니다. 이 HTML은 수동 등록용 명세이며 Figma에 자동 등록하지 않습니다. 복사 버튼은 문자열을 복사할 뿐, Alias 연결 자체를 생성하지 않습니다.
D / CONTRAST & RULES
예쁜 색보다, 읽히는 조합.
아래는 지정한 HEX로 계산한 글자·배경 대비입니다.
일반 본문은 최소 4.5:1을 기준으로 선택했습니다.[5]
Aa
흰 글자 / 검정21.00 : 1일반 본문 AA 기준 충족
Aa
검정 글자 / 하늘10.80 : 1일반 본문 AA 기준 충족
Aa
검정 글자 / 노랑16.79 : 1일반 본문 AA 기준 충족
Aa
검정 글자 / 황토5.52 : 1일반 본문 AA 기준 충족
Aa
그레이 600 / 흰색6.10 : 1일반 본문 AA 기준 충족
유채색 위 작은 흰색 글자는 피하기흰색 / 하늘은 1.94:1, 흰색 / 노랑은 1.25:1, 흰색 / 황토는 3.81:1로 일반 본문 4.5:1에 미달합니다. 세 색 위에는 검정을 사용합니다. 보조 글자 그레이 600은 페이지 배경 위에서도 5.69:1입니다. 계산값은 소수점 둘째 자리 표시이며, 전체 페이지의 접근성 인증을 뜻하지는 않습니다.[5]
장식선과 조작 경계를 구분하기웜 그레이 300 / 흰색은 1.42:1이므로 장식선에만 사용합니다. 입력창처럼 경계 인지가 필요한 UI는 그레이 600이나 검정을 쓰고, 키보드 포커스는 검정 외곽선과 흰색 간격으로 표시합니다. 식별에 필요한 비텍스트 요소는 인접 배경과 3:1 이상을 확보합니다.[6]
운영 규칙 제안: 한 영역에서는 주된 강조색 하나를 선택합니다. 버튼 호버는 기존 색과 밑줄로 표현하고, 색을 계속 늘리지 않습니다. 노랑을 자동으로 ‘경고’에 배정하지 않습니다. 이 기본안에는 성공·오류 전용색과 다크 모드를 추가하지 않았습니다.
E / UI IN PRACTICE
실제 화면에서는 이렇게.
배경·카드·버튼·배지·입력창을 함께 비교하세요.
버튼을 누르면 적용된 변수 조합을 확인할 수 있습니다.
DISCOVER YOUR STAGE
오늘, 예술을 만나는 시간.
가상 UI · 실제 공연 정보가 아닙니다
SEJONG / SAMPLE
새로운
울림
울림
기획 공연 · 예시
무대가 열리는 순간
포스터가 시선을 끌고,
정보는 흰색 카드 안에서 읽힙니다.
가장 중요한 행동은 검정으로.
검색 기능 없는 디자인 예시 · 경계: border/strong · Tab 키로 포커스 확인
버튼 상태 예시
예시 버튼을 누르면 이곳에 색상 변수 연결이 표시됩니다. 실제 예매나 외부 전송은 이루어지지 않습니다.
배경 background/page카드 surface/default제목 text/primary설명 text/secondary배지 accent/highlight
이 HTML의 CSS도 원본 색 → 역할 변수 → 컴포넌트 구조입니다. :root의 Primitive에서만 색을 정의하고, 버튼·카드는 var(--action-primary)처럼 Semantic을 참조합니다. 팔레트와 변수표의 컬러칩만 원본값을 직접 보여줍니다.