230
이 글은 [이현의 Human AX]에서 발행되었습니다.
AX 실전 벤치마크 사례, 퀄리티 있는 AI 인사이트를
매주 이메일로 받아보고 싶으시다면, 뉴스레터를 구독해 주세요.
결론부터 말씀드리겠습니다.
바이브코딩 완성도의 첫인상은 코드가 아니라 ‘디자인’이라고 생각해요.
사실 기능만 어느 정도 돌아가면 바이브코딩으로서의 MVP(최소 기능 제품) 역할은 충분히 다 했다고 생각할 수 있습니다. 하지만 제가 현장에서 직접 겪어보니, 생각보다 ‘디자인’의 영역이 주는 임팩트가 훨씬 크다는 것을 깨달았습니다.
크게 두 가지 사례를 통해 그 이유를 말씀드려 볼게요.
1. 신뢰를 형성하는 '디자인'
비개발자였던 제가 일주일도 안 되어 웹 포털을 만들고 사내 운영 승인까지 통과될 수 있었던 비결은 무엇이었을까요? (이전 ep1, ep2 레터 참고)
기능도 중요했지만, 결과물의 신뢰도를 결정지은 것은 다름 아닌 '디자인'이었습니다.
거창한 그래픽 작업은 아니었습니다. 그저 회사의 로고를 넣고, 그 로고에서 추출한 컬러 팔레트를 명확하게 사용했을 뿐이었죠.
하지만 이 작은 '디자인적 성의'가 결과물에 대한 첫인상을 통과시켰고, 그 덕분에 뒤이어 설명하는 기능과 비전에 힘이 붙기 시작했습니다.
AI가 짠 코드에 인간의 성의가 더해졌을 때 비로소 '신뢰'가 형성된 것입니다.
2. 기술적 완결성보다 중요한 '심리적 배려'
반대의 경우도 있었습니다. 개발자분이 MVP를 만들어 가져온 미팅이었죠. 기능적으로는 테스트 결과 완벽했습니다.
하지만 회사의 디자인 가이드를 전혀 준수하지 않은 투박한 화면은 현업 관계자들에게 좋은 인상을 주지 못했습니다.
머리로는 'MVP니까 디자인은 나중 문제'라고 생각하려 해도, 눈으로 보이는 낯선 톤앤매너가 심리적 장벽을 만든 것이죠.
기술은 훌륭했지만, 사용자의 환경을 배려하는 '디자인적 맥락'이 빠져 있었기 때문입니다.
3. 명확한 '디자인 시스템'의 필요
ChatGPT Images 2.0 생성
만약 제가 다시 웹 포털을 만든다면, 이제는 단순히 컬러 팔레트를 정하는 수준을 넘어 명확한 '디자인 시스템'을 기반으로 작업할 것입니다.
기존에는 색상과 폰트 정도만 두었지만, 서비스가 확장되다 보니 '성공/실패/경고' 같은 상태 라벨(Status Label)에 대한 색감 요소가 정의되지 않아 혼란이 생기기도 했거든요.
기능이 늘어날수록 디자인 시스템이 없으면 화면은 금세 복잡해집니다. AI에게 "이 상태일 땐 우리가 정한 이 라벨 색상을 써줘"라고 명확한 규칙을 줄 수 있을 때, 서비스는 비로소 지속 가능한 생명력을 얻게 됩니다.
4. 마치며: AI 시대, 'UI 디렉팅'을 돕는 도구들 소개
디자인은 이제 감각의 영역을 넘어 AI에게 내리는 '정교한 명령'의 영역이 되었습니다. 비개발자 출신인 제가 AI와 더 완벽하게 협업할 수 있었던 실전 도구들을 소개합니다.
[CSS 플레이그라운드]: AI에게 "Padding 값을 20px로 조정해줘"라고 명확하게 말할 수 있는 '최소한의 문법'을 익혀보세요.
https://css-playground-ten.vercel.app/?lang=ko-KR
[Agentation]: 복잡한 코드를 건드리지 않고도 자연어로 UI 수정을 더 쉽게 도와주는 강력한 도구입니다.
https://github.com/benjitaylor/agentation
특히 Agentation으로 작업했더니 확실히 편하고 좋더라구요. 일단 써보면서 체득하는 것이 최고입니다! 아래에 간단한 사용법 알려드려요. 터미널창에서 실행하시면 되며, 혹시 설치가 어려우면 gpt, gemini등 LLM에서 위의 github 주소 넣고 설치하는 거 도와달라고 하면 잘 답변해 줄거예요 :)
[간단 사용법]
① 패키지 설치
npm install agentation
② layout 파일에 컴포넌트 추가
import { Agentation } from "agentation"; function App() { return ( <> <YourApp /> {process.env.NODE_ENV === "development" && <Agentation />} </> ); }
③ npm run dev 실행하면 화면에 툴바 등장
0
0