"분위기"를 코드로 번역하기 — UI/UX 설계에서 AI의 역할

 

효율적인 앱과 몰입하는 앱은 다르다

"사용하기 편한 앱"을 만드는 것과 "들어가면 빠져드는 앱"을 만드는 것은 완전히 다른 문제다. 타로 앱을 만들면서 가장 먼저 부딪힌 질문이 바로 이것이었다. 일반적인 SaaS나 쇼핑몰이라면 버튼 색상, 여백, 폰트 크기 같은 표준적인 UI 가이드라인을 따르면 된다.

하지만 타로 앱은 처음부터 다른 접근이 필요했다. 사용자가 카드를 뒤집는 순간, 그 결과에 진지하게 집중하려면 화면 자체가 하나의 "공간"이 되어야 한다. 마치 어두운 방에서 촛불 하나를 켜고 카드를 펼치는 것처럼. 이 분위기를 코드로 어떻게 만들 수 있을까.

문제는 "분위기"라는 단어가 너무 추상적이라는 점이었다. "신비로운 느낌", "밤하늘 같은 깊이감", "고급스러우면서도 접근하기 쉬운". 이런 요구사항은 디자이너에게 전달해도 해석이 갈리는데, 과연 AI에게 전달하면 어떤 결과가 나올까.

추상적인 감각을 구체적 코드로 변환하기

AI에게 처음 던진 질문은 단순했다. "타로 카드 리딩 앱에 어울리는 색상 팔레트를 추천해줘." 돌아온 답변은 예상대로 일반적이었다. 보라색, 검은색, 금색 같은 뻔한 조합이었다. 이건 누구나 떠올릴 수 있는 수준이다.

접근 방식을 바꿨다. "밤하늘을 올려다볼 때 느껴지는 깊이감을 배경색으로 표현하고 싶다. 순수한 검은색은 너무 평면적이고, 남색 계열이 좋겠다. 별빛처럼 작은 포인트가 있으면서도 텍스트 가독성이 유지되어야 한다." 이렇게 구체적인 감각을 설명하자 결과가 달라졌다.

AI가 제안한 팔레트 중에서 남색 배경 #0a0a1a가 눈에 들어왔다. 순수 검정(#000000)보다 미세하게 푸른 기운이 도는 이 색은 화면에서 놀라운 차이를 만들어냈다. 검정 배경은 화면이 꺼진 느낌을 주지만, 이 남색은 "깊은 밤하늘"이라는 인상을 준다. 미세한 차이지만 사용자가 느끼는 공간감은 완전히 달라진다.

골드, 퍼플, 아이보리 — 세 가지 색이 만드는 조화

배경색을 정한 후에는 강조색이 필요했다. 타로 카드의 전통적 이미지에서 금색은 빠질 수 없다. 하지만 순금색(#FFD700)은 디지털 화면에서 너무 밝고 촌스러워 보일 수 있다. 여러 톤을 시험한 끝에 #d4a853으로 정했다. 약간 어둡고 따뜻한 골드로, 남색 배경 위에서 "오래된 금장식" 같은 느낌을 준다.

보조색으로는 퍼플 #7b5ea7을 선택했다. 골드가 "귀함"을 표현한다면, 퍼플은 "신비"를 담당한다. 버튼 호버 상태나 선택된 카드의 글로우 효과에 이 색을 사용하면 화면에 은은한 마법적 분위기가 더해진다. 두 색이 남색 배경 위에서 만나면 서로를 방해하지 않으면서도 화면을 풍성하게 채운다.

텍스트 색상이 가장 고민이었다. 순백(#FFFFFF)은 남색 배경에서 너무 날카로워 보였다. 오래 보면 눈이 피로하다. 아이보리 #e8e0d4는 이 문제를 해결했다. 따뜻한 톤이 가미된 밝은 색은 배경의 남색과 자연스럽게 어우러지면서도 충분한 대비를 제공한다. 양피지 위의 글씨 같은 느낌이 타로의 분위기와도 맞았다.

폰트 선택의 의외로 큰 영향력

색상만큼이나 폰트 선택이 분위기에 미치는 영향은 크다. 이 부분에서 AI와의 대화가 특히 유용했다. "타로 카드 앱에 어울리면서 웹 폰트로 쉽게 쓸 수 있는 세리프 폰트"를 요청했을 때 여러 후보가 나왔고, 그중 Cinzel이 눈에 띄었다.

Cinzel은 로마 시대 비문에서 영감을 받은 서체다. 대문자가 특히 아름답고, "THE FOOL"이나 "CELTIC CROSS" 같은 타로 관련 영문 제목에 사용하면 그 자체로 분위기가 완성된다. 구글 폰트에서 무료로 사용할 수 있다는 점도 큰 장점이었다.

한글 본문에는 Noto Sans KR을 선택했다. 화려한 디스플레이 서체보다 깔끔한 고딕 계열이 긴 해석 텍스트의 가독성에 유리하다. Noto Sans KR은 다양한 굵기를 지원하면서도 깔끔해서, Cinzel의 고전적 느낌과 어울리면서도 본문 읽기에 불편함이 없다. 제목은 고전적이고, 본문은 현대적인 이 조합이 "전통적이지만 접근하기 쉬운 타로 앱"이라는 콘셉트와 딱 맞았다.

AI에게 "느낌"을 전달하는 기술

이 과정에서 얻은 가장 큰 교훈은 AI에게 디자인 요청을 하는 방법이었다. "예쁘게 해줘"라고 하면 일반적인 결과가 나온다. "밤하늘 아래 오래된 나무 테이블 위에서 촛불 빛으로 카드를 읽는 장면"이라고 설명하면 완전히 다른 수준의 제안이 돌아온다.

핵심은 감각적 묘사를 곁들이되, 기술적 제약도 함께 알려주는 것이다. "남색 배경 위에 골드 텍스트가 WCAG AA 접근성 기준을 충족하는지 확인해줘" 같은 요청은 미적 감각과 기술적 정확성을 동시에 얻을 수 있게 해준다. AI는 색상 대비 비율을 계산하고, 기준에 미달하면 대안을 제시해준다.

또 하나의 팁은 레퍼런스를 구체적으로 제시하는 것이다. "해리 포터 영화의 마법 장면 같은 느낌"보다 "밤 9시 서울 청계천 위의 조명처럼 어둡지만 따뜻한 느낌"이 더 구체적인 결과를 만든다. AI가 문화적 맥락을 이해하는 데 도움이 되기 때문이다.

색상 하나가 앱의 성격을 결정한다

색상 팔레트를 정하고 나서 실제로 적용해보면 예상치 못한 문제가 나타난다. 남색 배경 위의 골드가 아름다워 보였지만, 작은 텍스트에서는 가독성이 떨어졌다. 결국 골드는 제목과 강조 요소에만 사용하고, 본문은 아이보리로 통일했다. 이런 세부 조정은 실제 화면에서 테스트하지 않으면 알 수 없다.

AI가 제안하는 색상 조합을 그대로 쓰는 것이 아니라, 실제 화면에서 다양한 조건으로 확인하는 과정이 필수적이었다. 모바일에서, 밝은 환경에서, 어두운 환경에서 각각 어떻게 보이는지. 특히 타로 앱은 어두운 환경에서 사용될 가능성이 높기 때문에 OLED 디스플레이에서의 색감도 고려해야 했다.

결국 색상 팔레트 4개와 폰트 2개. 이것만으로 일반 웹앱과 완전히 다른 공간이 만들어졌다. 복잡한 그래픽 에셋 없이도 색상과 타이포그래피만으로 "분위기"를 만들 수 있다는 것이 이번 작업의 핵심 교훈이다. 그리고 이 과정에서 AI는 감각적 언어를 기술적 코드로 번역하는 통역사 역할을 훌륭히 해냈다.

다음 편 예고

색상과 폰트로 기본 분위기는 잡았다. 하지만 진짜 마법은 움직임에서 시작된다. 다음 편에서는 CSS만으로 별이 흐르는 배경과 3D 카드 뒤집기 애니메이션을 구현한 과정을 이야기한다. 라이브러리 하나 없이 순수 CSS와 약간의 Framer Motion으로 어디까지 가능한지, 그 한계와 가능성을 함께 살펴보자.