Memento mori

1. 인터페이스 선택

내가 쓰는 컴퓨터는 윈도우라 Cursor나 VS Code에 Codex 확장 프로그램을 연동해서 썼다. 둘 다 화면에 파일 목록, 코드 편집창, 터미널 창이 같이 뜬다. 처음에는 어지러웠는데 나중에 익숙해져서 CLI로 전환함


2. 작업 전 메모장에 기획안 정리

바이브 코딩은 직관이 반 언어화가 반이다. 대략적인 기획은 필요하지만 처음부터 정교하게 계획할 필요는 없고, 가볍게 대화를 통해 초안을 만들어보는 것으로 충분하다. 난 벤치마킹하고 싶은 개인 블로그 사이트 몇 개 리스트 뽑아서, 이런 느낌으로 블로그 제작하고 싶으니 초안을 구성해달라고 냅다 밀어붙였다.

그렇게 만들어진 초안을 보고 내가 원하는 UI와 기능, 디자인 레이아웃을 각각 메모장에 정리한 뒤 복붙한다. 글로 정리한 지시와 즉흥적으로 입력한 지시는 다르기 때문에 깔끔하고 논리적인 글솜씨가 중요한 것 같다. 프롬프트를 요청해도 상관없지만 나의 경우 직접 글을 쓰며 정리하는 게 좀 더 도움이 되었다.

AI가 작업하는 동안 다음에 지시할 내용을 미리 메모장에 정리해서 시간을 단축하거나 대화를 하면서 방향을 잡아가는 것도 효율적이다.


3. 레퍼런스는 스크린샷으로, 텍스트 설명 NO

인간도 알잘딱깔센이라면 질색 팔색인데, "미니멀한 느낌으로" "깔끔한 UI로" 같은 표현 따위 AI가 이해할 리 만무하다. 벤치마킹 사이트 스크린샷을 첨부하고 "이 레이아웃 구조 그대로" 라고 지시하는 게 더 정확한 것 같아서 기록해봄.


4. 디자인 토큰(색상/폰트/여백)을 먼저 고정

페이지가 생성될 때마다 색상 코드가 조금씩 달라지는 경우가 있었는데 생각보다 은근히 거슬렸다. 그래서 메인 컬러 #8b1d2c, 배경 흰색 톤, 폰트는 Noto Sans KR, 여백 단위는 8px 배수 이런 식으로 고정해두고, 이후 프롬프트에서 그 기준을 언급하면서 일관성을 유지했다.


5. 프론트엔드 작업

초안/아이디어 스케치용으로는 제미나이 AI 스튜디오도 나쁘지 않지만 개인적으로는 존나 별로였다. 실제 작업은 지피티나 클로드, 특히 클로드가 HTML/CSS/JS 코드 생성을 깔끔하게 해준다. 마음에 드는 형식이 나오면 저장해두고, 이후에는 그 양식에 맞춰 붙여넣을 프롬프트를 작성해 달라고 함


6. 페이지는 통째가 아닌 섹션 단위로 쪼개서 작업

히어로 배너 → 목록 리스트 → 게시물 작성 폼 이런 식으로 섹션별로 끊어서 확인하며 제작했다. 작업이 마무리될 때마다 귀찮지만 꼭 한 번은 테스트를 하면서 디테일을 챙겨야 한다. 글씨 크기 반영 안 됨, 이미지 잘림, 게시물 번호 꼬임 같은 자잘한 오류를 하나 고쳤는데 갑자기 멀쩡한 카테고리 부분이 꼬여서 카테고리 분류가 안 된다던가, 게시물 번호가 중복되는 경우가 있었다. 한꺼번에 만들려고 하면 밑 빠진 독에 물 붓는 꼴이 된다.



7. 건드리지 말아야 할 것을 명시

수정 요청할 때마다 "여기는 그대로 두고" 라는 말을 항상 같이 적어줘야 한다는 사실도 깨달았다 AI는 지시 안 하면 자기가 개선한답시고 손대는 경우가 많으니..


8. 모바일 뷰를 몰아서 하지 말고 섹션마다 바로 확인

데스크톱 다 만들고 마지막에 반응형 적용하려면 레이아웃 전체를 다시 손봐야 해서 귀찮다. 섹션 하나 완성될 때마다 모바일 뷰 캡쳐본을 올려서 같이 만들어야 한다.