프론트엔드 UI용 Fable 진짜 미쳤음
Fable for Frontend UI is CRAZY
핵심 요약
Fable을 활용해 프론트엔드 UI 디자인과 시스템 구축에서 큰 성과를 거둔 사용자의 후기입니다.
- Fable 활용 — 프론트엔드 UI 디자인 및 시스템 구축에 탁월한 성능을 보임
- 디자인 자동화 — 로고 분석을 통한 디자인 요소 추출 등 창의적인 작업 수행
- 기존 방식 개선 — 여러 채팅을 오갈 필요 없이 하나의 채팅으로 통합 작업 가능
- 사용자 경험 — 비전문가도 수준 높은 웹 페이지 초안을 빠르게 제작함
SaaS를 몇 달째 개발 중인데, Opus로 프론트엔드를 구현하는 데 정말 애를 먹고 있었음. 수많은 가이드라인(해야 할 것, 하지 말아야 할 것, 시각적 예시, Reddit 게시물 등)을 다 줬는데도 계속 전형적인 "AI 슬롭" 웹사이트만 만들어냈음. 한때는 너무 절박해서 포토샵으로 웹페이지 디자인을 만들고, Claude Design에 넣어 재현하게 한 뒤, Claude Code로 프로젝트에 구현해 보기도 했지만 여전히 별로였음.
짐작하겠지만, 난 웹 디자인 경험이 없음. 하지만 다른 형태(주로 인쇄물)의 페이지 레이아웃과 관련된 마케팅 배경지식은 꽤 있는 편임. 이런 기술들이 내가 기대했던 만큼 발휘되지 않았는데... Fable을 만나기 전까진 그랬음.
이전에는 잠재적인 영감을 주는 웹사이트들을 찾고, 디자인 시스템 가이드라인을 작성하고, 일반적인 미학을 구상하고, 페이지 초안을 잡기 위해 여러 개의 Opus 채팅을 따로 써야 했지만, 이제는 그 모든 걸 한 번에 처리해 주는 단 하나의 Fable 채팅을 사용함. 내가 이미 찾았던 리소스들을 가져와서 다른 채팅들의 작업물까지 살펴본 뒤, 그 둘을 결합해 인상적이고 제대로 된 디자인 시스템을 만들어냈음. 그러고 나서 첫 초안치고는 꽤 괜찮아 보이는 모바일 웹 페이지까지 만들어냈음!
가장 인상적이었던 건 Opus는 절대 못 했을 것 같은 작업이었는데, 바로 내 로고를 검토해서 분해한 뒤, 웹 페이지 전반에 걸쳐 사용할 수 있는 불릿 포인트와 다른 디자인 요소들을 만들어낸 거임. 내가 이걸 시켰냐고? 아니! 결과가 좋았냐고? 당연하지! 몇 번 더 수정하면 다른 사람들에게 보여주기 좋은 상태가 될 것 같음.
혹시 다른 사람들도 Fable로 프론트엔드 작업에서 큰 성공을 거두고 있는지, 또 공유할 만한 다른 팁이 있는지 궁금함.

