Fizzy 애플리케이션의 디자인 진화 플립북 제작 과정은 다음과 같은 단계로 진행되었습니다.

1. Git 커밋 데이터 추출 및 환경 준비

• Fizzy 저장소의 2024년 6월부터 2025년 11월까지 8,152개 커밋 중, 매일의 마지막 커밋 SHA를 추출했습니다 (dependabot 커밋 제외). 이는 각 작업일 종료 시점의 앱 상태를 대표하는 좋은 지표로 활용되었습니다.

• 추출된 SHA에 맞춰 Fizzy 소스 코드를 날짜별 폴더에 복사하고, 해당 SHA로 체크아웃했습니다.

• 스크립트를 통해 올바른 Ruby 버전 설치, bundle install 실행, 데이터베이스 마이그레이션 및 시딩 완료 여부를 검증하여 부팅 가능한 상태를 확보했습니다.

2. 스크린샷 캡처

• 각 폴더가 준비되면 애플리케이션을 부팅하고, Playwright를 사용하여 로그인 후 정확한 페이지로 이동했습니다.

• 프로젝트 역사 전반에 걸쳐 라우트가 변경되었기 때문에, 올바른 페이지를 캡처하는지 확인하기 위해 10개 체크포인트 단위로 작업을 진행했습니다.

• 일부 체크포인트는 스키마 마이그레이션, Gem 변경, 비공개 의존성 문제 등으로 인해 부팅이 불가능하여 수동 수정 작업이 필요했지만, 끈기 있는 노력으로 ‘유리창의 물방울’ 은유에서 시작하여 세련된 칸반 보드로 발전하는 시각적 여정을 모두 담아낼 수 있었습니다.

3. 배경 음악 제작

• 완성된 플립북에 생동감을 부여하기 위해 Fizzy 앱의 카드 드래그 시 재생되는 고유한 사운드를 활용하기로 했습니다.

• Claude AI에게 저장소 내 오디오 파일(public/audio/에 있는 5가지 악기별 6개 음(C3, D4, E3, F

4, G3, B3)의 MP3 파일) 분석을 요청했습니다. Claude는 이 음계들이 G장조 펜타토닉 스케일 기반으로 멜로디 구성에 적합하다고 판단했습니다.

• AI에게 2분 길이의 ‘초기 컴퓨터 데모’ 분위기를 연출하는 드라마틱한 배경 음악을 요청하여, 느린 템포로 시작해 빠른 크레셴도로 고조되는 곡을 생성했습니다.

4. 디자인 진화의 주요 관찰점

• 핵심 디자인 (Epicenter design): 가장 필수적인 요소(버블/카드 그룹화)부터 시작하여 내비게이션, 크롬, 보조 기능 순으로 발전하는 37signals의 디자인 철학을 명확히 보여줍니다.

• 색상 탐색: 초기에는 대담하고 생생한 색상을 실험했으나, 시간이 지나면서 37signals 특유의 재미있는 스타일을 유지하면서도 세련되고 전문적인 팔레트로 정제되었습니다.

• 레이아웃 밀도: 초기에는 여유로웠던 인터페이스가 기능 축적에 따라 정보 밀도가 높아졌다가, 후반에는 다시 단순화되는 경향을 보였습니다.

• 버블-카드 전환: 유희적인 유기적 ‘버블’ 형태가 점진적으로 구조화된 직사각형 ‘카드’로 변화하며, 초기 ‘유리창의 물방울’ 은유가 실용적인 작업 관리 도구의 현실성으로 전환되는 과정을 시각화했습니다.

• 타이포그래피 및 간격: 줄 간격, 패딩, 폰트 굵기 등 미묘하지만 지속적인 조정이 수백 개의 작은 커밋을 통해 이루어져 완성도를 높였습니다.

• 애니메이션: 정적 스크린샷으로는 포착하기 어렵지만, 개발 과정 전반에 걸쳐 움직임과 질감에 대한 실험이 진행되었습니다.

5. Git 히스토리 보존의 가치

이러한 ‘소프트웨어 고고학’은 37signals가 Git 히스토리를 온전히 보존했기에 가능했습니다. 대부분의 회사가 오픈 소싱 전에 히스토리를 스쿼시하거나 리베이스하는 것과 달리, 37signals의 이러한 결정은 소프트웨어가 실제로 어떻게 만들어지는지 궁금해하는 모든 이들에게 귀중한 통찰을 제공합니다.