[Spring, React] AI가 만든 티가 나는 바이브코딩, 어떻게 해야할까? (다양한 스킬 소개)

 

 

내 알고리즘엔 바이브 코딩이 자주 등장한다.
어느 날! 바이브 코딩 시 AI의 특징에 대해 듣고 마는데...

 

 

 

 

https://post-this.tistory.com/186

[Spring, React] 바이브코딩 첫 도전, Codex에 3시간을 투자해서 간단한 프로젝트를 만들어보자!

 

 

 

 

1. 어떻게 된 일인가?

바이브 코딩으로 AI에게 UX/UI를 전부 맡기게 되면 밤티로 만들어준다는 릴스를 보게 되었다. 그 특징들을 듣는데 어허...? 이거 완전히 내 프로젝트인데..? 싶은 생각이 들었다. 일단 나는 이런 이야기를 들으면 넘어갈 수 없다. 더 나아질 수 있는 방법을 알았는데 어찌 외면하겠는가? 그리고 궁금하다!!!! 어떻게 변화할지!!!! 그래서 설레는 마음으로 직접 해보기로 결정했다.

 

저번 프로젝트는 굉장히 깔끔하고 빠르게 끝났다. 그런데 이번 프로젝트는 사흘 정도 걸렸다. 그 이유는 클로드에 주로 사용되는 스킬을 코덱스에 사용하려고 했기 때문이다. 그래서 소통의 문제가 ^^ 굉장히 많았다. 아무튼 이번에는 프론트엔드 코드를 고치는 것을 목표로 삼았다. 라이브러리와 다양한 스킬을 넣어서 문제가 되는 부분들을 바꾸기로 결정했다. 

 

 

 

---

 

 

 

 

2. 화면 변화 
첫 번째 이미지가 수정 전, 두 번째 이미지가 수정 후입니다.

• 메인화면 (대시보드)
  필수교육에 관련된 정보가 나타난다.

수정 전

수정 후

수정 전에서는 다른 페이지로 넘어가는 버튼이 두 개로 중복되고 있었다. 그래서 그 부분을 없앴고 전반적인 컬러도 수정했다. 수정 후를 보면 확실히 정보 위계가 잡힌 듯한 모습이다. AI에게 UI/UX를 맡기면 정보 위계 없이 무작정 만든다는 특징이 있다. 그래서 중요한 정보가 무엇인지 판단하게 만들고 그 부분에만 붉은 컬러를 사용하도록 했다. 훨씬 차분하면서 보기 좋게 변경되었다. UI/UX에 대해 잘 몰라서 수정 전 화면도 우와 뭇찌다앙~!! 이러면서 했는데... 이렇게 적나라한 비교삿을 보니 수정전이 처참하다!

 

 

• 교육 현황 (교육별 미수료)
  교육을 누르면 각 교육을 어떤 직원이 들었는지 볼 수 있습니다.

수정 전

수정 후

이 페이지의 가장 큰 문제점은 정보가 밑으로 쭈욱 나열되고 있다는 점이었다. 그래서 각 정보들을 분리하는 것을 가장 큰 목적으로 잡았다. 밑에 교육 상세 보기와 직원별 이수 상태 화면이 나온다. 수정 전에는 이 정보들이 열거 형식이었다. 이렇게 밑으로 정보를 열거하는 부분은 AI에게 UI/UX를 맡겼을 때 발생하는 특징이라고 한다.

 

 

• 교육현황 (교육 상세 보기)
  상세보기 버튼을 누르면 해당 교육의 미수료 직원이 나온다.

수정 전

수정 후

열거 형식으로 보여줬던 미수료 직원을 Drawer 형식으로 변경했다. 참고로 Drawer는 화면 사이드에서 밀려 나오면서 기존 화면을 덮고 뒤쪽 화면에는 반투명 오버레이가 깔리는 형태를 말한다.

그리고 추가적으로 교육 정보도 넣었다. 이 부분은 조금 고민을 했다. 왜냐면 앞에 교육 현황에서도 교육 정보를 볼 수 있어서 넣는 게 맞는 건지 고민했는데, 넣는 것이 안정적으로 보이는 것 같아서 그냥 내버려두었다. 개인 프로젝트를 하다 보면 이런 부분들이 참 어려운 것 같다. 물어볼 사람이 딱히 없다. 타인에게 묻는 것도 요새는 조심스럽다. 괜히 시간 뺏는 것 같고... 큰 문제면 모르겠는데 이렇게 자잘한 부분은 참 난감한 것 같다.

더구나 이번 프로젝트를 하면서 느낀 건 AI가 만들어도 책임은 AI를 다룬 사람이 져야 한다는 것이다. 그래서 더욱 많은 정보를 알고 있어야 하는 것 같다. 예전엔 코드를 짜는 공부를 해야 했으면 지금은 AI가 하는 말이 맞는지, 더 좋은 방법은 없는지에 대해 판단할 수 있는 공부를 해야 하는 것 같다.

 

 

• 교육 현황 (직원별 이수 상태)
  이 부분은 실제 운영을 하게 된다면 필요한 부분은 아닐 것이다. 그냥 실시간으로 데이터 변경이 잘 이뤄지는지 보고 싶어서 직원별 이수 상태를 넣었다. 

수정 전

수정 후

이 부분도 원래는 열거 형식으로 되어있었다. 그래서 깔끔하게 탭형식으로 변경했다. 또 직원이 어떤 교육을 이수했는지 체크할 수 있는 부분도 열거 형식이었는데, 아코디언 방식으로 변경했다.

이런 부분들은 내가 직접 하라고 시킨 게 아니다. 스킬을 넣었고 그걸 토대로 판단해서 어떻게 변경할지 나에게 알려줬다. 나는 그저 하라고 했을 뿐인데 이렇게 뚝-딱-! 완성시켜줬다.

 

 

• Fake AI 검색
  실제 AI를 넣진 않았고 몇 가지 규칙을 넣어서 그렇게 보이도록 만들었다. 이 검색 부분은 아쉬움이 많긴 하다. 실제로 AI를 넣어보고 싶은 욕심이 슬금슬금 차오르고 있다. 지금 파이썬과 AI로 만들어보고 싶은 게 있어서 그거 만들어보고 이후에 이 부분을 수정해볼까 싶다.

수정 전

수정 후

이 부분은 할 말이 좀 있다. 가장 오래 걸렸다. 여기는 거의 내가 따로 지시한 부분들이다. 여기서 무언가 이상하다는 걸 깨달았다. 지금 보이는 화면들은 최종 화면이긴 하지만, 최종 수정 전에도 정보 위계가 나쁘지 않게 잡힌 모습이었다. 그런데 AI 검색에서 정보 위계가 너무 안 잡히고 이게 스킬을 넣은 게 맞나? 이런 생각이 들었다. 

그래서 확인해 보니까 아니었다... 수많은 대화 끝에 최종적으로 스킬을 토대로 화면을 만들기는 했지만, 아래 첨부한 이미지처럼 여러 고난이 있었다.

 

 

 

 

 

---

 

 

 

 

3. AI가 만든 UI/UX 특징

• 비슷한 카드가 반복된다.
• 모든 정보를 카드로 감싸려고 한다.
• 버튼가 badge가 많다.
• 색상과 여백 기준이 화면마다 다를 수 있다.
• 실제 업무 흐름보다 시각적인 장식에 중점을 둔다.
• 정보의 우선순위가 약하다.
• 유행하는 디자인 요소를 무분별하게 사용한다.
• 상태 처리가 부족하다.
• 접근성이 부족하다.
• 보라색-파란색 그리디언트를 사용한다.
• glow효과, 유리처럼 반투명한 surface를 사용한다.

여러분이 만든 바이브 코딩 프로젝트에 이런 특징이 있는지 검토해 보자! 일단 내 프로젝트에서는 모든 부분이 해당했다.

 

 

 

 

---

 

 

 

 

4. Skill
여기서 말하는 Skill은 보통 Skill.md라는 파일을 말한다. React 라이브러리처럼 프로젝트 코드에 import 해서 사용하는 것이 아닌, AI 코딩 에이전트에게 "이 작업을 할 때 이런 절차와 기준을 따르거라~"라고 주는 작업 지침서 같은 것이다. 이번 프로젝트에서 아쉬운 점은 정말 유명한 스킬들은 사용하지 못했다. 내 프로젝트 스타일과 안 어울리고 했고 처음부터 시작한 게 아니라서 많이 다뤄보지 못했다. 다만 여러분들은 유용할 것 같으니 함께 작성해 보겠다!

• Taste
  강렬하고 세련된 스타일의 디자인이 필요할 때 사용하면 좋을 스킬이다. 여기에서 포함되어 있는 스킬을 하나 사용하긴 했지만 전반적으로 현재 프로젝트와는 어울리지 않다고 판단하여 Taste Skill 자체를 추가하진 않았다. 

- Taste Skill 설명

Taste Skill: AI가 만든 '뻔한 화면'을 막아주는 오픈소스 스킬, 사용법부터 주의사항까지 | 이랜서

 

- Taste Skill

Taste Skill | The Anti-Slop Frontend Framework

 

 

• Awesome Design
  이 스킬은 나도 잘 모르겠다. 릴스에서 말해주는 이름을 토대로 찾아봤는데 이런 이름을 가진 스킬이 여러 개 있었다. 그중 가장 유명한 것 같은(?) 스킬을 살폈는데 처음 프로젝트를 시작할 때 사용하면 좋은 스킬인 것 같았다. 현재 내 프로젝트는 토대가 이미 만들어져 있었고 거기서 수정을 하는 거라 사용하진 않았다. (아래 첨부한 링크가 Awesome Design의 대표인 것 같고 여러 디자인 중 하나를 선택해서 만들도록 돕는 그런 것 같다)

- awesome-design-skills

GitHub - bergside/awesome-design-skills: List of 67 awesome DESIGN.md and SKILL.md design skill files for agentic tools like Cla

 

 

• Image To Code
  비주얼 퀄리티가 중요한 프로젝트에 어울리는 스킬이다. 내 프로젝트는 비주얼이 중요하지 않다. 실용이 목적이기 때문에 이 스킬도 넣지 않았다. 게다가 Image To Code는 먼저 이미지를 생성하고 그 이미지를 분석해서 코드로 옮기는 것 같다. 이미 코드가 다 작성되어 있는 내 프로젝트와는 어울리지 않았다. 그리고 이 스킬은 Taste Skill 내에 있는 것 같다.

- image-to-code

image-to-code | Claude Skills & Agent Skills 라이브러리

 

- image-to-code-skill

taste-skill/skills/image-to-code-skill at main · Leonxlnx/taste-skill

 

 

• gpt-taste
  Taste보다 더 강한 스킬이다. 반복되는 AI 디자인을 막기 위해 레이아웃 선택에 variation을 주는 규칙을 가지고 있다. GSAP scroll pinning이나 cinematic section, AIDA 구조, hero typography 등이 있어서 마케팅 사이트, 포트폴리오, 브랜드 사이트 등에 어울린다. 근데 내 기억엔 이 스킬이 코덱스에 설치가 안된다고 했던 것 같다. 어차피 현재 프로젝트와 어울리진 않았지만, 아무튼 설치가 안 되는 건지 아니면 내가 뭔가를 잘못한 건지... 모르겠다. 

- gpt-tasteskill

taste-skill/skills/gpt-tasteskill/SKILL.md at main · Leonxlnx/taste-skill

 

 

• redesign-existing-projects
  이 Skill은 기존 UI를 유지하면서 AI 특유의 UI를 패턴과 정보 위계 문제를 재검토해서 개선하도록 한다. 원본 설명을 보면 [ 기본 웹사이트나 앱을 새로 만들지 않고, 현재 코드를 분석한 뒤 문제를 찾아 targeted upgrade를 수행한다. ]라는 말이 적혀있다. 현재 내 프로젝트에 가장 필요한 스킬로 사용했다. 참고로 이 스킬이 Taste Skill에서 제공하는 것 중 하나이다.
  
  작업 순서는 Scan - Diagnose - Fix로 진행한다. Scan은 현재 프로젝트의 프레임워크, CSS 방식, 디자인 패턴을 파악한다. Diagnose는 AI가 흔히 만드는 반복적이고 평범한 UI 패턴이나 잘못된 정보 위계를 찾는다. Fix는 프로젝트를 갈아엎지 않고 현재 스택 안에서 문제만 수정한다.

- redesign-skill/SKILL.md

taste-skill/skills/redesign-skill/SKILL.md at main · Leonxlnx/taste-skill

 

 

• web-design-guidelines
  접근성, 폼, 포커스, 콘텐츠, 내비게이션 등의 세부 품질을 검수한다. redesign-existing-projects는 디자인을 검수하는 거라면 web-design-guidelines는 웹 인터페이스로서 제대로 만들어졌는지 확인한다. 이 스킬은 Vercel의 Web Interface Guidelines를 기반으로 UI 코드를 검토한다. 

- web-design-guidelines

agent-skills/skills/web-design-guidelines at main · vercel-labs/agent-skills

 

 

• Browser control
  프로젝트에 설치된 디자인 Skill은 아니다. AI 실행 환경에서 브라우저를 직접 조작하는 도구에 가깝다. 코드만 보고 잘 되었을 거라고 끝내지 않고 실제 렌더링된 UI를 검증하는 역할을 한다. 

- browser-control

GitHub - anomalyco/browser-control: Local browser driver for trusted agents: control your existing Chromium browser through a sm

 

 

 

---

 

 

 

5. 변경한 부분

• redesign-existing-projects
  - KPI 숫자와 pagination 숫자에 tabular figures를 적용했다. tabular figures는 숫자의 폭을 동일하게 만들어 수치가 바뀌어도 정렬이 흔들리지 않게 하는 기능이다.
  - 긴 heading에는 text-wrap: balance를 적용했다.
  - 반복적으로 등장하던 영어 보조 제목 (Dashboard, Training Status.. 등) 같은 영문 eyebrow 스타일 텍스트를 제거했다. 이 부분은 redesign-existing-projects에서 지적하는 대표적인 AI UI 패턴 중 하나이다.
  - 필수교육 미수료'를 더 넓고 강하게 배치했다. 정보 중요도에 따라 레이아웃 자체를 차등화시켰다.
  
  
• web-design-guidelines
  - Tabs와 Drawer에서 outline: none이 사용되는 부분을 찾아서 명시적인 focus-visible 스타일을 추가했다.
  - 검색 input에 name, autocomplete를 추가했다.
  - semantic button, link, table, heading, aria-hidden, live region, accessible name을 검수했다.
  - 현재 메뉴에는 aria-current가 정확히 하나만 존재하게 만들었다.
  - TrainingInsight 로고와 Dashboard 메뉴가 동시에 현재 위치로 읽히는 문제도 수정했다.
  - Error UX도 recovery path를 제공하도록 바꿨다.
  
  

 

---

 

 

 

6. 결론
맨 처음에 스킬을 추가한 줄 알았다. 그렇게 변경한 건지 알았는데, 그게 아니라 깃허브 속 코드와 내용들을 읽어보고 거기에서 수정할 부분의 내용들만 가져와서 바꾼 것이었다. 다음엔 진짜 화려한 웹사이트를 만들어보고 싶다. 이렇게 다양한 스킬을 그저 바라만 봐야 한다니... 너무나 아쉬웠다. 다음 포스팅에서는 라이브러리에 대해 적어보려고 한다. 어떤 라이브러리를 추가했고 어떻게 변경됐는지를 작성해 보도록 하겠다!