logo
문의하기
서비스리소스블로그아카데미
logo
문의하기
logo

데이터와 IT 흐름을 읽는 시선,
뉴스레터 EXEM View 구독하기

Subscribe

주식회사 엑셈

서울시 강서구 마곡중앙8로5길 40

Tel 02-6203-6300 ㅣ Fax 02-6203-6301

ⓒ EXEM Co., Ltd. All Rights Reserved.
개인정보 처리방침서비스 이용약관
  • 서비스

    • Database
    • Application
    • AIOps
    • LLMOps
    • Big Data
    • All-in-One
    • Consulting
  • 신청

    • 세미나
    • 사옥 투어
  • 회사

    • 기업 소개
    • 채용 안내
    • IR
    • 오시는 길
  • 자료

    • 제품 브로슈어
    • 제품 살펴보기
    • 도서 실습자료
  • awsaws
  • microsoftmicrosoft
  • oracleoracle
  • naver-cloudnaver-cloud
바이브 코딩에 하네스를 채우다: Design Studio
바이브 코딩에 하네스를 채우다: Design Studio

바이브 코딩에 하네스를 채우다: Design Studio

 
안녕하세요. FE 1팀 김재선입니다. AI가 사람을 대체하기보다, 더 많은 사람이 제품 개발 과정에 참여하도록 돕는 도구에 관심이 있습니다. 자연어로 화면을 만드는 '바이브 코딩'은 이제 새롭지 않습니다. 누구나 아이디어를 곧장 화면으로 옮기고, 결과의 완성도도 꽤 높아졌습니다. 그런데 막상 회사 일에 쓰려고 하면 벽에 부딪힙니다. 잘 만들어진 화면이라도 우리 제품과 따로 놀고, 여럿이 함께 만들면 결과가 제각각이 됩니다. 저희는 바로 여기에 '하네스(harness)'를 채웠습니다. 누구나 자유롭게 만들되, 결과가 디자인 시스템 위에 안전하게 남고, 번거로운 뒷일은 도구가 떠안게 했습니다.
바이브 코딩에 하네스(harness) 적용
자유롭게 만들되, 마지막 판단은 사람이 합니다
 

1. 자유로운 만큼, 거칩니다

바이브 코딩은 강력하지만, 자유로운 만큼 결과가 제각각입니다. 혼자 만들 때는 괜찮아도, 진짜 어려움은 여럿이 동시에 만들 때 시작됩니다.
  • 예쁘게는 나오는데, '우리 제품'으로는 안 보입니다. 우리 디자인 시스템이 아니라 일반적인 부품으로 만들어지니, 예뻐도 기존 제품과 따로 놉니다.
  • 빠른 만큼, 쌓일수록 깨집니다. 빠르게 만든 코드가 쌓이고 서로 얽힐수록, 잘 되던 기능이 모르게 깨지기 쉽습니다(기능 회귀). 원인을 되짚기도 어렵습니다.
  • 자유로운 만큼, 제각각이 됩니다. 여럿이 같은 것을 저마다 다른 방식으로 만들면, 하나의 제품으로 모으는 데 사람 손이 많이 갑니다.
바이브코딩의 아쉬움
💡
그래서 Design Studio가 하려는 건 분명합니다. 사용자가 만든 결과가 실제 제품으로 그대로 이어지고, 여럿이 만들어도 하나로 모이게 하는 것입니다. 그래서 사람은 아이디어에 집중하면 됩니다.
 
 

2. 토대: 실제 제품과 같은 구조 위에서 시작합니다

바이브 코딩으로 화면을 만들어도, 실제 제품과 다른 구조면 개발자가 결국 다시 만들어야 했습니다. 빠르게 만든 만큼 다시 만드는 비용이 남았습니다.
그래서 사용자의 작업이 처음부터 실제 제품과 같은 구조 위에 놓이게 환경을 맞췄습니다. 거창한 기술은 없습니다. 실제 제품 소스를 그대로 참조하고(서브모듈), 사내 디자인 시스템과 공통 UI를 함께 묶어, 결과가 개발자가 그대로 이어받을 형태로 나오게 했을 뿐입니다.
검증된 구조에서 시작
검증된 제품 구조 위에서 시작합니다
 

3. 작업의 단위는 ’화면 하나’

작업의 최소 단위는 화면 하나입니다. 화면 하나에는 세 가지가 함께 담깁니다.
  • 화면(UI)
  • 예시 데이터
  • 기획 명세
데이터는 외부 연결 없이 화면 안의 예시 데이터에서만 오기 때문에, 누구나 같은 화면을 똑같이 재현하며 이야기 나눌 수 있습니다.
작업 단위는 화면 하나
화면 하나에 화면, 예시 데이터, 기획 명세를 함께 담습니다
 
 

4. '어떻게'는 도구가, '무엇을 왜'는 사람이

사용자가 만들 화면을 스펙으로 전하면, 도구가 화면으로 만듭니다. 빠진 부분은 곧장 만들지 않고 먼저 되물어 함께 채우고, 정해지면 결과가 곧바로 뜹니다. 그래서 사용자는 '어떻게 만들지'가 아니라 '무엇을 왜 만들지'에 집중할 수 있습니다. 만들기를 도구가 맡을수록 기획은 더 탄탄해지고, 화면도 더 좋아집니다.
무엇을 왜 만들지에 집중하는 사용자
스펙은 사용자가, 빈틈은 도구가 되물어 채웁니다
 
 

5. 하네스: 번거로움은 도구가 떠안습니다

번거로운 일을 도구가 떠안아야, 사용자가 아이디어에 집중할 수 있습니다. 버전 관리도, 디자인 규칙도, 협업 절차도 미리 익힐 필요가 없습니다. 쓰다가 더 깊이 알고 싶어지면 그때 파고들면 됩니다.
그래서 사용자가 보는 건 쉬운 말과 "제출 완료!" 같은 결과 한 줄이 전부입니다.
사용자가 보는 것과 도구가 대신 하는 일
보이는 건 한 줄, 그 아래는 도구가 떠안습니다
  • 게다가 작업이 화면 단위로 나뉘어 있어, 여럿이 동시에 만들어도 서로 덜 건드립니다.
화면 단위로 나눈 작업
작업을 화면 단위로 분리 + 공통 토대는 고정 → 겹치더라도 작게
💡
쉬워 보이는 게 핵심입니다. 복잡한 일을 없앤 게 아니라, 도구가 떠안아 보이지 않게 한 것뿐입니다.
 
 

6. 자동화는 여기까지, 결정은 사람이

AI 도구를 만들수록 유혹이 생깁니다. "마지막 한 걸음까지 자동으로 처리하면 빠르지 않을까?" 저희는 그 한 걸음을 의도적으로 사람에게 남겼습니다.
도구가 아무리 많은 걸 대신해줘도, 마지막 결정의 책임은 사람이 져야 한다고 보기 때문입니다.
결정은 사람의 몫
검정 = 도구가 자동으로 하는 일 / 파랑 = 사람이 판단하는 지점
💡
'얼마나 자동화하느냐'만큼이나 '어디까지 사람이 쥐고 있느냐'가 요즘의 화두입니다.
 
 

7. 현장에서 함께 만들어가고 있습니다

Design Studio는 이미 현장에서 쓰이고 있습니다. 가장 먼저 써 본 기획자들은 쓰는 데 그치지 않고 "어떻게 하면 더 편할지"를 함께 고민해 주었습니다. 그 고민들은 그대로 다음 개선에 반영되고 있습니다. 그리고 ⁠타본부에서도 이 도구를 바탕으로 다른 제품을 만드는 데 쓰고 있습니다. 기획과 개발, 서로 다른 맥락을 거치며 도구는 더 단단해지고 있습니다.
 
A본부에서 만든 제품
A본부에서 만든 제품
DB 기술본부에서 만든 제품-2
B본부에서 만든 제품
💡
Design Studio는 완성된 도구가 아니라, 쓰는 분들과 함께 다듬어가는 플랫폼입니다.
 

8. 앞으로

토대는 다졌습니다. 다음은 그 위에 깊이를 더하는 일입니다. 더 탄탄하게. 같은 기획을 줘도 화면이 매번 조금씩 달라지곤 합니다. 그 편차를 자동으로 측정하고 검증해, 결과를 일정하게 맞춰갑니다. 여럿이 동시에 작업할 때 같은 부분이 부딪히지 않도록 미리 막아 주는 장치도 보강했습니다. 더 넓게. 이제 디자이너까지. 화면 위에서 바로 디자인을 손보는 경험과 다양한 테마를 준비하고 있습니다. 그 과정에서도 하나는 지킵니다. 속도와 자동화가 사람의 판단을 밀어내지 않는 것. 마지막 결정은, 언제나 사람의 몫입니다.
 
 
참고자료
사람과 AI가 역할을 어디까지 나눠 가질지, 이 글의 관점은 아래 두 글과 맞닿아 있습니다.
- Human-Centered AI: Three Fresh Ideas | Ben Shneiderman 높은 자동화와 강한 인간 통제는 양자택일이 아니다. 사람이 통제하고 AI가 거드는 설계를 짚은 글. - Guidelines for Human-AI Interaction | Amershi et al., Microsoft Research (CHI 2019) AI가 처음·상시·틀렸을 때·시간이 지나며 어떻게 동작해야 하는지, 사람이 통제·교정할 수 있게 설계하는 18개 원칙 (원문 PDF, 출처: ACM DL)
 
 

 
 

 
 
함께 보면 좋은 아티클
AI를 잘 쓰는 팀 vs 못 쓰는 팀, 단 하나의 차이 | 엑셈
소프트웨어의 본질적인 가치에 집중할 수 있는 환경을 만들기 위한 노력
AI를 잘 쓰는 팀 vs 못 쓰는 팀, 단 하나의 차이 | 엑셈
https://ex-em.com/ko/blog/ai-software-value-focused-environment-building
AI를 잘 쓰는 팀 vs 못 쓰는 팀, 단 하나의 차이 | 엑셈
AI 코드 품질을 높이는 피드백 루프 개선기 | 엑셈
운영 환경에서 신뢰할 수 있는 코드 생성을 위해 AI 피드백 루프를 개선한 경험을 공유합니다.
AI 코드 품질을 높이는 피드백 루프 개선기 | 엑셈
https://ex-em.com/ko/blog/ai-code-quality-feedback-loop
AI 코드 품질을 높이는 피드백 루프 개선기 | 엑셈
 
Table of Contents
1. 자유로운 만큼, 거칩니다2. 토대: 실제 제품과 같은 구조 위에서 시작합니다 3. 작업의 단위는 ’화면 하나’4. '어떻게'는 도구가, '무엇을 왜'는 사람이5. 하네스: 번거로움은 도구가 떠안습니다6. 자동화는 여기까지, 결정은 사람이7. 현장에서 함께 만들어가고 있습니다8. 앞으로