WORXPHERE
디자이너, PO, 개발자가 한 저장소에서 일하게 된 이야기
안녕하세요. 웍스피어에서 잡플래닛 프론트엔드를 맡고 있는 강태완입니다.
요즘은 코딩의 많은 부분을 AI와 같이 하고 있습니다. 화면을 만들 때도 마찬가지입니다.
그런데 AI로 코딩을 하면서 이상하게 오래 걸리는 구간이 하나 있었습니다.
피그마에 있는 디자인을 코드로 가져오는 과정이었습니다.
디자인은 피그마에 있고, 코드는 저장소에 있었습니다
디자이너가 피그마로 화면을 그리면, 개발자는 그 화면을 보고 다시 코드로 만듭니다.
AI를 쓰고 나서는 피그마 MCP로 디자인을 가져와 코드로 만들었습니다. 화면을 하나하나 설명하지 않아도 돼서 처음에는 꽤 편했습니다.
그런데 생각보다 시간이 걸렸습니다. 디자인을 가져오고, 코드로 만들고, 결과를 확인하기까지요.
그리고 그렇게 만든 화면에서도 디자인 QA는 여전히 나왔습니다.
"여기 간격이 4px 달라요."
"이 버튼은 이 컴포넌트가 아닌데요?"
고치고, 다시 보고, 또 고쳤습니다.
그래도 정적인 화면은 나은 편이었습니다.
애니메이션이나 인터랙션은 더 어려웠습니다. 피그마로는 움직임을 정확히 보여주기 어렵다 보니 결국 말로 전달하게 됩니다.
"여기는 아래에서 위로 부드럽게 바뀌어요."
얼마나 부드러운지, 몇 초마다 바뀌는지는 듣는 사람마다 다르게 이해했습니다. 만들어서 보여드리면 "이 느낌은 아닌데요"가 돌아왔습니다.
생각해보면 이상했습니다. 디자이너가 그린 화면은 결국 코드가 됩니다. 그런데 디자인과 코드가 서로 다른 곳에 있다 보니 그 사이를 옮기는 과정에서 계속 무언가가 빠졌습니다.
그래서 이런 생각을 해봤습니다.
디자이너가 처음부터 우리 프로젝트의 코드로 디자인하면 어떨까?
그러면 디자인 QA에서 잡아야 할 차이가 훨씬 줄어들 것 같았습니다. 특히 움직임은 말로 설명하는 대신, 실제로 움직이는 화면으로 주고받을 수 있습니다. 개발자도 "이 화면 그대로 옮겨줘"라고 AI에게 작업을 맡기기 편해질 것 같았고요.
마침 디자이너분도 비슷한 고민을 하고 있었습니다.
이미 Claude 아티팩트로 프로토타입을 만들어 보고, 그걸 다시 피그마로 옮겨 그리고 있었습니다. AI로 한 번 만들고, 피그마로 한 번 더 그리는 셈이었죠.
어차피 AI로 만들고 있다면, 처음부터 서비스 코드 위에서 만들 수 있게 작업 공간을 마련해 드리면 되지 않을까?
서로 원하는 게 맞아떨어졌습니다.
디자이너를 위한 저장소를 하나 만들었습니다
그래서 디자이너가 작업할 공간을 새로 만들었습니다.
GitHub에 새 저장소를 만들고, 실제 서비스 프로젝트에서 디자인 환경만 그대로 가져왔습니다. Tailwind 테마, 타이포그래피, 공통 컴포넌트, 아이콘까지요.
여기서 디자이너는 피그마 대신 Claude Code에 프롬프트로 화면을 그립니다. API 호출 없이 목 데이터로만 채운 정적 Next.js 프로젝트라서 서버를 몰라도 됩니다.
그리고 그렇게 만든 화면을 개발자가 바로 볼 수 있게 사이트로 띄웠습니다.
화면 작업 하나가 Task 카드 하나가 됩니다. 기획 문서, 디자인, 작업 지시, 화면 보드로 바로 이동할 수 있습니다.화면 작업 하나는 폴더 하나입니다. 폴더를 만들면 Tasks 목록에 카드가 생기고, 그 안에서 PC, Mobile Web, APP 화면을 전환해 볼 수 있습니다.
왼쪽 패널에서 화면과 상태를 바꿔 가며 볼 수 있습니다. (캡처의 공고 정보는 가렸습니다)실제로 써보니 이 차이가 가장 크게 느껴진 건 인터랙션이었습니다.
한 디자이너분은 막대가 화면에 들어오면 색이 차오르는 인터랙션을 직접 만들었습니다. 막대가 화면에 60% 넘게 보이면 0.8초 동안 차오르고, 끝으로 갈수록 천천히 멈춥니다. 한 번 차오르면 다시 움직이지 않고, 기기에서 '동작 줄이기'를 켠 사용자에게는 처음부터 다 찬 상태로 보입니다.
문장이 아래에서 위로 바뀌는 롤링도 만들었는데
피그마 대신 코드로 디자인하면 어떨까?
생성 일시
2026/11/09 05:01
최종 편집 일시
2026/11/09 05:01
태그
잡코리아
파일과 미디어