글로벌 타로 · AI 서비스 · android / IOS
AI 타로 디자인 시스템
영문권 사용자를 대상으로 한 AI 타로 서비스의 모바일 앱 런칭을 목표로 진행된 서비스로서 AI 캐릭터 기반의 그래픽 요소와 몰입형 인터페이스가 중요한 비중을 차지하고 있었습니다. 캐릭터와 조화로운 비주얼을 중점으로 컴포넌트 설계와 구조화에 진행한 프로젝트입니다.
역할 및 작업기간
2024.1 ~ 2024.12
디자인 시스템 (100%)
디자인 컴포넌트(100%)
목표
캐릭터 중심 디자인 시스템과 컴포넌트 제작
다양한 디바이스 화면 위한 확장 가능한 컴포넌트 구축
배경
서비스의 캐릭터 비율의 균형과 화면의 몰입감을 유지할 수 있도록 구성하기 위해 화면 높이를 100vh으로 고정하여 다양한 디바이스 환경에서도 일관된 비율로 제작되었습니다. 좌우 폭 역시 최대 너비를 제한하여 서비스의 요소들이 과도하게 확장되지 않도록 설계했습니다.
전체 화면 높이를 100vh로 설정한 만큼, UI 컴포넌트의 정확한 위치와 정렬 기준이 중요했습니다. 각 컴포넌트의 고정 위치와 인터랙션 기준값을 명확히 정리하여, 디자인과 개발 간의 오차 없이 일관된 화면 구현이 가능하도록 설계했습니다.
제작
몰입도를 높여주는 컴포넌트
캐릭터가 중심이 되는 서비스 특성상, 기존의 시스템형 UI와는 달리 시각적 개성과 몰입감을 강조한 디자인이 필요했습니다. 이에 따라 UI가 기기별 화면 비율에 따라 왜곡되지 않도록 가로 화면의 가변성을 고려하고, 주요 그래픽 요소는 지정된 최대 영역 내에서만 유지되도록 제한하여 일관성을 유지했습니다.
개성 있는 컴포넌트의 확장성과 활용도를 높이기 위해, 장식 요소와 콘텐츠 영역 등 가변되는 요소들을 분리하여 구성하고, 피그마의 오토 레이아웃 기능을 적극 활용했습니다. 이를 통해 다양한 화면에서도 디자인이 유연하게 반응하면서도 형태는 유지될 수 있도록 제작했으며, 결과적으로 개발 단계에서도 별도의 수정 없이 디자인 그대로 활용 가능한 컴포넌트를 제작했습니다.
또한, 인터랙션 요소가 많은 서비스 특성상 디자인 의도를 보다 명확히 전달하고 개발과의 간극을 줄이기 위해, 주요 컴포넌트와 UI 상태을 Framer를 활용해 프로토타입으로 제작했습니다. 이를 통해 다양한 상태에 따라 컴포넌트가 어떻게 반응하는지를 시각적으로 설명할 수 있었으며, 개발팀에서도 실제 구현 시 레퍼런스로 참고하여 높은 정확도로 작업을 반영할 수 있었습니다.
[해당 링크를 통해 직접 확인하실 수 있습니다.]
해당 프로젝트는 네이티브 앱(Flutter 기반)으로 서비스를 제작했으며, 체계적이고 일관되게 관리하기 위해 디자인 시스템의 토큰화를 적용했습니다. Figma에서 정의한 색상, 타이포그래피 등의 스타일 토큰을 Flutter 코드로 자동 변환하는 프로세스를 구축했고, 이를 통해 빠르고 정확하게 개발에 반영할 수 있었습니다. 이 프로세스를 통해 디자인 토큰을 개발에 빠르게 공유하고 일관성을 유지했습니다.
결과
이번 프로젝트는 캐릭터 중심의 비주얼 디자인과 몰입도를 우선으로 고려해야 했던 만큼, 기존의 시스템적인 UI 접근 방식과는 다른 시각으로 디자인을 구성해야 했습니다. 인터랙션을 고려한 컴포넌트 설계, 그리고 Figma 기능(Auto Layout..)을 적극 활용함으로써 그래픽 중심의 UI에서도 일관성과 확장성을 유지할 수 있었습니다.
또한, 디자인 토큰의 Flutter 코드 자동 변환 프로세스를 직접 구축하고 개발팀과 협업하며, 실질적인 생산성 향상과 커뮤니케이션 효율화를 경험할 수 있었던 점은 디자이너로서의 기술적 역량을 한층 더 성장시키는 계기가 되었습니다.
