오행 색상이 UI를 만든다 — 동양 미학과 모던 디자인

 

색상이 먼저였다

사주 앱의 UI를 설계할 때 가장 먼저 결정한 것은 레이아웃이 아니라 색상이었다. 정확히 말하면 색상 시스템이었다.

오행(五行)에는 각각 고유한 색이 있다. 木은 녹색, 火는 적색, 土는 황색, 金은 은색(또는 백색), 水는 청색(또는 흑색). 이 다섯 색상이 사주명리의 모든 요소에 연결된다. 천간 갑(甲)은 목(木)이니 녹색, 지지 오(午)는 화(火)니 적색. 이 색상 체계가 수천 년간 이어져 온 것이다.

이것을 앱의 디자인 시스템으로 그대로 가져왔다. 타로 앱에서 카드의 메이저/마이너 구분이 색상으로 표현되었듯이, 사주 앱에서는 오행이 색상으로 표현된다. 다만 차이가 있다. 타로의 색상은 "분류"를 위한 것이었고, 사주의 색상은 "의미"를 담고 있다.

다섯 색상의 구체적 설계

원색 그대로 쓰면 눈이 아프다. 빨강, 초록, 노랑이 한 화면에 뒤섞이면 축제 현수막이 된다. 사주 앱에 어울리는 것은 절제된 동양적 색감이다.

각 오행의 색상을 모던한 앱에 맞게 조정했다. 木의 녹색은 에메랄드 계열로, 자연의 생동감을 살리되 눈에 편안하게. 火의 적색은 코랄에 가깝게, 강렬하지만 공격적이지 않게. 土의 황색은 따뜻한 엠버(amber) 톤으로, 흙의 안정감을 표현. 金의 은색은 쿨 그레이에 미세한 금속 광택을 더해, 차분한 기품을 표현. 水의 청색은 인디고에 가까운 깊은 파랑으로, 물의 깊이와 지혜를 연상.

이 다섯 색상에 대해 각각 메인 컬러, 배경용 연한 버전, 텍스트용 진한 버전, 보더용 중간 버전을 정의했다. 하나의 오행 색상이 네 가지 변형을 가지는 셈이다. 이 색상 시스템이 정의되자, 이후의 모든 UI 컴포넌트는 이 시스템 위에서 자연스럽게 만들어졌다.

명식표(命式表): 사주의 얼굴

명식표는 사주 앱에서 가장 중요한 시각적 요소다. 네 개의 기둥(연주, 월주, 일주, 시주)이 나란히 서 있고, 각 기둥에 천간(天干), 지지(地支), 지장간(地藏干), 십신(十神)이 층층이 쌓여 있는 구조다.

이 명식표를 어떻게 시각화할 것인가. 전통적인 방식은 표(table) 형태다. 가로 4열(네 기둥), 세로 4행(천간, 지지, 지장간, 십신)의 격자. 기능적으로는 충분하지만, "앱"이라는 매체에서는 밋밋하다.

우리가 택한 방식은 카드형 레이아웃이다. 각 기둥이 하나의 카드처럼 독립된 영역을 가진다. 카드 상단에 천간, 중앙에 지지(가장 큰 글씨), 하단에 지장간과 십신. 그리고 핵심은 각 한자의 오행에 따라 색상이 입혀진다는 것이다.

갑(甲)은 목(木)이니 녹색 배경, 오(午)는 화(火)니 적색 배경. 사용자가 명식표를 보는 순간, 색상의 분포만으로도 "이 사주는 녹색(木)과 적색(火)이 많구나"라는 직관적 인상을 받는다. 숫자나 텍스트를 읽지 않아도 오행의 균형이 시각적으로 전달되는 것이다.

일주(日柱)는 다른 기둥보다 약간 강조했다. 테두리를 두껍게 하거나 미세한 그림자를 더해서 "이것이 당신의 일간, 사주의 중심"임을 시각적으로 알려준다. 사주를 처음 접하는 사용자도 "가운데 강조된 기둥이 나를 대표하는구나"라고 자연스럽게 인식할 수 있다.

글래스모피즘과 한지 질감

전체 앱의 배경과 분위기를 결정하는 것은 개별 컴포넌트가 아니라 "공간감"이다.

타로 앱에서는 별이 흐르는 밤하늘 배경을 썼다. 신비로운 분위기가 타로의 정체성과 맞았다. 사주에서 같은 접근을 쓰면 "점술 앱" 느낌이 강해진다. 사주명리는 동양 철학에 뿌리를 둔 체계적 학문이라는 정체성이 있다. 시각적 톤도 이에 맞춰야 한다.

배경에는 CSS gradient와 noise 패턴을 조합해서 한지(韓紙) 질감을 만들었다. 은은한 베이지-크림 톤 위에 미세한 노이즈가 깔리면, 마치 전통 한지 위에 글을 쓰는 듯한 느낌이 난다. 이 배경은 오행 색상과 충돌하지 않으면서도, "동양적이지만 현대적인" 공간감을 만든다.

컴포넌트에는 글래스모피즘(glassmorphism) 스타일을 적용했다. 반투명 배경에 블러 효과를 더한 것이다. 명식표 카드, 해석 패널, 오행 차트가 한지 질감의 배경 위에 유리처럼 떠 있는 느낌. 글래스모피즘은 모던한 UI 트렌드이지만, 한지 배경과 결합하면 "전통 위의 현대"라는 독특한 시각적 레이어가 만들어진다.

마이크로 인터랙션은 의도적으로 절제했다. 타로 앱에서는 카드가 뒤집히는 애니메이션이 핵심 경험이었다. 사주 앱에서는 화려한 애니메이션보다 "정보의 정확한 전달"이 우선이다. 명식표가 나타날 때의 페이드인, 오행 차트의 부드러운 전환 정도만 적용했다. 사주를 보러 온 사용자는 결과를 빨리 보고 싶어 하지, 애니메이션을 감상하러 온 것이 아니다.

즉시 표시 전략: 두 단계 렌더링

UI에서 가장 고민한 부분은 "언제 무엇을 보여줄 것인가"였다.

사용자가 생년월일시와 성별을 입력하고 "분석하기" 버튼을 누르면, 두 가지 일이 동시에 시작된다. 룰 엔진이 사주 기둥을 세우고 분석을 수행하는 것(즉시)과, AI가 종합 해석을 생성하는 것(수 초 소요)이다.

핵심 전략은 "룰 엔진 결과를 먼저 보여주는 것"이다.

첫 번째 단계에서는 룰 엔진의 결과가 거의 즉시 화면에 표시된다. 명식표(네 기둥의 천간, 지지, 지장간, 십신), 오행 비율 차트, 용신, 주요 합충형파해. 이 정보만으로도 사주를 아는 사람에게는 상당한 가치가 있다. 그리고 사주를 모르는 사람도 오행 색상이 칠해진 명식표를 보면서 "내 사주가 이렇게 생겼구나"라는 첫인상을 갖게 된다.

두 번째 단계에서는 AI 해석이 스트리밍으로 나타난다. 명식표 아래에 해석 영역이 있고, 텍스트가 한 글자씩 타이핑되듯이 표시된다. 사용자는 명식표를 살펴보는 사이에 자연스럽게 해석이 채워지는 것을 경험한다.

이 두 단계 렌더링의 효과는 극적이다. "분석 중..."이라는 로딩 화면을 3~5초 동안 바라보는 것과, 즉시 명식표를 보면서 해석이 흘러나오는 것을 지켜보는 것은 완전히 다른 경험이다. 기술적으로는 같은 시간이 걸리지만, 체감 대기 시간은 거의 제로에 가깝다.

AI가 UI에서 잘한 것

사주 앱의 UI를 AI와 함께 만들면서, AI가 특히 잘한 영역과 사람의 조정이 필요했던 영역이 명확하게 갈렸다.

AI가 탁월했던 것은 오행 색상 시스템의 일관된 적용이었다. 색상 상수를 먼저 정의하고 "이 색상 시스템을 사용해서 명식표 컴포넌트를 만들어줘"라고 요청하면, 모든 요소에 일관된 색상이 적용된다. 천간의 색상, 지지의 색상, 십신 라벨의 색상, 오행 차트의 색상이 하나의 시스템 아래에서 통일된다.

컴포넌트 구조의 설계에서도 AI는 효율적이었다. "명식표는 PillarCard 4개로 구성하고, 각 PillarCard는 HeavenlyStem, EarthlyBranch, HiddenStems, TenGods 서브컴포넌트로 분리해줘"라고 하면, 재사용 가능한 깔끔한 구조가 나온다.

반응형 레이아웃도 AI가 잘 처리했다. 데스크톱에서는 네 기둥이 가로로 나란히, 모바일에서는 세로로 쌓이거나 2x2 그리드로 전환되는 것을 지시하면 정확하게 구현했다.

사람이 조정한 것

반면 AI가 생성한 초기 UI는 "기능적으로 완전하지만 감각적으로는 조정이 필요한" 상태였다.

첫째, 여백이 부족했다. AI는 정보를 빽빽하게 채우는 경향이 있다. 명식표와 해석 영역 사이, 각 기둥 카드 사이, 섹션과 섹션 사이의 여백을 넉넉하게 늘려야 했다. 동양적 미학에서 여백은 "비어 있는 것"이 아니라 "숨 쉬는 공간"이다.

둘째, 글꼴 크기의 위계가 평탄했다. AI는 모든 텍스트를 비슷한 크기로 생성하는 경향이 있다. 명식표에서 천간과 지지는 크게, 지장간과 십신은 작게. 해석에서 제목은 크게, 본문은 적당히, 부연 설명은 작게. 이 위계를 수동으로 조정해야 시각적 흐름이 생긴다.

셋째, 색상 대비의 미세 조정이 필요했다. AI가 적용한 오행 색상은 시스템에 충실했지만, 실제로 화면에서 보면 특정 색상 조합이 눈에 거슬리는 경우가 있었다. 특히 토(土)의 황색 배경 위에 흰색 텍스트는 대비가 부족했고, 수(水)의 진한 청색 배경 위에서는 텍스트 가독성이 떨어졌다. 이런 미세 조정은 실제 화면을 보면서 사람의 눈으로 판단해야 한다.

넷째, 감성적 톤의 통일이었다. AI가 만든 각 컴포넌트는 개별적으로는 괜찮지만, 전체를 놓고 보면 "하나의 앱"이라는 통일감이 약할 수 있다. 그림자의 강도, 모서리의 둥글기, 호버 효과의 미세함을 전체적으로 통일하는 작업은 사람이 전체 화면을 눈으로 훑으며 조정했다.

"보여주기"의 철학

사주 앱의 UI를 설계하면서 깨달은 것이 있다. 전통 동양 문화 도메인의 앱에서는 "무엇을 보여주는가"만큼 "어떤 분위기로 보여주는가"가 중요하다는 것이다.

같은 분석 결과라도 엑셀 표처럼 보여주면 "데이터 분석 도구" 느낌이 나고, 오행 색상과 한지 질감으로 감싸면 "동양 철학의 지혜를 현대적으로 풀어낸 앱" 느낌이 난다. 기능은 같지만 사용자가 받는 인상과 신뢰도가 완전히 다르다.

오행 색상 시스템은 단순한 장식이 아니다. 그것은 수천 년간 동양 문화에서 쌓여온 의미 체계를 시각적 언어로 번역한 것이다. 이 번역이 성공하면, 사용자는 앱을 쓰면서 자연스럽게 "녹색은 목, 적색은 화"를 학습하게 된다. 디자인이 곧 교육이 되는 것이다.

다음 편 예고

앱의 내부(분석 엔진, AI 해석, UI)가 완성되었다. 하지만 아무리 좋은 앱이라도 사용자가 찾아오지 않으면 의미가 없다. 다음 편에서는 사주 도메인에서의 SEO 전략, SPA의 검색 최적화 한계를 극복하는 방법, 그리고 AI로 대량의 SEO 콘텐츠를 생산하는 과정을 다룬다.