일할맛 판교 8월 후기
AI 에 관심이 많고 일의 절반정도를 AI 를 통해 작업을 하고 있어 Vibe Coding 에 대해 관심이 많아 듣게 되었고 많은 인사이트를 얻을 수 있는 시간이였던것 같다.
1부. AI 냄새 안나는 사이트 개발
AI로 단순히 딸깍(캘린더 만들어줘)라고 사용하면 안된다.
UI를 개발할 때는 충분한 레퍼런스를 모으고, 테마를 분석하고, Global 한 설정은 한곳에 집약시키고, 페이지 제작을 시키는 순으로 해야한다.
예를 들면 마음에 드는 레퍼런스(tossfeed)를 찾았다면. AI 에게 분석을 시킨다. layout, color, grphics, typography 이걸 shadcn 설정 후 global.css 에 값만 변경해달라고 요청한다.
# Requirements
- Playwright MCP 를 통해 'https://toss.im/tossfeed' 사이트의 **Design System**을 분석하고, 그 결과를 CSS 로 정리해줘
- DarkMode 와 LightMode 둘다 분석이 필요해
# Implementation
1. 시각적 정체성을 구성하는 핵심 요소 (Color, Typhography, Layout, Graphics 등) \*\*Browser 의 "Computed Styles"와 "CSS Variable" 을 활용하여 동적으로 수집해줘.
2. "https://toss.im/tossfeed/article/tosspick-2025-2b", "https://toss.im/tossfeed/category/everyfinance", "https://toss.im/tossfeed/category/allabouttoss" 의 페이지 이동을 통해 1 번의 작업을 반복해줘
- 모든 결과를 수집한 후 @src/shared/styles/globals.css 에 **Value**만 변경해줘
# Contraint
- @src/shared/styles/globals.css 만 변경
- 로직, UI 변경은 절대 안됨/init 을 통해 Directory Structure 를 생성하면 효과적으로 AI 를 활용이 가능하다.
주기적으로 /init 을 통해 갱신하면서 개발하면 좋을 것 같다.
Component 요청시에도 상세하게
절대하면 안되는것
Hero, List, Blog 순서로 페이지 만들어줘
아래와 같이 요청하자
# Requirement
- News 를 제공하는 사이트를 만들거야 그중 Hero 페이지를 만들어줘
- Section 1: 가장 메인이 될만한 뉴스를 만들어주고 페이지 하단에 스크롤을 유도할 수 있게 리스트가 살짝 보이게 작업해줘
- Section 2: 왼쪽에 지금 많이 보는 컨텐츠를 텍스트 기반의 List 아이템은 5개, 오른쪽은 Article 추천 리스트를 5개 이미지와 함께 보여줘 왼쪽이 짧고 오른쪽이 긴 형태가 될거야, Article 목록엔 썸네일이 들어가면 좋겠어
- Section 3: 광고 Banner 들어가 가로가 길고 세로가 짧은 형태로
- Section 4: 뉴스가 도움이 됐다는 리뷰를 배치해줘
- Section 5: 최신 뉴스를 쉽게 접할수 있는 email 입력칸을 배치해줘 "구독하기" 버튼과 "최신 뉴스와 매주 엄선된 콘텐츠를 이메일로 받아보세요" 문구가 들어갔으면 좋겠어
- Footer: 저작권 정보 "2025 Ean Studio" eamil 주소 : news@ean.studio 를 명시해줘 네비게이션 메뉴로 개인정보처리방침, 이용약관 페이지 이동할 수 있는 링크 만들어줘
# Implementation
- Shadcn MCP 를 적극 활용하며 Shadcn 의 컴포넌트를 사용해서 구현해줘
- Full Width를 사용해서 작업해줘
- 한국어로 텍스트를 작성해줘
- 색상 구현은 @src/shared/styles/globals.css 만 사용해줘
- 아이콘이 필요한 경우 lucide icon 을 적극 사용해줘
- FSD 구조에 맞게 Component 를 배치해줘
# Contraint
- Emoji 는 사용하지 말아줘2부. 개발자를 위한 프롬프트 작성 테크닉
커서맛피아 님은 아래와 같은 프로세스를 추천해 주셨다.
프롬프트 초안 작성 -> 자체 점검 -> 피어 리뷰 -> 실행 + 사후 점검
정말 좋아보이고 이런식으로도 개발을 해보고 싶다. 자체 점검을 통해 어떻게 문제를 풀어나갈지에 대한 내용을 볼 수 있으니, 코드리뷰 하기전 몇 문장 만으로도 충분히 검증이 가능할 것 같다.
프롬프트 구조
Requirement: 비개발자 시각 -> 요구사항
Implementatiom : 개발자 시각 -> 어떻게 구현할지, 사용할 라이브러리, 데이터베이스 정의 굵직한 결정사항 포함
Contraint: 제약 조건 ( Must Not ) -> 뭘 막아야할지
Accepptance: 빌드, 테스트 통과 등 -> 끝난 후 뭘로 검증할지프롬프트를 작성할 때 코드상에 존재하는 단어를 사용하고, 레거시 파일은 없애는게 할루시네이션을 줄일 수 있다. 최대한 덜 대화하고 한번에 개발이 되게 프롬프트를 작성할 수 있도록 길러보자
두 연사님 모두 200k 정도의 컨텍스트도 충분하다고 생각하셨고, 나도 동일한 생각을 가지고 있다. 최대한 간결하고, 잘 정리된 프롬프트로 개발할 수 있도록 해야할 것 같다.