개요
핵심 요약 — SP삼화 100년 동행 뮤지엄은 1946년 창립한 SP삼화가 80주년을 맞아 지나온 시간과 앞으로의 약속을 한 화면에 눌러 담은 브랜드 헤리티지 사이트다. 첫 화면은 긴 설명 문단을 걷어내고, 중앙에 거대한 원형 이미지 링을 세운 뒤 왼쪽 1946과 오른쪽 2126을 가느다란 숫자로 마주 세워 시간의 궤적을 단번에 읽히게 한다. 이번 UX/UI 리뷰에서는 이 원형 타임라인이 실제로 얼마나 직관적으로 읽히는지, 자개빛 그라디언트와 HERITAGE·FUTURE 중심의 메뉴가 브랜드 톤을 어떻게 떠받치는지, 그리고 이런 몰입형 홈페이지 제작이 반드시 치러야 하는 성능과 정보 설계의 값을 함께 따져본다.
브랜드 & 메시지
브랜드 메시지의 무게 중심은 두 숫자 사이에 놓인 짧은 카피다. 왼쪽은 ‘보호로 시작된 80년에서’, 오른쪽은 ‘사람을 향한 100년의 미래로’. 도료 회사의 본질인 보호(coating)를 출발점에, 사람을 지향점에 배치한 이 대구는 제품 스펙을 늘어놓는 대신 가치의 이동을 이야기한다. 중앙 원형 링은 해상풍력과 숲, 항만 컨테이너, 도시의 야경 같은 오늘의 산업 현장을 SAMHWA PAINTS가 찍힌 낡은 페인트 통과 강판 코일 같은 헤리티지 장면과 파이 조각처럼 이어 붙여 ‘동행’이라는 단어를 그대로 그림으로 옮겼다. 상단 네비게이션은 HERITAGE, SP SAMHWA, FUTURE, EVENT 네 갈래다. 회사 소개서 목차가 아니라 과거·정체성·미래·참여라는 서사의 순서를 그대로 메뉴로 세운 점이 이 웹디자인의 영리한 지점이다. 다만 우측 상단의 아웃라인 버튼 ‘SP SAMHWA’는 본사 사이트로 나가는 링크인지 관람을 여는 진입 버튼인지 라벨만으로는 가늠하기 어렵다.
UX/UI 관점
실제 화면에서 확인되는 강점은 뚜렷하다. 첫째, 원형 링이 단일 초점으로 작동해 진입 후 첫 3초의 시선을 붙잡는다. 둘째, 얇게 뽑은 1946과 2126 숫자는 굵은 헤드라인 하나 없이도 좌우로 팽팽한 시간 축을 만든다. 셋째, 무지개빛으로 번지는 자개 그라디언트 배경은 색을 다루는 회사라는 정체성과 화면을 자연스럽게 잇는다. 넷째, 숫자 8을 무한대처럼 비틀어 만든 80th 엠블럼이 링 한가운데의 앵커로 기능해 시선을 안쪽으로 모은다. 다섯째, HERITAGE·SP SAMHWA·FUTURE·EVENT로 압축한 네 개짜리 영문 메뉴는 인지 부하가 낮다. 여섯째, 좌우 대칭 구도와 넉넉한 여백이 프리미엄한 정적 분위기를 완성한다. 이 요소들이 합쳐지면서 화면은 기업 연혁 페이지가 아니라 전시장 입구에 가까운 인상을 남긴다.
IA·SEO 전략
이런 몰입형 화면일수록 정보 설계와 검색 노출은 뒤로 밀리기 쉽다. 링을 채운 사진과 1946·2126 숫자가 만약 하나의 큰 이미지나 캔버스로 렌더된다면 크롤러에는 아무 텍스트도 남지 않는다. 최소한 ‘SP삼화 100년 동행 뮤지엄’과 ‘삼화페인트 80주년’ 같은 핵심 문구는 이미지가 아닌 실제 H1과 본문 텍스트로 존재해야 한다. HERITAGE, FUTURE, EVENT 각 챕터는 스크롤 한 덩어리로 뭉개지 말고 고유 URL과 개별 title·description을 갖는 편이 검색 유입에 유리하다. 원형 링의 조각 이미지에는 ‘해상풍력 발전 단지’, ‘삼화페인트 헤리티지 제품’처럼 의미가 담긴 alt를 부여하고, 80주년 기념 행사는 Event, 회사 정보는 Organization 구조화 데이터로 표시하면 브랜드 검색 결과가 한층 풍부해진다. 웹사이트 제작 단계에서 이 텍스트 층을 먼저 확보해 두는 것이 몰입감과 검색 가시성을 동시에 지키는 길이다.
성능·접근성
성능은 이 유형의 사이트가 가장 자주 발목 잡히는 지점이다. 중앙 원형 링은 고해상도 사진 여러 장을 원형으로 합성한 무거운 요소여서 최초 콘텐츠 렌더(LCP)를 늦추기 쉽다. 조각들을 미리 하나의 이미지로 합쳐 WebP·AVIF로 내보내거나, 바깥 조각부터 단계적으로 지연 로딩하는 방식을 검토할 만하다. 자개빛 배경은 대형 이미지 대신 CSS 그라디언트와 가벼운 노이즈 텍스처의 조합으로도 상당 부분 재현할 수 있어 초기 용량을 줄인다. 가느다란 숫자용 서체는 필요한 글자만 서브셋하고 preload로 당겨 폰트 교체로 인한 화면 흔들림(CLS)을 낮춘다. 무엇보다 1946과 2126을 좌우로 크게 벌린 구도는 모바일에서 그대로 쓰기 어렵다. 작은 화면에서는 두 숫자를 위아래로 재배치하고 링의 지름을 줄이는 반응형 규칙이 필요하다. 진입 애니메이션이 있다면 prefers-reduced-motion 설정을 존중해 접근성까지 챙겨야 한다.
디지털 파트너 더블루캔버스
80년의 헤리티지를 한 화면으로 압축하는 일은 단순한 페이지 제작이 아니라 브랜드의 서사를 구조로 번역하는 작업이다. The Blue Canvas(더블루캔버스)는 제조·소재·B2B 브랜드가 오래 쌓아 온 자산을 디지털 경험으로 옮기는 홈페이지 제작에 강점을 둔다. 몰입형 헤리티지 화면이 검색과 성능을 잃지 않도록 정보 구조를 먼저 설계하고, UX/UI와 웹디자인, 프론트엔드 구현을 하나의 흐름으로 진행한다. 여기에 SEO 검색엔진최적화와 퍼포먼스 마케팅을 붙여, 공들여 만든 웹사이트가 전시장에만 머물지 않고 실제 방문과 문의로 이어지게 만든다. 브랜드 뮤지엄이든 신제품 사이트든 보여주고 싶은 이야기가 있다면 웹사이트 제작 파트너로 한번 상의해 볼 만하다.
마무리와 다음 스텝
SP삼화 100년 동행 뮤지엄은 원형 타임라인과 자개빛 톤으로 브랜드의 시간을 감각적으로 그려낸, 완성도 높은 헤리티지 화면이다. 남은 과제는 이 몰입감을 검색과 속도, 모바일까지 흠 없이 옮기는 일이다. 실행 제안은 세 가지다. 첫째, 핵심 카피와 챕터를 실제 텍스트와 개별 URL로 노출해 검색 유입의 문을 연다. 둘째, 중앙 링을 이미지 최적화와 단계적 로딩으로 다듬어 첫 화면 로딩을 앞당긴다. 셋째, 1946·2126 구도를 모바일 전용 레이아웃으로 재설계해 작은 화면에서도 시간 축이 살아 있게 한다. 이 세 가지만 손봐도 지금의 인상적인 웹디자인은 성과까지 갖춘 사이트로 올라선다.