"코딩, 개떡같이 말하면 개떡같이 짜줍니다"
우리는 지금까지 AI를 이용해 이미지도 만들고, 엑셀 자동화도 해냈다. 이제는 그 모든 결과물을 담을 '나만의 웹 서비스(홈페이지)'를 만들 차례다. 보통 웹사이트 제작을 외주 맡기면 최소 수십만 원이 든다. 하지만 최근 코딩 분야에서 챗GPT를 뛰어넘었다고 평가받는 '앤스로픽의 클로드(Claude 3.5 Sonnet)'가 등장한 이후, 코딩은 더 이상 암기가 아니라 '소통'의 영역이 되었다.
하지만 주의할 점이 있다. 클로드에게 대뜸 "홈페이지 만들어줘"라고 하면, 90년대 스타일의 촌스러운 코드를 던져준다. 원하는 고퀄리티 결과물을 얻으려면 클로드를 내 명령을 수행할 '수석 개발자(Senior Developer)'로 세팅하고, 정확한 설계도를 쥐여줘야 한다.
오늘부터 시작되는 [웹 서비스 런칭 3부작]의 첫 번째 시간, 클로드를 완벽한 코딩 에이전트로 변신시키고 사이트의 뼈대를 잡는 '설계의 기술'을 공개한다.
1. 왜 챗GPT가 아니라 '클로드(Claude)'인가?
"그냥 챗GPT한테 시키면 안 되나요?"라고 물을 수 있다. 물론 챗GPT도 훌륭하다. 하지만 웹 개발, 특히 디자인 영역에서는 '클로드 3.5 소넷' 모델이 압도적이다. 가장 큰 이유는 바로 '아티팩트(Artifacts)'라는 킬러 기능 때문이다.
- 챗GPT: 코드를 짜주면, 그 코드를 복사해서 내 컴퓨터 메모장에 붙여 넣고 저장해야 화면을 볼 수 있다. (번거롭다.)
- 클로드: 코드를 짜줌과 동시에 우측 화면에 '실시간 미리보기(Preview)'를 띄워준다. 즉, 내가 말한 대로 버튼이 만들어졌는지 1초 만에 눈으로 확인할 수 있다.
이 기능 덕분에 코딩을 전혀 모르는 비전공자도 화면을 보면서 "버튼 색깔 좀 바꿔봐", "폰트 좀 키워봐" 하며 실시간으로 디자인을 수정할 수 있다.
2. 왜 '페르소나(Persona)' 설정이 중요한가?
도구(클로드)가 준비되었다고 끝이 아니다. AI는 기본적으로 '질문에 답만 하는 기계'다. 웹 개발처럼 구조 설계, 디자인, 에러 수정이 복합적으로 필요한 작업에서는 단순한 질문으로 한계가 있다.
- 나쁜 예 ("홈페이지 만들어줘"): 디자인이 없거나 레이아웃이 깨진, 딱 기능만 작동하는 코드를 준다. (수정하다가 지쳐 포기하게 됨)
- 좋은 예 ("너는 10년 차 수석 개발자야"): 알아서 최신 유행하는 '다크 모드'를 적용하고, 모바일에서도 잘 보이는 '반응형'으로 짜고, 초보자가 이해하기 쉽게 주석(설명)까지 달아준다.
이것이 바로 프롬프트 엔지니어링의 핵심인 '에이전트화(Agentizing)'다. 이 설정을 처음에 한 번만 제대로 해두면, 이후부터는 "버튼 좀 예쁘게 해 봐"라고 대충 말해도 찰떡같이 알아듣는다.
3. 실전 Step 1: 클로드를 '수석 개발자'로 채용하기
이제 클로드(claude.ai) 채팅창을 켜고, 아래의 마법 주문을 입력하자. 이것은 Tech-Vibe가 수십 번의 테스트 끝에 만든 '개발 전용 시스템 프롬프트'다. (복사해서 그대로 쓰면 된다.)
[System Prompt: Senior Web Developer Persona]
Role: 너는 실리콘밸리 스타트업의 10년 차 수석 풀스택 엔지니어(Senior Full-stack Engineer)다.
Goal: 사용자의 요구사항을 바탕으로 즉시 실행 가능한, 모던하고 세련된 웹페이지 코드를 작성한다.
Coding Standards (코딩 원칙):
1. Single File: 배포 편의성을 위해 HTML, CSS, JavaScript를 별도 파일로 나누지 말고, 하나의 index.html 파일 안에 모두 포함해서 작성한다. (이게 핵심이다!)
2. Design: 디자인 감각이 없는 사용자를 위해, 별도 요청이 없어도 기본적으로 '모던함, 미니멀리즘, 반응형(모바일 호환), 다크 모드' 스타일을 적용한다.
3. Feedback: 코드를 작성하기 전에 사용자의 기획 의도에서 부족한 부분이 있다면 역으로 질문한다.
4. Language: 설명은 친절한 한국어로 하되, 주석(Comment)을 꼼꼼히 달아 초보자도 코드를 이해할 수 있게 한다.
이 프롬프트를 입력하면 클로드는 "알겠습니다. 저는 이제 당신의 수석 엔지니어입니다. 어떤 프로젝트를 시작할까요?"라며 자세를 고쳐 앉는다.
4. 실전 Step 2: 무작정 코딩 NO, '구조(Sitemap)' 잡기
개발자가 준비됐다고 해서 바로 코드를 짜달라고 하면 안 된다. 집을 지을 때도 설계도 없이 벽돌부터 쌓지 않지 않는가? 우리는 '기획자'가 되어 사이트의 뼈대를 먼저 잡아야 한다.
우리가 만들 목표는 '나만의 AI 포트폴리오 사이트'다. 다음과 같이 클로드에게 기획을 시켜보자.
추가 프롬프트:
"좋아. 우리가 만들 사이트는 'AI 크리에이터 포트폴리오'야. 방문자에게 내 작품을 보여주고, 연락을 유도하는 게 목적이야.
본격적으로 코딩하기 전에, 이 사이트에 어떤 메뉴(섹션)가 들어가면 좋을지, 각 섹션에는 어떤 내용이 배치되어야 할지 '사이트맵(구조)'을 먼저 제안해 줘."
이렇게 요청하였더니, 오히려 필자에게 추가 질문을 하였다. AI 크리에이터로서 어떤 활동을 하는지, 목표가 무엇인지 등을 물어보았다. 단순하게 입력된 내용만을 수행하는 것과는 다른 색다른 경험이다.
사전 질문에 다음과 같이 답변하였다.
답변:
사전 질문에 대한 답변이야
1. 최신의 AI기술을 이용하여 생산성을 높이거나 부족한 스킬 전문성을 보완하는 방법들을 소개하고 있어
2. 현재 블로그 포스팅은 20개 정도고 주에 1~2회 업로드하고 있어
3. 나는 AI업계에 일하고 있어서 이러한 툴들을 알아보고 써보는데 익숙하지만 비전문가들은 생소할 수 있을 거라고 생각해. 그래서 방문자들이 내 콘텐츠를 통해 다양한 AI 기술들을 접하고 활용할 수 있는 능력을 갖추도록 돕고 싶어
이제 클로드는 필자가 어떤 일을 하고 어떤 사이트를 만들기 원하는지 이해를 하기 시작하였고, 이를 기반으로 사이트 구조를 기획하였다. 디자인 방향도 제안해 주었는데 실제로 필자가 추구하는 컬러톤과 자주 쓰는 폰트까지 제안을 해줘서 깜짝 놀랐다. 10년 차 시니어 풀스택 엔지니어답게 전문적인 설계안을 제시하였다.
5. 다음 편 예고: 1분 만에 사이트가 튀어나온다
이제 모든 준비는 끝났다.
1) 클로드라는 최고의 AI 도구를 선택했고,
2) 10년 차 수석 개발자(에이전트)로 세팅을 마쳤으며,
3) 무엇을 만들지 설계도(사이트맵)까지 완성되었다.
다음 포스팅(2편)에서는 이 설계도를 바탕으로 "이대로 코드 짜줘" 한마디면, 실제로 작동하는 웹사이트가 눈앞에 펼쳐지는 마법 같은 과정을 보여주겠다. (클로드의 '아티팩트' 기능을 활용해 실시간으로 화면을 보며 수정하는 팁까지 공개한다.)
[준비물] 마음의 준비만 하면 된다. 코딩 지식은 여전히 0이어도 상관없다.