작성: 2026-07-19
Claude Code를 사용해서 Framer 작업하기
들어가며
저번 글 쓴지도 오래됐는데, 그 동안 푹 쉬고 있었다. 책도 읽고, 공부도 하고, 월드컵도 보고, ... 암튼.
Framer 3.0이 런칭된지도 한 달정도 지난것 같은데, 대충 아 agent 들어왔구나 정도로만 생각하고 있다가 지난주에 런칭 비디오를 시간내서 볼 수 있었다.
데모에서 가장 눈에 띈 부분은 “딸깍”해서 새 디자인이 나온다 라기 보다는 실제 프로젝트, 특히 cms파트를 중심으로 단순반복작업을 어떻게 효율화할 것인지였고, 특히나 claude code나 codex같이 외부 agent를 연동하는걸 보고 써봐야겠다고 생각했다.
처음 테스트한건 디자인이라기보다는 localization인데, 기존 포트폴리오에 프로젝트 하나 추가하면서 전체 구성을 조금 손보고 업데이트한 상태였다. 다만 영문화는 기존의 경험으로는 꽤나 짜친 경험이었기에 손을 못대고 있었는데, Claude code X Framer 조합으로 프롬프트 한방으로 거의 해결.
여기까지 효능감을 조금 얻은 상태에서, 부분을 업데이트해본 흐름을 여기 정리해보고자 한다.
문제영역 - 푸터
이전 버전에서도 연락처 영역을 따로 잡아두긴 했었는데 email 말고는 보여줄게 없어서 이번에는 단순하게 footer에 뭉뚱그려서 email, linkedin, instagram 링크를 나열해뒀다. 다만 재미없다는게 문제.
그래서
기존 Footer 컴퍼넌트를 살펴보고 디자인을 제안해달라고 요청했다. 새 Design page를 만들어서 거기다가 디자인하라는 요청과 함께.
중간결과물
세 가지 방향을 보여줬는데, 아무래도 무난한 첫번째를 골랐다. 더 진행하기 전에 breakpoint 따라서 tablet, phone환경에서의 디자인도 정리해달라고 요청.
최종
실제 Footer 컴퍼넌트를 만들어서 사이트에 적용되었다. 마지막으로 localization 번역도 정리해달라고 요청했고, 역시나 빠르게 완료.
비용 & 소감
이 정도 작업에 요 정도 비용이 소모되었다. 주말인데 사용량이 남아있어서 sonnet이 아닌 opus를 선택한 상태라는걸 감안해주셨으면 좋겠다.
사용량 많이 나오면 max플랜 지를 생각으로 살고있는데, 슬렁슬렁 하다보니 pro로도 큰 불편은 없는 중.
