BLOG인사이트
디자이너가 코딩까지 해야 할까?
✨ Claude로 바이브코딩을 해보니, 오히려 디자인이 더 중요해졌습니다
안녕하세요, 디라이브에서 UI/UX 디자인을 하고 있는 박팀장입니다. 🙋
한동안 디자이너에게 코딩은 “알면 좋지만 몰라도 되는 것”에 가까웠습니다.
디자인은 우리가 하고, 기획은 기획자가 하고, 개발은 개발자가 하는 식으로요.
저도 그렇게 생각했습니다. 특히 코딩은 더 그랬습니다. HTML이니 CSS니 JavaScript니 하는 것만 봐도 머리가 아팠고, “나는 디자이너인데 굳이?”라는 생각이 먼저 들었습니다.
그런데 AI가 이 경계를 굉장히 빠르게 허물고 있습니다. 기획자는 직접 화면을 만들고, 개발자는 직접 디자인을 만들고, 디자이너는 Claude에게 코드를 시켜서 실제 서비스를 만들어냅니다. 이제는 한 사람이 기획부터 디자인, 개발까지 해볼 수 있는 환경이 됐습니다.
그렇다면 디자이너는 무엇으로 차별화될까요? 🤔
🚀 모두가 만들 수 있게 되었습니다
Claude 같은 AI를 사용하면 예전처럼 개발 언어를 처음부터 공부하지 않아도 어느 정도의 웹 서비스를 만들 수 있습니다.
버튼을 만들고, 페이지를 연결하고, 데이터를 넣고, 간단한 인터랙션을 구현하는 것까지 이제는 자연어로 설명하면서 만들어갈 수 있습니다. 특히 기획이나 개발 결과물은 “사람이 만들었는지 AI가 만들었는지”를 결과물만 보고 구분하기 어려운 영역이 많습니다.
하지만 디자인은 조금 다릅니다.
AI가 만들어준 화면에는 아직도 비슷한 문제가 반복됩니다.
- 어디선가 본 듯한 레이아웃
- 비슷한 카드 UI
- 과하게 둥근 모서리
- 익숙한 그라데이션
- 그리고 어딘가 어색한 인터랙션
결국 앱을 만드는 데 기획·개발·디자인이 필요하다면, AI로 제작의 진입장벽이 낮아질수록 무엇을 어떻게 보이게 만들 것인가가 더 중요해질 수 있습니다. 🎨
그래서 저는 직접 해보기로 했습니다.
“디자이너가 Claude로 바이브코딩을 하면 어디까지 할 수 있을까?”
🧑💻 처음에는 개발자에게 맡겼습니다
처음부터 제가 코딩한 건 아니었습니다. 제가 Figma에서 화면을 디자인하고 개발자에게 전달하면, 개발자가 이를 기반으로 바이브코딩을 하는 방식으로 작업한 적이 있습니다. 처음 결과물을 봤을 때 생각보다 놀랐습니다.
생긴 건 거의 똑같았습니다. 레이아웃도 맞고, 컬러도 맞고, 컴포넌트도 비슷했습니다.
그런데 묘하게 결과물이 제가 생각한 것보다 이상했습니다. 문제는 인터랙션이었습니다.
예를 들어 그래프 하나를 만든다고 해보겠습니다. 제가 생각한 건 단순히 그래프가 나타나는 게 아니었습니다. 처음에는 그래프가 아래에서 위로 자연스럽게 그려지고, 데이터 포인트는 약간의 딜레이를 두고 순차적으로 나타나고, 숫자는 실제 값까지 빠르게 튕겨 올라간 뒤 최종값에서 멈추고, 화면 전환 시에는 기존 그래프가 바로 사라지는 게 아니라 opacity가 자연스럽게 떨어지면서 다음 상태가 이어지는 것이었습니다.
그런데 이런 디테일은 Figma 화면만 보고는 전달하기 어렵습니다.
그래서 제가 직접 다시 손을 봤습니다.
단순히
“그래프가 자연스럽게 나타나게 해주세요.”
라고 하지 않았습니다.
어떻게 움직여야 하는지 자체를 설명했습니다.
예를 들면,
이렇게 구체적으로 전달했습니다.
그리고 결과가 확 달라졌습니다. ✅
기능은 똑같았습니다. 하지만 사용자가 느끼는 완성도는 달랐습니다. 그때 알았습니다.
🎛️ 디자이너가 직접 인터랙션을 설명하면 달라집니다
가장 효과적이었던 방법은 단순히 “자연스럽게 움직여주세요”라고 요청하는 것이 아니었습니다.
대신 디자이너가 모션을 설계하듯 구체적으로 정의했습니다.
예를 들어 그래프 인터랙션이라면,
처럼 duration, delay, easing, opacity, transform, keyframe 등의 구체적인 조건을 함께 전달했습니다.
이렇게 작업하니 단순히 디자인을 코드로 옮기는 것을 넘어, 디자인에서 의도했던 사용자 경험까지 구현하는 것이 가능해졌습니다.
🧠 바이브코딩에서 배운 3가지
01. 🧩 화면보다 먼저 인터랙션을 설계합니다
정적인 디자인만 전달하기보다 무엇이 언제, 어떻게 움직이는지를 먼저 정의하면 결과를 훨씬 세밀하게 조정할 수 있습니다.
디자이너가 가진 모션 감각과 인터랙션 설계 능력이 그대로 활용되는 부분입니다.
02. 🎯 수정할 부분과 유지할 부분을 명확히 합니다
AI에게 수정을 요청할 때는 변경할 부분만큼 변경하지 않을 부분을 명확하게 전달하는 것도 중요합니다.
“현재 레이아웃과 spacing은 유지하고 hover interaction만 수정해줘.”
처럼 변경 범위를 지정하면 기존에 작업한 결과를 유지하면서 원하는 부분만 개선할 수 있습니다.
03. 🔍 코드를 작성하는 것보다 결과를 판단하는 것이 중요합니다
바이브코딩의 장점은 디자이너가 모든 코드를 직접 작성하지 않아도 된다는 것입니다.
대신 결과물이 의도한 경험을 제대로 구현하고 있는지 판단하고 개선하는 능력이 필요합니다.
이 부분에서 디자이너의 역할은 오히려 더 중요해질 수 있습니다.
🌿 마치며
AI의 발전으로 이제는 한 사람이 기획, 디자인, 개발의 경계를 넘나들며 직접 결과물을 만들어볼 수 있는 시대가 되었습니다.
저 역시 처음에는 코딩을 별도로 배워야 한다는 부담이 있었지만, Claude를 활용한 바이브코딩을 경험하면서 생각보다 빠르게 디자인을 실제 결과물로 연결할 수 있다는 것을 알게 되었습니다.