작품의 세계는 넓어지지만,
사이트의 접근성은 좁아지고 있었다.
야요이 쿠사마는 전 세계가 사랑하는 현대 미술의 아이콘이지만, 그녀의
공식 홈페이지는 테이블 기반 레이아웃과 분절된 정보 구조로 사용자
경험이 심각하게 저하되어 있었습니다.
디자인 & UI/UX,
모바일 경험, 정보 구조 — 세 가지 핵심 문제를 정의하고, 작가의 예술
세계에 걸맞는 현대적 웹사이트로 재구성했습니다.
테이블 레이아웃 기반의 구식 디자인으로 시각적 위계가 전혀 없고, 텍스트 링크 나열 수준의 내비게이션으로 브랜드 아이덴티티가 전무했습니다.
CSS Grid/Flexbox 기반 레이아웃 도입, 쿠사마의 물방울·호박·강렬한 색채를 반영한 비주얼 아이덴티티 구축, 이미지·영상을 활용한 몰입감 있는 메인 페이지 구성.
테이블 레이아웃으로 인해 모바일에서 레이아웃이 완전히 붕괴되며, 반응형 설계 자체가 없어 모바일 사용자 접근이 불가 수준이었습니다.
반응형 디자인 전면 재설계, 햄버거 메뉴 도입으로 모바일 내비게이션 UX를 개선하여 모든 디바이스에서 완전한 경험을 제공합니다.
공식 사이트·뮤지엄·스토어가 각각 분리된 3개 사이트로 운영되어 사용자가 정보를 찾기 위해 여러 사이트를 오가야 했고, 브랜드 통일성도 부족했습니다.
Profile / Works / Museum / Exhibition / Contact 모든 정보를 한 사이트 안에 통합하고, 계층형 드롭다운 내비게이션으로 구조화하여 일관된 브랜드 경험을 제공합니다.
세 가지 목표를 기반으로
사이트를 전면 재구성했습니다.
작가의 세계관을 담은 비주얼
쿠사마의 물방울, 호박, 강렬한 색채를 웹 디자인 언어로 재해석하여 사이트 전체에 일관된 아이덴티티를 부여합니다.
원스톱 정보 경험
분산된 3개 사이트의 정보를 Profile / Works / Museum / Exhibition / Contact 구조로 통합하여 사용자 여정을 단순화합니다.
모든 디바이스, 모든 사용자
반응형 레이아웃과 명확한 정보 위계로 모바일 환경에서도 완전한 경험을 제공하고 접근성을 높입니다.
草間彌生
메인 비주얼과 작가 소개, Profile·Works·Museum 세 섹션으로 이어지는 네비게이션, 하단 Contact 폼으로 구성했습니다.
Profile
쿠사마 야요이 작가의 생애와 예술 세계를 소개하는 페이지입니다. 작가의 연보와 주요 활동을 시각적으로 정리했습니다.
Works
Paintings와 Books 두 카테고리로 나뉘며, 대표 회화 작품 갤러리와 출판물 목록을 제공합니다.
Museum
Visit Information·Facilities·About과 Current·Past Exhibition으로 구성되며, 뮤지엄 방문 정보와 전시 아카이브를 제공합니다.
32px
16px
두 가지 상징을
하나의 원 안에
쿠사마 야요이를 가장 직관적으로 상징하는 두 가지 요소 — 붉은 물방울 패턴과 작가의 얼굴 — 를 단순한 형태로 압축했습니다. 물방울은 그녀의 예술 세계 전반을 관통하는 모티프이며, 친숙한 얼굴 실루엣은 작품을 넘어 아이콘이 된 작가 자체를 상징합니다. 복잡한 요소 없이 원형 안에 담아, 작은 크기에서도 브랜드를 즉각적으로 인식할 수 있도록 설계했습니다.
Yayoi Kusama
Works · Museum · Profile
草間彌生
작품 · 미술관 · 프로필
3가지 방향성을 바탕으로,
브랜드의 온도를 잃지 않으면서
디지털 공간에 세이투세를 풀어냈습니다.
앞서 도출한 브랜드 아이덴티티를 토대로 세이투세만의 감각적 경험을 제공할 수 있는 일관된 시각 구조를 구축하였습니다.
Responsive Grid
Adaptive Layout데스크탑·태블릿·모바일 전 디바이스를 아우르는 그리드 시스템
Visual Consistency
Brand Harmony딥그린·골드·아이보리로 완성된 일관된 컬러 & 타이포그래피 체계
Discovery UX
Curated Journey카테고리를 탐험하듯 발견하게 하는 쇼핑 경험
브랜드의 개성을 웹에서 그대로 느낄 수 있도록, 시각적 경험을 최우선으로 설계했습니다.
세이투세의 유니크한 브랜드 아이덴티티를 웹에서 자연스럽게 드러내기 위해 비주얼 스타일과 인터랙션에 집중했습니다. 스크롤 트리거 기반의 Fade-in 효과와 이미지 슬라이더를 직접 구현하며 사용자가 브랜드를 천천히 경험할 수 있도록 했습니다.
float 해제 이슈, 이미지 최적화 등 실무에서 마주치는 레이아웃 문제들을 직접 해결하면서 퍼블리싱 역량을 높인 프로젝트입니다.
기존 쇼핑몰의 2단계 탐색 구조(Shop → 카테고리)를 1단계로 단축해 클릭 수를 줄이고, Shop 진입 즉시 카테고리별 대표 이미지를 노출해 직관적인 탐색 경험을 제공했습니다.
Brand
Visual Identity
세이투세를 떠올렸을 때 자연스럽게 연상되는 초록과 노랑의 감각을 홈페이지에서도 그대로 전달하고자 했습니다. 상품 자체가 유니크하고 패턴이 강한 만큼, 브랜드 컬러 외 나머지 요소는 절제된 여백과 깔끔한 구조로 정리해 제품이 더욱 돋보이도록 설계했습니다.
Saytouche
Say Touché
ARCHIVE · SHOP
STORE · CONTACT
New Arrivals
세이투세
브랜드 스토리
신상품 보러가기
기존 이커머스 사이트를 따라 만들며 단순 UI 재현에 그치지 않고, 실제 서비스처럼 동작하는 기능 구현에 도전한 프로젝트입니다.
장바구니 담기·수량 변경·총액 계산 기능과 로그인·회원가입 흐름을 JavaScript로 직접 구현했습니다. 데이터 흐름과 DOM 조작을 깊이 이해하게 된 계기가 된 프로젝트입니다.
단순 레이아웃을 넘어 사용자 인터랙션과 상태 관리의 중요성을 체감했습니다. PC·태블릿·모바일 전 디바이스에서 일관된 사용자 경험을 제공하는 것에 집중했습니다.
Unified Card System
Beauty·Fashion·Must Read 등 전 섹션에 공통 카드 컴포넌트를 적용했습니다. 이미지 호버 줌, 카테고리 레이블, 제목·날짜·작성자 구조를 하나의 시스템으로 통일하여 일관된 읽기 경험을 구현했습니다.
키스오브라이프의 쥴리와 나탈이 표현한 '본질적' 아름다움
사이트를 분석하고,
구조 그대로 코드로 재현했습니다.
산리오 공식 사이트를 기반으로 전체 레이아웃을 따라 만들고, 일부 구조와 UI 요소를 프로젝트 목적에 맞게 변형하여 구현했습니다. PC·태블릿·모바일 반응형 제작과 함께, 기존 사이트 분석을 통해 레이아웃 구조를 파악하고 이를 직접 코드로 재현하는 과정에서 구조적 사고를 키울 수 있었습니다.
Responsive Layout
PC · Tablet · Mobile데스크탑·태블릿·모바일 전 디바이스를 아우르는 반응형 그리드 제작
Data-driven Rendering
JSON + JavaScript캐릭터·컴퍼니·리쿠르트 데이터를 JSON으로 관리하고 JS로 동적 렌더링
Layout Reproduction
Structure Analysis기존 사이트 구조를 분석하고 직접 코드로 재현하며 퍼블리싱 역량 강화
헬로키티
HELLO KITTY
마이멜로디
MY MELODY
쿠로미
KUROMI
폼폼푸린
POMPOMPURIN
시나모롤
CINNAMOROLL
리틀트윈스타
LittleTwinStars
포차코
POCHACCO
케로케로케로피
KEROKEROKEROPPI
구데타마
GUDETAMA
배드바츠마루
BAD BADTZ-MARU
턱시도샘
TUXEDOSAM
코기뮹
Cogimyun
딩구리데이즈
Marumofubiyori
숲의요정 페어리루
RILU RILU FAIRILU
헬로키티
HELLO KITTY
마이멜로디
MY MELODY
쿠로미
KUROMI
폼폼푸린
POMPOMPURIN
시나모롤
CINNAMOROLL
리틀트윈스타
LittleTwinStars
포차코
POCHACCO
Various Characters
산리오의 대표 캐릭터 16종을 JSON 데이터로 관리하고 JavaScript로 동적 렌더링했습니다. 각 캐릭터는 호버 시 이미지가 전환되며, 반응형 그리드로 PC·태블릿·모바일 환경에서 자연스럽게 배치됩니다.
헬로키티
HELLO KITTY
헬로키티
HELLO KITTY
