The Recipe.
AI와 함께 나만의 홈페이지를 만드는 방법입니다. 코딩을 몰라도 논리(Logic)만 있다면 가능합니다.
"AI 코딩은 논리(Logic)를
부드럽게 우려내는 과정입니다."
기존의 코딩이 한 줄 한 줄 벽돌을 쌓는 '건축'이었다면,
AI와의 코딩은 물의 온도를 맞추고 찻선을 젓는 '다도(Tea Ceremony)'와 같습니다.
복잡한 문법보다 중요한 것은, AI 파트너에게
원하는 맛(Result)을 정확히 설명하는 대화의 기술입니다.
찻잎 고르기 (Intent)
명확한 의도가 좋은 코드를 만듭니다.
AI는 마법사가 아닙니다. '멋진 홈페이지 만들어줘'보다는 'AI 코딩을 주제로 한 미니멀한 블로그를 만들고 싶어'가 좋습니다. 만들고자 하는 결과물의 핵심 가치를 한 문장으로 정의하세요.
물 온도 맞추기 (Context)
AI에게 충분한 맥락을 제공하세요.
바로 코드를 짜달라고 하기 전에, 사용할 도구(Astro, Tailwind)와 제약 사항을 먼저 알려주세요. AI가 당신의 개발 환경을 이해할수록, 복사해서 바로 쓸 수 있는 정확한 코드가 나옵니다.
격불: 저어주기 (Whisking)
한 번에 완성되는 것은 없습니다.
첫 번째 결과물은 늘 부족합니다. '여백을 좀 더 줘', '색깔을 쑥색으로 바꿔줘'처럼 디테일한 피드백을 계속 던지세요. Matcha Logic도 수백 번의 대화(Tiki-Taka) 끝에 완성되었습니다.
담아내기 (Identity)
당신만의 색깔을 입히세요.
AI가 만들어준 뼈대에 당신만의 철학(Origin)과 색깔(Palette)을 입히세요. 기술적인 코드는 AI가 짤 수 있지만, 그 안에 담길 이야기와 브랜드의 분위기는 오직 당신만이 결정할 수 있습니다.
"속도인가, 완전한 이해인가?"
모든 도구는 장단점이 있습니다.
자동화된 AI IDE 대신 대화형 AI를 선택한 데에는 분명한 이유가 있습니다.
AI IDE
Antigravity, Cursor 등
파일 생성부터 코드 작성까지 자동화되어 있어, 숙련자가 빠르게 결과물을 낼 때 최적입니다.
코드가 자동으로 생성되다 보니, 초보자는 전체 구조를 파악하기 어렵고 수정 시 길을 잃기 쉽습니다.
Conversation
Gemini, ChatGPT 등
직접 코드를 옮기며 한 번 더 읽게 되고, '왜' 이렇게 짰는지 대화하며 설계를 이해할 수 있습니다.
복사/붙여넣기 과정이 필요하며, IDE보다 속도가 느릴 수 있습니다.
The Deciding Factor
처음엔 저도 AI IDE를 고려했습니다. 파일까지 뚝딱 만들어주니 정말 편했죠.
하지만 "내가 만들지 않은 파일이 늘어날수록, 어디를 고쳐야 할지 모르는 두려움"도 함께 커졌습니다.
그래서 조금 느리더라도 Gemini를 선택했습니다.
직접 파일 위치를 잡고 코드를 붙여넣는 과정에서, 비로소 이 프로젝트의 모든 파일과 섹션이 제 손안에 들어왔습니다.
"검색창 하나가
시스템을 바꾸기까지"
단순한 기능 구현에서 시작해, 구조적 리팩토링으로 이어지는 실제 대화 기록을 재구성했습니다.
실시간 검색 기능을 추가하고 싶어."
Step 1: MVP
별도의 /search 페이지를 만들고, 자바스크립트로 필터링 기능을 구현했습니다.
글 목록(Brewing) 페이지에 검색창을 합치는 게 더 자연스러울 것 같아."
Step 2: Integration
좋은 지적입니다. search.astro를 삭제하고, 기능을 blog/index.astro에 이식했습니다.
이 레이아웃을 404 페이지랑 태그 목록(Ingredients)에도 재활용하자!"
Step 3: Design System
레이아웃을 재사용하여 404 페이지와 Flavor(구 Tags) 페이지를 빠르게 제작했습니다.
1열 리스트로 바꿔서 제목이 더 잘 읽히게(Scanning) 하자."
Step 4: Final Polish
가로형 컴포넌트 PostRow.astro를 개발하여 가독성을 높이고, 모바일 최적화를 완료했습니다.
기능 하나를 구현하면서 페이지 통합, 디자인 시스템 확장, UI 리팩토링까지 이어졌습니다.
AI는 단순히 코드를 짜는 기계가 아니라, 당신의 아이디어를 발전시키는 페이스메이커입니다.
이제 당신만의 차를 우려낼 시간입니다.
기록 보기 (Brewing)