세종문화회관 사이트 보기

이호세 · 세종문화회관 UI/UX 리뉴얼

리뉴얼의 기준과
화면을 만든 이유.

공연을 보려는 사람과 공간을 빌리려는 사람에게 필요한 정보는 다릅니다. 두 이용 흐름을 구분하고, 작품을 고른 뒤 일정과 장소를 확인할 수 있도록 화면을 구성했습니다.

기획 의도

관람과 대관의 출발점을
분명하게 나누었습니다.

관람객에게는 작품명·일정·장소가, 대관 이용자에게는 공간·시설·신청 절차가 먼저 필요합니다. 메인 배너 아래에 두 경로를 나란히 두어 목적에 맞는 정보로 바로 이동하게 했습니다.

공연·전시 관람

  1. 프로그램 탐색
  2. 일정·장소·관람 조건
  3. 예매

대관·단체 관람

  1. 대관 개요
  2. 시설·장비
  3. 일정 확인
  4. 절차·서류
  5. 대관 신청
정보구조

메뉴는 찾는 정보에 따라,
메인은 이용 순서에 따라.

상단 메뉴는 프로그램·대관·이용안내·소식과 혜택·세종문화회관의 다섯 가지로 묶었습니다. 메인은 작품 발견에서 방문 준비와 기관 소개까지 여섯 단계로 이어집니다. 메뉴와 화면의 섹션 수를 억지로 맞추지 않았습니다.

  • 프로그램공연 · 전시 · 교육 · 기획·시즌
  • 대관시설 · 일정 · 절차 · 신청 · 문의
  • 이용안내교통 · 주차 · 공간 · 접근성
  • 소식과 혜택공지 · 티켓오픈 · 이벤트 · 멤버십
  • 세종문화회관기관 · 예술단 · 경영 · 후원

컬러 체계

검정과 흰색이 바탕,
노랑이 행동의 기준.

색상 운용 기준은 검정·흰색·노랑이 전체 UI의 90% 이상을 차지하도록 하는 것입니다. 하늘색과 황토색은 보조 팔레트로 남기고, 큰 배경마다 다른 색을 채우는 방식은 줄였습니다. 회색은 본문 보조 정보와 구분선에 사용합니다.

세종문화회관의 천·지·인은 하늘색의 천(天), 황토색의 지(地), 노랑의 인(人)에 대응합니다. 세 채널의 색을 바꿀 수 있는 체계는 관람객의 다양성을 표현합니다. 이번 화면은 그 팔레트를 유지하면서 작품 이미지의 색과 UI의 강조색이 경쟁하지 않도록 정리했습니다.

Main Color

검정

RGB
0 0 0
CMYK
0 0 0 100

제목·본문·어두운 배경

Sub Color · 인(人) · PANTONE 803 C

노랑

RGB
255 232 0
CMYK
0 5 100 0

주요 버튼·선택 상태·강조

Sub Color

흰색

RGB
255 255 255
CMYK
0 0 0 0

기본 배경·검정 위의 글자

하늘색 천(天) · PANTONE 305 C

RGB 84 200 232 CMYK 60 0 7.5 0

황토색 지(地) · PANTONE 7414 C

RGB 195 109 21 CMYK 30 67.5 100 0

웹 화면에는 제공된 RGB 값을 그대로 적용했습니다. CMYK·PANTONE은 제공 자료의 인쇄용 표기이며 자동 변환값이 아닙니다. 흰색에 중복 기재된 PANTONE 305 C는 하늘색과 같으므로 흰색의 별도 번호로 사용하지 않았습니다.

색은 장식보다 상태를 구분하는 데 사용합니다.

선택한 분류선택 전 분류프로그램 보기

노란 바탕의 글자는 검정으로 표시합니다. 선택 여부는 색상과 테두리·굵기를 함께 바꿔 구분합니다.

서체

정보는 Pretendard,
큰 제목에는 세종 서체.

메뉴·버튼·날짜·장소·본문은 Pretendard Variable로 통일했습니다. 작품명과 큰 섹션 제목에만 세종 서체를 사용해, 작은 정보까지 개성이 강한 글꼴로 읽어야 하는 부담을 줄였습니다.

Pretendard Variable

본문 · 메뉴 · 버튼 · 날짜

공연·전시·교육

2026.11.05 — 2026.11.08 · 세종대극장

공연 일정과 관람 장소를 확인하고, 원하는 프로그램의 상세 정보로 이동하세요.

Regular 400Medium 500Bold 700

세종 기본체

작품명 · 큰 제목

세종문화회관

SCEN Basic Classic Medium

Pretendard Variable과 제공된 세종 서체는 WOFF2 파일로 저장해 불러옵니다. 폰트 CDN에 연결하지 않으며, 가변 글꼴의 굵기를 실제 파일에서 제공합니다.

화면 구성

정보마다 다른
탐색 방식.

와이어프레임의 여섯 섹션과 순서를 유지했습니다. 포스터를 비교하는 영역, 분류로 찾는 영역, 방문 정보를 확인하는 영역이 각자의 역할을 갖도록 구성했습니다.

세종대극장 객석과 무대
공간 사진은 넓게, 공연 포스터는 세로 비율을 유지합니다.
주요 프로그램
중앙 공연에 집중하면서 양옆에 다음 작품을 보여줍니다. 드래그·스와이프·방향키·선형 버튼으로 직접 넘깁니다.
빠른 예매
검정 바탕의 세로 포스터를 비교하고 이달·다음 달로 좁힙니다. 날짜와 장소를 같은 순서로 표시합니다.
모든 프로그램
왼쪽 분류, 가운데 2×2 카드, 오른쪽 멤버십 안내로 나눴습니다. 모바일에서는 같은 읽기 순서로 쌓습니다.
이용안내
공간·관람 지원·유의사항·교통을 2×2로 묶었습니다. 마우스를 올리지 않아도 버튼과 키보드로 내용을 열 수 있습니다.
소식과 혜택
분류·제목·날짜를 정렬해 공지를 빠르게 훑고, 멤버십 안내는 항상 찾을 수 있도록 남겼습니다.
세종문화회관
예술단·경영·영상·정보공개·후원으로 연결합니다. 의미 없는 장식 문구보다 정보의 이름을 앞세웠습니다.
참고 자료

기획과 화면의 연결.

이호세의 분석·정보구조·FigJam 기록을 토대로 구성했습니다. 브랜드 색과 제공 서체를 유지하고, 레퍼런스는 배치와 탐색 방식의 근거로 활용했습니다.

이 기준이 실제 화면에 어떻게 이어지는지 살펴보세요.

사이트 보기