[AI] 백엔드 개발자가 본 바이브코딩 - 일할맛 in 판교 세미나 리뷰

[AI] Peterica의 AI공부와 비젼 정리

ㅁ 들어가며

최근 08.28 판교에서 코드팩토리와 커서맛피아가 공동 진행한 일할맛 in 판교, 바이브코딩 세미나를 참여하였다.
이 자리에서 소개된 바이브코딩(Vibe Coding)은 단순히 프롬프트를 잘 쓰는 방법을 넘어, 디자인과 개발 모두에 적용 가능한 새로운 접근법이라는 점이 인상적이었다.

 

ㅁ 세미나 구조

• 1부 (코드팩토리, 최지호)
  주제: 바이브코딩 시대에 AI로 디자인 “진짜” 잘하는 법
  → “AI는 왜 디자인을 못할까?”에서 출발, 디자인 프로세스 중앙화, 컨텍스트, 룰 기반 접근법을 강조.
• 2부 (커서맛피아, 최수민)
  주제: 개발자를 위한 프롬프트 작성 테크닉
  → 프롬프트 작성/리뷰/프리모템·포스트모템 프로세스를 소개하며, 개발 단계에서 AI 활용 효율 극대화 방법 제시.

 

ㅁ 세미나 1부 핵심 (코드팩토리: 디자인 관점)

ㅇ AI 한계: 스스로 디자인 결정을 내리지 못함 → 일관성·중앙화 부족

ㅇ 디자인 프로세스

1. 레퍼런스 모으기
2. 테마 분석하기
3. 공통 컴포넌트 제작하기 (ShadCN MCP, claude.md, cursorrules 활용)
4. 페이지 구현하기

ㅇ 프롬프트 원칙 (TCREI)

  - T(Task): 무엇을 할지 명확히 지시
  - C(Context): 맥락 제공
  - R(Reference): 레퍼런스 자료 첨부
  - E(Execute): 실행 지시
  - I(Iterate): 반복/개선

 

ㅇ 애니메이션 도구: Unicorn Studio, Framer Motion, GSAP 등 → 바이브(느낌)를 수치화하여 반영

  - Unicorn Studio – 노코드 방식으로 드래그 앤 드롭 애니메이션 제작
  - Framer Motion – React 기반 애니메이션 라이브러리
  - GSAP (GreenSock) – 세밀한 모션 제어를 위한 자바스크립트 라이브러리
  - 21st Dev 사례 – 다양한 애니메이션 샘플 제공

 

ㅇ 테마 변경 (Tweak CN): Sunset Horizon, Solar Dusk 등 프리셋 → 중앙화된 config로 전체 UI 통일

  - 테마 프리셋을 교체해 전체 UI를 빠르게 전환
  - 예시 테마: Violet Bloom, Neo Brutalism, Sunset Horizon, Solar Dusk
  - 중앙화된 테마 설정(config)을 통해 일괄 변경 가능

 

👉 요약: AI의 디자인 한계를 극복하려면 “중앙화 + 룰 + 명확한 컨텍스트”를 기반으로 바이브코딩을 적용해야 한다.

 

ㅇ 추가적으로 Tweak CN에 대해 코드팩토리님이 동영상 제작하심

ㄴ 디자인 고자를 위한 바이브 코딩 NextJS 테마 무료 설정법 ( 02:16 - 08:30 - TweakCN)

 

ㅁ 세미나 2부 핵심 (커서맛피아: 개발자 관점)

ㅇ 프롬프트 작성 프로세스

• Requirement (요구사항)
• Implementation Detail (구현 세부사항)
• Constraint (제약조건)
• Acceptance Tests (테스트 통과 기준)

ㅇ 리뷰 프로세스:

• 피어 리뷰 → 프리모템(사전 점검) → 실행 → 포스트모템(사후 회고)
• 코드 리뷰보다 쉽고, 문제 접근 방식·의도까지 피드백 가능

ㅇ 프롬프트 꿀팁

• 컨텍스트 오염 관리 (무관/잘못된 정보 제거)
• 폴더 구조 Rule, 정확한 변수명/클래스명 사용
• 레거시 파일 제거 → AI가 혼동하지 않도록 정리

ㅇ 비전공자 조언: Requirement만 잘 정리해도 충분, 나머지는 LLM 도움 활용

 

👉 요약: 프롬프트를 코드처럼 관리하고 리뷰하면, 개발 효율성과 품질이 동시에 향상된다.

 

ㅁ 디자인과 아키텍처의 공통점

백엔드 개발자의 입장에서 특히 신선했던 부분은, 디자인에서도 클린 아키텍처의 사고방식을 그대로 적용할 수 있다는 점이다.

• 큰 뼈대(레이아웃, 아키텍처)는 먼저 탄탄히 설계하고
• 세부적인 요소(컴포넌트, 수치)는 작은 단위로 채워 넣는다

이 접근은 단순히 미적 감각의 문제가 아니라, 중앙화(Centralization)와 룰(Rules), 그리고 명확한 컨텍스트(Context)를 기반으로 한 엔지니어링적 설계였다.

 

ㅁ 배운 점

결국 바이브코딩의 본질은 단순히 “AI에게 예쁘게 시키는 법”이 아니라,

• 중앙화된 구조를 통해 일관성 유지
• 룰을 통해 산출물의 품질 보장
• 컨텍스트 엔지니어링으로 AI가 흔들리지 않게 만드는 것

즉, 디자인과 개발 모두에서 적용할 수 있는 원칙을 다시 확인하는 시간이었다.

 

ㅁ 마무리

백엔드 개발자인 나에게도 이번 세미나는 새로운 시각을 열어주었다.
앞으로는 코드뿐만 아니라 디자인, 문서, 운영까지도 바이브코딩의 원칙으로 접근해 보고 싶다.