개요 및 리뷰 범위
본 문서는 KT&G 상상플래닛 웹사이트를 대상으로 한 UX/UI 리뷰로, 사용자 여정 전반을 관통하는 핵심 접점과 과업 흐름을 정리하고 개선의 우선순위를 제시합니다. 특히 정보구조(IA) 정합성, 시맨틱 마크업과 접근성 표준 준수, 성능 최적화에 따른 체감 속도 개선, 그리고 검색 최적화(SEO) 관점에서의 노출 효율을 종합적으로 다룹니다. 화면 설계는 브랜드 아이덴티티와 가독성의 균형을 추구하며, 대비·간격·계층을 통해 시각적 맥락을 분명히 하고, 반복 가능한 컴포넌트 단위로 시스템화하여 유지보수 비용을 낮추는 방향을 권장합니다. 또한 본 리뷰는 모바일 우선 전략을 기본 전제로 하여, 터치 대상의 명확성, 입력 최소화, 콘텐츠 우선 로딩 등 실사용 상황의 제약을 고려한 안내를 포함합니다.
브랜드 메시지와 톤&매너
상상플래닛의 커뮤니케이션 핵심은 “문화·예술·상상”으로 요약될 수 있습니다. 브랜드 톤&매너는 밝고 유연한 리듬, 명료한 어휘, 과도하지 않은 애니메이션으로 구현하는 것이 적합합니다. 첫 화면에서는 브랜드가 제공하는 가치를 한 문장 태그라인으로 요약하고, 바로 하단에 대표 서비스로 이동 가능한 버튼형 링크를 배치해 전환을 유도합니다. 일관된 버튼 스타일과 상태 피드백(hover/focus/active)을 제공하고, 색 대비는 WCAG 2.1 AA 기준(텍스트 4.5:1 이상)을 충족하도록 설계합니다. 비주얼은 큼직하게, 텍스트는 간결하게, 그리고 행동 유도 요소(CTA)는 스크롤 진행 중에도 반복적으로 노출해 피로감을 줄이되 선택지는 분명하게 남기는 전략이 효과적입니다. 콘텐츠 카드의 제목 길이·요약 규칙을 정의하면 목록 스캔 속도가 개선되고 맥락 보존도 수월해집니다.
UX/UI 설계 원칙
UX 관점의 첫 번째 원칙은 과업 흐름 최소화입니다. 사용자가 가장 많이 수행하는 상위 3개 시나리오(예: 프로그램 탐색, 일정 확인, 예약·참여)를 기준으로 탐색 깊이를 2~3단계 내로 제한하고, 상단 내비게이션과 본문 내 보조 내비게이션을 결합해 빠른 왕복이 가능하도록 만듭니다. UI는 정보 우선순위를 반영해 타이포 스케일과 공간 시스템을 일관화하고, 카드/리스트/디테일의 패턴을 재사용 가능한 컴포넌트로 추상화합니다. 폼은 입력 필드의 라벨을 항상 표시하고 오류 메시지는 구체적으로, 키보드 포커스 링을 명확히 노출하여 보조공학 사용자에게도 동일한 맥락을 제공합니다. 인터랙션은 작고 가벼우며 즉시성을 느끼게 해야 하며, 스켈레톤/프리페처/낙관적 UI 같은 체감 속도 향상 기법을 상황에 맞게 활용하는 것을 권장합니다. 마지막으로 공지·정책·이벤트 등 시의성 높은 정보는 홈에서 1~2 클릭으로 접근 가능하도록 배치합니다.
정보구조(IA)와 SEO 전략
IA는 “주요 오디언스 × 핵심 과업” 매트릭스를 만들고, 각 교차점에 대응하는 랜딩/하위 구조를 명확히 정의하는 것에서 시작합니다. 컨텐츠 타입(소식, 프로그램, 전시, 공간 소개 등)을 표준화하고 메타데이터 스키마를 일관되게 부여하면 리스트·필터·정렬·검색이 모두 자연스럽게 연결됩니다. SEO 측면에서는 페이지 고유의 제목과 메타 설명을 작성하고, H1은 페이지당 1개로 제한하며, H2~H3로 서브토픽 계층을 명확히 합니다. 의미 있는 앵커 텍스트, 올바른 대체 텍스트, 시맨틱 태그(article/nav/aside/section) 사용은 기본입니다. 오픈그래프/트위터 카드 메타를 채우고, URL은 영문-케밥 케이스로 유지하여 공유/인덱싱 친화도를 높입니다. 이미지에는 width/height, lazy 속성을 지정하고, 필요 시 WebP/AVIF 파생을 병행하되 원본은 그대로 보관합니다. 구조화 데이터(schema.org/Organization, Event, Article)를 적용하면 검색결과의 리치 스니펫 가능성이 커집니다.
성능과 접근성 체크리스트
성능은 사용자 만족의 기반입니다. 첫 의미 있는 페인트(FMP)와 상호작용 준비 시간(TTI)을 낮추기 위해 폰트 서브셋, CSS·JS 코드 스플리팅, 중요 리소스의 preload, 이미지의 지연 로딩과 적응형 서빙을 적용합니다. LCP 타깃을 2.5초 이내로 설정하고, CLS는 0.1 미만으로 관리합니다. 접근성은 키보드 탐색 가능 여부, 포커스 가시성, 명확한 폼 레이블/오류, ARIA 속성의 과용 방지, 충분한 색 대비를 기준으로 검토합니다. 미디어에는 캡션/대체 텍스트를 제공하고, 모션 민감 사용자를 위해 애니메이션 강도를 줄이는 prefers-reduced-motion 대응을 권장합니다. 또한 쿠키 배너/동의 관리 등 법적 컴플라이언스 이슈도 초기 설계 단계에서 함께 고려하면 재작업 비용이 줄어듭니다. Lighthouse/axe/PSI와 같은 도구로 정기 점검 주기를 운영에 내재화하는 것이 바람직합니다.
The Blue Canvas 소개
더블루캔버스(The Blue Canvas)는 비즈니스 목표와 사용자 경험을 연결하는 디지털 컨설팅·크리에이티브 스튜디오입니다. 우리는 브랜드 메시지, 제품 전략, UX 라이팅, 인터랙션 디자인, 프런트엔드 엔지니어링을 통합적으로 다루며, 문제를 “빠르게”가 아니라 “정확하게” 해결하는 데 집중합니다. 초기 진단을 통해 과업 정의와 우선순위를 명확히 하고, 측정 가능한 KPI를 기반으로 개선을 반복합니다. 본 리뷰에서 제안한 구조와 원칙은 다양한 조직 규모와 도메인에 적용 가능하도록 추상화되어 있으며, 실제 프로젝트에서는 데이터(트래픽·행동 로그·전환 퍼널)와 현업 인터뷰를 결합해 실행력을 높입니다. 협업을 원하신다면 아래 링크를 통해 저희 사례와 서비스를 확인해 주세요.
결론 및 다음 단계
KT&G 상상플래닛의 디지털 경험을 강화하기 위해서는 명확한 정보 설계, 일관된 컴포넌트 시스템, 접근성 표준 준수, 그리고 체감 속도 개선이 유기적으로 결합되어야 합니다. 본 리뷰는 가장 영향이 큰 과업을 기준으로 탐색·전환·회귀 흐름을 단축하고, 브랜드 톤&매너를 유지하면서도 가독성과 조작성의 기준선을 끌어올리는 접근을 제안합니다. 내부 프로세스에서는 디자인·개발·운영 간 핸드오프 산출물(컴포넌트 명세, 상태 다이어그램, 콘텐츠 필드 정의, 추적 이벤트 스키마)을 표준화하여 협업 비용을 줄이는 것이 중요합니다. 마지막으로, 정기적인 성능/접근성 점검과 SEO 관측을 운영 일정에 내재화하면 작은 개선의 합이 사용자 만족과 전환의 상승으로 이어집니다. 우선순위에 따라 파일럿 페이지를 선정하고, 가설—실험—측정—확산의 사이클을 2~4주 단위로 반복하는 방식을 권장합니다.