에디토리얼 스타일 UI와 브랜드 아이덴티티 설계 — 장부 관리 앱 (1)

장부 관리 데모 앱을 흔한 SaaS 대시보드 룩에서 벗어나게 만든 에디토리얼 디자인 시스템 구축기. 극단적 타이포 대비와 번트 오렌지 단일 액센트, Tailwind v4 @theme 토큰과 CSS 변수 폰트 페어링, 번호 매긴 내비게이션과 비대칭 그리드, 장부형 테이블, 두 번 갈아엎으며 일관성으로 수렴한 과정을 다룹니다.

시리즈를 시작하며

장부(가계부/회계) 관리 데모 앱을 만들며, "AI가 찍어낸 것 같지 않은" 디자인을 목표로 삼았다. 흔한 SaaS 대시보드 룩에서 벗어나, 에디토리얼(잡지) 스타일의 UI를 입혔다. 두 편으로 나눠 기록한다.

1. (이 글) 에디토리얼 스타일 UI와 브랜드 아이덴티티
2. Vite + React 빌드·배포 트러블슈팅

스택은 React + TypeScript + Vite, 스타일은 Tailwind다.

왜 에디토리얼 스타일인가

장부 앱은 자칫 "표와 숫자만 가득한 회색 대시보드"가 되기 쉽다. 기본 컴포넌트 라이브러리를 그대로 쓰면 어디서 본 듯한 화면이 나온다. 그래서 의도적으로 잡지 레이아웃의 문법을 가져왔다.

• 강한 타이포그래피 대비(큰 제목 ↔ 작은 본문)
• 여백을 아끼지 않는 에디토리얼 스페이싱
• 포인트 컬러 하나로 잡는 브랜드 아이덴티티

브랜드 컬러: 번트 오렌지

포인트 컬러로 번트 오렌지(burnt orange)를 골랐다. 금융/회계 앱이 흔히 쓰는 파랑·초록을 피하고, 따뜻하면서도 차분한 색으로 차별화했다. 색 하나가 전체 인상을 좌우하기 때문에, 액센트 컬러를 먼저 정하고 거기에 맞춰 나머지를 맞췄다.

:root {
  --accent: #b5471f;        /* burnt orange */
  --bg: #faf8f5;            /* 따뜻한 오프화이트 */
  --ink: #1a1714;           /* 순검정 대신 짙은 갈색 계열 */
}

배경도 순백(#fff) 대신 따뜻한 오프화이트를, 글자색도 순검정 대신 짙은 잉크색을 썼다. 순백+순검정은 화면을 차갑고 평평하게 만든다. 살짝 톤을 얹는 것만으로 "잡지에서 본 듯한" 따뜻함이 생긴다.

두 번의 리디자인

처음부터 깔끔하게 나오진 않았다. 커밋 이력을 보면 디자인을 두 번 갈아엎었다.

1. 1차: 에디토리얼/매거진 스타일로 전면 개편
2. 안정화: 모든 페이지에 통하는 "안정적인 클린 디자인"으로 정리

1차에서 스타일을 과감하게 밀어붙였다가, 페이지마다 일관성이 흔들려서 2차에서 공통 규칙(타이포 스케일, 스페이싱, 그림자, 애니메이션 클래스)을 정리해 모든 페이지에 통일했다. 디자인은 "과감하게 시도 → 일관성으로 수렴"의 두 박자가 필요했다.

누락된 CSS 유틸리티 채우기

Tailwind를 쓰면서, 커스텀으로 정의해야 하는 유틸리티들(그림자, 액센트 컬러, 애니메이션)이 빠져 있어 스타일이 부분적으로 안 먹는 문제가 있었다. 그림자·액센트·애니메이션 유틸리티를 명시적으로 채워 넣어 일관되게 적용되도록 했다.

정리하며

1편의 핵심은 의도적인 디자인 선택으로 "흔한 룩"을 벗어나기다.

• 잡지(에디토리얼) 레이아웃 문법 — 타이포 대비, 넉넉한 여백.
• 번트 오렌지 액센트 + 따뜻한 오프화이트 — 금융앱의 파랑/회색에서 탈피.
• "과감한 시도 → 일관성으로 수렴"의 두 박자.

다음 2편에서는 이 앱을 GitHub Pages에 올리며 만난 Vite + React 빌드·배포 트러블슈팅을 다룬다.