Frontend

Rails + Tailwind CSS v4 프로젝트에서 그랜드슬램 테마 시스템을 만들었다. 설정에서 Wimbledon(보라), Roland Garros(오렌지), US Open(네이비), Australian Open(스카이블루)을 고르면 앱 전체 색상이 바뀌는 기능이다. 이틀을 날렸다. 결론부터 말하면 CSS 파일 로드 순서 한 줄이 문제였다. 배경: Tailwind v4의 CSS 변수 컴파일 방식 Tailwind v4는 v3과 완전히 다른 방식으로 색상을 처리한다. 가장 중요한 변화는 모든 유틸리티 클래스가 CSS 변수를 통해 동작한다는 것이다. /* Tailwind v4가 bg-emerald-600을 컴파일한 결과 */ .bg-emerald-600 { background-color: var(--color-emerald-600); } v3에서는 bg-emerald-600이 background-color: #059669 같은 하드코딩 hex로 컴파일됐다. v4에서는 CSS 변수 참조로 바뀌었다. 이 차이가 테마 시스템의 핵심이다. ...

테마 시스템을 구현할 때 흔히 생각하는 방법은 컴포넌트마다 조건부 클래스를 추가하는 것이다. 하지만 기존 코드를 건드리지 않고 CSS 변수 한 블록만으로 앱 전체 색상을 바꿀 수 있다면? Tailwind v4에서는 그게 가능하다. Tailwind v4의 CSS 변수 컴파일 방식 Tailwind v4는 유틸리티 클래스를 CSS 변수 참조로 컴파일한다. /* Tailwind v4가 생성하는 CSS */ .bg-emerald-700 { background-color: var(--color-emerald-700); } .text-emerald-600 { color: var(--color-emerald-600); } .border-emerald-500 { border-color: var(--color-emerald-500); } bg-emerald-700이 background-color: #047857(하드코딩)이 아니라 var(--color-emerald-700) 참조라는 뜻이다. --color-emerald-700 변수 값만 바꾸면 bg-emerald-700을 쓰는 모든 요소가 한꺼번에 바뀐다. ...

Rails + Lookbook으로 UX Flow를 문서화하다가 “이게 뭔가…” 싶은 순간이 왔다. 각 Step이 와이어프레임 조각으로만 나오니, Lookbook 목록에서 봤을 때 전체 흐름이 전혀 안 보이는 것이다. 두 가지를 고쳤다. 각 Flow에 Mermaid 순서도 Overview Step 추가 모든 Step 템플릿 구조 리디자인 문제: Lookbook Step 프리뷰가 “맥락 없는 조각"처럼 보임 # @label Admin UX Flow # @logical_path ux_flows class UxFlows::AdminFlowPreview < ViewComponent::Preview # @label 1. Login -> Admin Dashboard def step_1_login_dashboard render_with_template end # ... end 각 step_* 메서드는 render_with_template으로 ERB 파일을 렌더링한다. ERB 파일 안에는 와이어프레임이 있고, 상단에 간단한 Step 네비게이션 바가 있다. ...

Rails 8에서 47개 ViewComponent 기반 디자인 시스템을 warm orange 테마로 전환하고, Lookbook 프리뷰를 전면 구축하면서 만난 삽질들을 정리했다. 배경 기존 프로젝트에는 다음이 갖춰져 있었다: 47개 ViewComponent (input, layout, navigation, card, typography 등 15개 카테고리) CSS Custom Properties 기반 디자인 토큰 (tokens.css) Tailwind CSS 4 + Propshaft 에셋 파이프라인 목표는 BMC(Buy Me a Coffee) 디자인을 레퍼런스로, warm orange 테마 + dark sidebar + stone palette로 전환하고, Lookbook으로 전체 프리뷰를 구축하는 것이었다. ...