커밋 메시지는 분명합니다: "현대 다크 테마와 Glassmorphism으로 UI 개선." 그것이 말하지 않는 것은 이것이 3번째 완전한 UI 개선이었다는 것, 초기 사용자 피드백이 정중하지만 명백하게 앱이 완성되지 않은 것처럼 보인다고 말했기 때문이었다는 것, 그리고 우리가 이퀄라이저 애니메이션에 대해 논의한 것보다 더 많은 시간을 합리적인 엔지니어들이 보낼 수 없다는 것입니다.
이것은 VORA의 시각 디자인이 기능적이지만 못생긴 데이터 대시보드에서 사용자들이 실제로 칭찬하는 무언가로 진화한 방법에 대한 이야기 — 그리고 그 과정의 특정한 기술 및 디자인 결정들입니다.
버전 1: Bootstrap 시대 대시보드
첫 번째 UI는 하나의 목표로 만들어졌습니다: 기능 요소를 빠르게 화면에 놓습니다. 녹음 버튼, 트랜스크립트 영역, 통계 패널, 설정. 작동했습니다. 매우 못생겼습니다. 색 구성은 기본 Bootstrap 파란색과 흰색이었습니다. 레이아웃은 패딩이 정확하지 않은 단일 열 flex 컨테이너였습니다. 텍스트 크기가 일관성이 없었습니다. 녹음 상태를 유휴 상태와 구별하는 시각적 계층이 없었습니다.
모델을 훈련하는 방법은 알지만 Figma를 열어본 적이 없는 엔지니어가 만든 다른 모든 "AI 도구" 데모처럼 느껴졌습니다. 기능적입니다. 기쁨이 없습니다.
우리가 외부에서 받은 첫 번째 피드백은: "완성된 거야?" 완성되었습니다 — 완전한 작동 제품입니다. UI는 기능이 "제품"일 때 "프로토타입"을 전달했습니다.
버전 2: 잘못된 기초를 광택내려는 시도
다시 만드는 대신, 우리는 버전 1을 광택내려고 했습니다. 우리는 더 많은 패딩을 추가했습니다. 우리는 글꼴을 약간 더 크게 만들었습니다. 우리는 맥박하는 상태 표시기를 추가했습니다. 우리는 녹음 버튼에 색을 추가했습니다.
이것은 실수였습니다. 나쁜 기초에 작은 개선은 립스틱을 칠한 나쁜 기초처럼 보이는 것을 생성합니다. 근본적인 구조적 문제 — 제품의 개성과 기능을 전달하지 않는 레이아웃 — 패딩 조정으로 고정되지 않았습니다.
"UI를 v4.0으로 업데이트하고 스마트 회의 요약 추가" 커밋이 이 기간을 다룹니다. v4.0 버전 번호는 낙관적이었습니다. 우리가 배포한 것은 동일한 디자인 문제의 약간 더 깔끔한 버전이었습니다.
재구축 결정
완전한 재설계의 약속은 우리의 공간에서 전문적인 신뢰를 얻은 앱들을 보는 것에서 나왔습니다: Notion, Linear, Vercel의 대시보드, Loom. 모두 주의 깊게 조정된 패널 레이어, 정확한 타이포그래피 스케일, 시스템 상태를 전달하는 모션을 가진 다크 테마를 사용합니다. 그들은 그들의 기술을 진지하게 받아들이는 사람들이 만든 도구처럼 보입니다.
우리는 일반적인 웹 앱들과 그들을 차별화하는 구체적인 디자인 선택을 식별했습니다:
- 깊이를 가진 어두운 배경: 모든 곳에 어두운 회색이 아니라, 신중한 계층:
#0f172a(페이지 배경) →#1e293b(패널 배경) →rgba(255,255,255,0.04)(카드 리프트). 각 레이어는 약간 더 밝아서, 명시적 그림자 없이 공간 깊이를 만듭니다. - 떠 있는 요소를 위한 Glass morphism: 헤더와 모달에서의 배경 흐림. 이것은 UI 요소가 콘텐츠 위에 떠 있는 시각적 인상을 만듭니다.
backdrop-filter: blur(10px)과 반투명 배경. - 악센트 색상으로 Indigo: 빨강, 파랑, 또는 초록이 아니라 — indigo (
#6366f1)는 정교한 SaaS 도구의 시그니처 색입니다. 데이터 시각화 색상과 충돌하지 않을 만큼 중립적이지만, 활성 상태를 명확히 전달할 만큼 생생합니다. - 의도적으로 스케일하는 타이포그래피: 한국어 지원을 위한 Noto Sans KR 9개 가중치. 제목 가중치는 900, 본문은 400, 메타데이터는 300. 가중치 대비는 색상 변경 없이 정보 계층을 전달합니다.
이퀄라이저 애니메이션 논의
모든 팀은 더 깊은 디자인 불일치를 위한 대리 싸움이 되는 기능을 가집니다. 우리의 경우, 그것은 음성 시각화였습니다. 녹음 중에 애니메이션하는 이퀄라이저 바는 2주 엔지니어링 및 디자인 논의로 변했으며, 이는 아마도 재설계 시간의 30%를 소비했을 것입니다.
첫 번째 구현은 유휴 상태에서 평면 막대와 녹음 중에 무작위 높이 막대를 보였습니다. 못생겼습니다. 두 번째 구현은 유휴 상태에서도 무작위 애니메이션을 사용했습니다. 우리는 그것을 배포했습니다. 누군가가 유휴 중인 애니메이션을 가지는 것이 혼동된다고 지적했습니다 — 사용자들은 그것이 음성에 응답한다고 생각했을 때 그렇지 않습니다. 우리는 유휴 애니메이션을 제거했습니다.
세 번째 구현은 AudioContext 분석기에서 실제 FFT 데이터를 사용했습니다. 막대는 실제 음성 주파수 내용에 응답했습니다. 남성이 말할 때, 낮은 주파수 빈이 켜졌습니다. 마이크가 키보드 소음을 받을 때, 당신은 그것을 볼 수 있습니다. 이것은 기술적으로 올바른 구현이었고 정말로 인상적이었습니다. 한 엔지니어는 그것을 좋아했습니다. 다른 하나는 그것이 "너무 많다"고 생각했고 트랜스크립트 읽기에서 산만했습니다.
네 번째 구현 (오늘 배포되는)은 실제 FFT 데이터를 각 막대에 대한 사인파 오프셋과 결합합니다:
// 최종 시각화 설계
const wave = Math.sin(time * 10 + i * 0.8) * 0.5 + 0.5;
const baseHeight = 8; // 최소 높이
const dynamicHeight = audioValue * 25 + wave * 10;
const finalHeight = Math.min(Math.max(baseHeight + dynamicHeight, baseHeight), 40);
bar.style.height = `${finalHeight}px`;
bar.style.opacity = 0.5 + (audioValue * 0.5);사인파는 음성 입력이 낮을 때도 유기적 모션을 추가하여, 막대가 막혔거나 죽어 보이는 것을 방지합니다. 실제 음성 값은 진폭을 조절하므로 더 큰 음성은 더 활력 있는 애니메이션을 생성합니다. 극단값이 레이아웃을 깨지는 것을 방지합니다 (Math.max(baseHeight)와 Math.min(40px)). 이것이 모두가 맞다고 느꼈던 버전으로 나왔습니다. "이퀄라이저 애니메이션을 주파수 데이터로 개선하고 오디오 내보내기 수정" 커밋이 이 결정을 표시합니다.
모든 것을 바꾼 3열 그리드
가장 영향력 있는 레이아웃 결정은 2열에서 3열 그리드로 이동하는 것이었습니다. 2열 레이아웃에서, 트랜스크립트가 왼쪽 열을 차지했고 모든 AI 패널 (Q&A, 요약)이 오른쪽 열을 공유했습니다. 오른쪽 열이 비좁았습니다; 사용자들은 스크롤 없이 회의 요약과 Q&A를 동시에 볼 수 없었습니다.
3열 그리드는 트랜스크립트, AI 채팅, 회의 요약 각각에 자신의 전용 공간을 제공합니다. 이것은 전문적인 메모 작성자가 회의 중에 작동하는 방식을 반영합니다: 그들은 동시에 대화 흐름을 캡처하고, 결정과 실행 항목을 메모하고, 전체 내러티브 호를 추적합니다. 3열 레이아웃은 이 3개의 활동을 시각적으로 구별하고 동시에 보이도록 합니다.
우리가 해결해야 했던 CSS 아키텍처 문제
역사에 커밋이 있습니다: "손상된 CSS 파일 복원 및 AI 교정 스타일 올바르게 적용." 이것은 우리가 차라리 잊고 싶은 하루를 나타냅니다. v4.0 재설계 푸시 중, 2명의 개발자가 CSS 파일을 동시에 편집했습니다. 병합 충돌은 구문 검증을 통과했지만 일부 속성이 잘못된 선택자에 적용된 파일을 초래했습니다. 구체적으로, AI 교정 배지 스타일 (✨ 표시)은 모든 트랜스크립트 항목에 적용되어, 실제로 AI 교정을 받았는지 여부와 관계없이 모든 것이 교정된 것처럼 보이게 했습니다.
근본 원인은 우리의 CSS 파일이 최소 주석과 과도하게 중첩된 선택자를 가진 3,000줄의 모놀리식이 되었다는 것입니다. 수정은 즉각적인 버그 수정과 구조적 재조직화였습니다: 모든 디자인 토큰을 위한 CSS 사용자 정의 속성, BEM과 유사한 명명법, 섹션 헤더. 파일은 다시 유지 관리 가능해졌습니다.
CSS 프레임워크나 전처리기 없이 단일 페이지 앱을 구축하고 있으면: 디자인 토큰을 위한 CSS 사용자 정의 속성 (변수)의 규율은 처음부터 가치가 있습니다. 우리가 캐스케이드 디버깅에 보낸 시간은 구조화된 CSS가 처음부터 비용을 초과했습니다.
시각적 결과 및 우리가 측정하는 것
재설계된 VORA는 우리가 만들려고 의도한 제품입니다. 어두운 glassmorphism 미학은 주의를 끌기를 외치지 않고 정교함을 전달합니다. 3열 레이아웃은 기능을 전달합니다. 녹음 상태 애니메이션은 명확함 없이 시스템 상태를 전달합니다. 타이포그래피 스케일은 정보 계층을 전달합니다.
우리는 이를 증명하는 형식적인 사용자 연구 데이터를 가지고 있나요? 일화적 피드백 이상 아닙니다. 우리가 가진 것은: "완성되었어?" 질문이 피드백에서 나타나지 않았습니다. 사람들이 VORA를 "기능적"이 아닌 "세련된"과 "전문적"으로 설명하기 시작했습니다. 시각 디자인이 대화 주제 그만두고 눈에 띄지 않기 시작했습니다 — 이것이 목표입니다. 좋은 UI는 눈에 띄지 않습니다. 나쁜 UI는 그 자체를 느끼게 합니다.
다크 테마 재설계는 미학을 위한 미학에 관한 것이 아닙니다. 우리가 제품을 진지하게 받아들이므로 사용자도 진지하게 받아들이도록 하는 UI를 구축하는 것에 관한 것입니다. 첫 인상은 누군가가 기능을 탐색하는지 탭을 닫는지 결정합니다. 우리는 어려운 방식으로 배웠습니다.