더 차분한 Reverie를 디자인하다: 채팅에서 제품 전체로

지난 며칠 사이에 대화를 열어 보셨다면, 무언가 조금 달라졌다고 느끼셨을지도 모릅니다.

채팅 화면이 조금 더 차분해졌습니다. 메시지는 읽기 쉬워졌고, 조작 요소는 가벼워졌으며, 패널과 대화상자가 대화 자체와 주목도를 두고 경쟁하는 일도 줄었습니다. 익숙한 기능의 위치는 그대로지만, 캐릭터를 둘러싼 공간은 한층 편안해졌습니다.

채팅에서 시작한 이유는 많은 분이 Reverie에서 가장 오래 머무는 곳이기 때문입니다. 또한 이번 재설계의 핵심 질문을 검증하기에 가장 좋은 곳이기도 했습니다. 강렬한 첫인상만 만드는 것이 아니라, 대화 전체를 함께하는 동안 계속 편안하려면 인터페이스는 어떤 모습이어야 할까?

채팅에서 보신 변화는 하나의 화면만 새로 꾸민 결과가 아닙니다. 새로운 디자인 시스템이 처음 드러난 부분이었고, 이제 그 시스템은 탐색과 캐릭터 페이지부터 제작 도구, 스토리, 결제, 보상, 설정, 그리고 그 사이의 작은 도구 화면까지 제품 전체에 적용되었습니다.

Reverie는 언제나 표현력이 풍부한 제품이었습니다.

강한 테두리, 눈에 띄는 그림자, 겹겹이 쌓인 카드, 다채로운 컨트롤, 화면 위의 사각형이 아니라 물건처럼 느껴지는 UI 곳곳에 그 개성이 담겨 있었습니다. 덕분에 제품은 따뜻했고, 한눈에 Reverie임을 알아볼 수 있었습니다.

하지만 제품의 한 단계에 잘 맞았던 시각 언어도 다음 단계에서는 지나치게 무거워질 수 있습니다.

Reverie가 성장하면서 인터페이스는 발견 그 이상의 일을 지원해야 했습니다. 사람들은 대화에 오래 머물고, 캐릭터를 관리하고, 스토리를 쓰고, 요금제를 비교하고, 고급 도구를 설정하며, 점점 복잡해지는 흐름 사이를 이동합니다. 랜딩 페이지에 개성을 주던 장식도 모든 대화상자, 카드, 메뉴, 버튼에서 반복되면 시각적 소음이 될 수 있습니다.

이번 재설계는 Reverie의 개성을 줄이기 위한 것이 아닙니다. 그 개성이 장식이 아니라 경험 자체에서 나오도록 하기 위한 작업입니다.

더 가볍게, 그러나 더 차갑지 않게

“가벼운 디자인”은 자칫 순백색 배경, 가느다란 회색 글자, 존재감이 너무 약해 미완성처럼 보이는 컴포넌트를 뜻하게 됩니다. 그것은 우리의 목표가 아니었습니다.

새 시스템은 더 차분하지만 여전히 따뜻합니다.

눈부신 흰색 대신 은은한 색조가 섞인 중성적인 면을 사용했습니다. 오래 읽어야 하는 글자는 더 짙고 조금 더 단단해졌습니다. 테두리는 절제하고, 그림자는 얕게 만들며, 색은 의미가 필요한 곳에 더 의도적으로 사용합니다. 시각적 무게를 덜어내면서도 Reverie가 이야기와 관계를 위한 공간이라는 감각은 유지했습니다.

이 균형은 롤플레잉에서 특히 중요합니다. 대화는 설정 대시보드가 아닙니다. 사용자는 긴 메시지를 읽고, 말투의 미묘한 변화를 느끼며, 같은 화면에 오래 머뭅니다. 글자와 배경은 스크린샷에서만 깔끔해 보여서는 안 됩니다. 20분 동안 읽은 뒤에도 편안해야 합니다.

긴 읽기를 견디는 타이포그래피

이번 변화에서 가장 중요하면서도 가장 극적이지 않은 부분은 글자 위계를 강화한 것입니다.

큰 제목의 표현력은 유지하되, 본문에는 더 안정적인 시각적 무게를 부여했습니다. 중요한 레이블, 내비게이션, 동작에는 빠르게 훑어보기 쉬운 굵기를 사용했습니다. 보조 텍스트는 여전히 뒤로 물러나지만, 읽는 일이 부담스러울 정도로 흐리지 않습니다.

원칙은 간단합니다.

긴 글은 차분하고 단단하게 읽혀야 합니다.
모든 문구를 읽기 전에 동작의 성격을 알아볼 수 있어야 합니다.
보조 정보는 물러나되 사라져서는 안 됩니다.
서로 다른 화면, 테마, 주변 조명에서도 읽기 쉬워야 합니다.

좋은 타이포그래피는 주목을 요구하지 않습니다. 주의를 오래 유지하기 쉽게 해 줍니다.

제품 전체가 하나의 컴포넌트 언어로

이번 작업은 페이지마다 새 스킨을 씌운 것이 아닙니다. 제품 아래에서 작동하는 공용 컴포넌트 언어를 다시 구축했습니다.

버튼, 카드, 대화상자, 메뉴, 탭, 폼 컨트롤, 표, 툴팁, 토스트, 드로어, 팝오버, 내비게이션 요소가 이제 다음 항목에서 같은 규칙을 따릅니다.

모서리 반경
테두리 대비
표면 색상
높이감과 그림자
포커스 표시
호버 및 눌림 상태
글자 굵기
간격
의미를 가진 색상

이 일관성은 어떤 하나의 시각적 선택보다 중요합니다. 같은 종류의 동작이 어디서나 같은 모습과 행동을 보이면, 사용자는 인터페이스를 해석하는 데 에너지를 덜 씁니다. 위험한 동작은 위험하게 느껴지고, 선택한 옵션은 선택된 것으로 보이며, 떠 있는 표면은 아래 페이지와 구분됩니다. 모든 버튼이 주인공이 되려고 경쟁하지 않아도 주요 동작을 쉽게 찾을 수 있습니다.

강조와 성공 같은 상태를 위한 더 명확한 의미별 변형도 추가했습니다. 이제 개별 기능이 그라데이션이나 색상을 따로 만드는 대신 공용 시스템 안에서 사용할 수 있습니다.

어려운 부분은 예외를 찾는 일이었습니다

버튼 컴포넌트를 바꾼다고 해서 모든 버튼이 자동으로 바뀌지는 않습니다.

제품에는 시간이 지나며 지역적인 결정이 쌓입니다. 독자적인 테두리를 가진 가격 카드, 특별한 빛 효과가 있는 보상 대화상자, 전용 배경을 사용하는 공유 창, 숨겨진 곳에서 자체 그라데이션을 쓰는 동작, 호버 동작을 처음부터 다시 만든 기능 카드 같은 것들입니다.

이런 예외가 남아 있으면 재설계가 끝난 뒤에도 어딘가 일관되지 않게 느껴집니다.

그래서 점검을 컴포넌트 라이브러리에서 멈추지 않았습니다. 마케팅 화면, 결제 흐름, 보상, 업적, 캐릭터와 스토리 카드, 공유 대화상자, 내비게이션, 빈 상태, 배너, 자주 방문하지 않는 도구 화면까지 살폈습니다. 조정할 가치가 있는 맞춤형 UI를 공용 언어 안으로 다시 가져왔습니다.

모든 예외를 없앤 것은 아닙니다. 축하, 긴급함, 희귀도, 상태를 전달하려면 더 강한 개성이 필요한 화면도 있습니다. 달라진 점은 그런 순간이 시스템을 무시하지 않고 시스템을 확장한다는 것입니다.

장식은 줄이고, 상호작용은 더 명확하게

상호작용처럼 보이지만 유용한 정보를 더하지 않던 효과를 많이 제거했습니다.

모든 카드에 무거운 그림자가 붙지 않습니다. 호버 움직임은 더 절제되었습니다. 그라데이션은 강조이 필요한 순간에만 사용합니다. 테두리는 모든 내용을 또 하나의 상자에 가두기보다 구조를 설명합니다.

대신 실제 상호작용 상태는 더 선명해졌습니다.

선택된 옵션은 시각적으로도, 의미상으로도 상태를 드러냅니다.
키보드 포커스를 더 쉽게 따라갈 수 있습니다.
상호작용 가능한 카드는 일관된 호버와 포커스 처리를 받습니다.
버튼은 공용 변형을 통해 위계를 전달합니다.
대화상자와 메뉴는 배경과 구분되지만 제품에서 떨어져 나온 것처럼 보이지 않습니다.

장식을 덜어내자 피드백을 개선할 공간이 생겼습니다. 인터페이스는 덜 움직이지만 더 많은 것을 말합니다.

접근성도 시각 시스템의 일부입니다

마우스로 볼 때의 모습만 설명하는 디자인 시스템은 완전하지 않습니다.

이번 리팩터링에서는 포커스 링, 키보드 동작, 선택 상태의 의미, 대비, 상호작용 카드의 행동을 다시 살폈습니다. 일부 컨트롤은 눌림 또는 선택 상태를 보조 기술에 더 명확히 전달합니다. 링크처럼 동작하는 스토리 항목은 키보드로 포커스하고 실행할 수 있습니다. 공용 컨트롤의 포커스 처리도 하나의 시각 논리를 따릅니다.

이 변화들은 의도적으로 미묘합니다. 접근성은 제품 위에 따로 얹는 모드가 아니라 기본 동작에 처음부터 포함되어야 합니다.

다음을 위한 더 나은 기반

이번 작업의 가장 큰 성과는 특정 색상, 반경, 그림자가 아닙니다. 같은 디자인 질문에 대해 제품 안에 경쟁하는 답이 줄었다는 점입니다.

새 기능을 만들 때 대화상자가 어떤 느낌이어야 하는지, 입력창이 어떻게 반응해야 하는지, 선택된 카드가 어떻게 보여야 하는지 매번 처음부터 정할 필요가 없습니다. 시스템이 이미 답을 제공합니다. 새로운 작업이 빨라질 뿐 아니라, 결과 경험도 더 예측 가능해집니다.

일관성은 모든 화면을 똑같이 만드는 일이 아닙니다. 콘텐츠가 달라져도 인터페이스가 낯설어지지 않도록 안정적인 기대를 제공하는 일입니다.

여러분이 느끼길 바라는 것

이상적으로는 처음에 큰 변화를 알아채지 못할 수도 있습니다.

Reverie가 그저 더 읽기 쉽고, 더 차분하게 이동할 수 있으며, 탐색에서 대화와 제작, 계정 도구로 넘어갈 때 더 일관되게 느껴지면 좋겠습니다. 중요한 동작은 더 빨리 눈에 들어오고, 보조 컨트롤은 주의를 덜 빼앗으며, 긴 세션도 시각적으로 덜 피곤해야 합니다.

캐릭터는 여전히 풍부하게 표현됩니다. 이야기는 여전히 분위기를 품습니다. 축하받아야 할 순간은 계속 선명할 수 있습니다.

인터페이스가 언제 말해야 하고, 언제 조용해져야 다른 중요한 것이 드러나는지를 조금 더 잘 알게 되었을 뿐입니다.

새 디자인 시스템은 이제 Reverie 경험 전반에 적용되어 있습니다. 특히 좋아진 곳이나 아직 어울리지 않는 곳이 있다면 Discord 커뮤니티에서 알려 주세요.