소개
본격적인 웹사이트를 만드는것에 앞서 이번 기수동안엔 기초 지식함양이 가장 중요하겠다는 자각을 했다. 그래서 이번 주도 쭉 기초 지식을 함양하며 그동안 배운 것을 나눠보고자 한다.
오늘 소개할 내용은 클로드코드+커서 조합으로 웹사이트를 제작할때 알아두면 좋을 꿀팁들이다.
진행 방법
화면 디자인 요청 프롬프트
클로드코드는 자연어로 명령했을때보다, 틀에 짜여진 형식으로 프롬프트를 줬을때 더 잘알아듣는다. 예를 들면 아래와 같이 한글로 XML포맷을 사용해서 명령하면 더 잘알아듣는다.
<메인화면>
<타이틀> 미술품 경매 사이트 </타이틀>
<홍보메세지> 세계적인 아티스트의 작품을 소장하세요 </홍보메세지>
<버튼 색상 = 빨간색 너비 = 버튼 텍스트 너비만큼> 새로운 작품 업로드 구독 </버튼>
</메인화면>
웹페이지 기본개념
정적웹페이지 : 미리 만들어진 HTML,CSS,JavaScript 파일을 그대로 보여주는 웹페이지
모든 사용자에게 동일한 내용 표시
서버, 데이터베이스 필요x
동적웹페이지 : 사용자의 요청이나 데이터에 따라 내용이 실시간으로 바뀌는 웹페이지
사용자마다 다른 내용 표시
백엔드서버와 데이터베이스 필요
Cloudflare
웹서비스를 운영할 서버를 제공한다.
Cloudflare pages(프론트엔드) : 로컬에 만든 웹사이트문서를 인터넷상에 배포한다.
Cloudflare workers(백엔드) : 로그인, API 연산등 필요할때만 딱 나타나서 일하고 사라짐. DB에서 데이터 가져오기, 복잡한계산 등 서버로직 수행
참고로 Cloudflare와 가장 호환이 잘되는 언어는 JavaScript와 TypeScript로, 이 외에는 아직 도입 된지 얼마 되지 않아 버그 발생에 유의해야 한다.
웹페이지 만들기 CLAUDE.md
웹페이지를 만들기 위한 기본 뼈대가 되는 CLAUDE.md 파일을 아래와 같이 마크다운 형식으로 직접 작성하여, 클로드가 이를 기반으로 만들도록 하면 보다 체계적인 프로젝트 구조를 가진 웹사이트를 만드는 것이 가능하다. 아래는 내가 만들 사이트의 CLAUDE.md 예시이다.
##프로젝트 : 미술품 경매 사이트
##목적 : 미술품을 구입하고 싶은 회원들의 정보와 구입 희망 가격을 입력 받은 후, 선정된 회원만 결제할 수 있도록 하는 사이트
##기술스택
- 프론트 엔드 : HTML, CSS, JavaScript, Tailwind CSS (정적파일)
- 백엔드 : JavaScript(Cloudflare Pages Function용)+ TypeScript
- 데이터베이스 : Supabase
- 로그인 : Clerk
- 결제 : PayPal
- 배포 : Cloudflare Pages+Cloudflare Pages Functions(workers)
##핵심규칙
- 보안기능을 철저히 구축
- 결제기능 완전히 독립모듈로 생성해서 섞이지 않게
##구조 (아래같은 형식으로 작성하면 해당 구조대로 프로젝트 카테고리를 만들어 작업한다.)
ArtAuctionSite/
├── public/ #정적파일(Cloudflare Pages)
│ ├── file_01.txt
├── functions/ #백엔드(Cloudflare Pages Functions(workers))
└──designs/ #XML 디자인 파일 (디자인파일 많아질 수 있으므로 따로 뺌)
결과와 배운 점
학교 다닐 때로 돌아간듯이 다시 기초부터 공부 하고 있다. 이번에 공부한 것 중 몇몇 개념들은 거의 10년도 넘은 옛날에 소프트웨어 공학 시간에 분명 배웠을 듯한데 다 까먹은 것 같다.
단순한 코더가 아닌, 설계자로서 구조를 볼 수 있는 안목이 바이브코딩에서는 무엇보다 중요한 자질인 것 같다. 그런데 10년전에 내가 봤던 전공 책들에는 나오지 않았던 컨텍스트 엔지니어링 지식들도 꽤나 많이 필요해서, 제대로 된 웹사이트를 만들기 위해서는 바이브코딩이라 하더라도 배워야할 것들이 정말 많음을 공부해보며 더 느끼게 되었다.
이번 스터디 기수에 제대로 된 웹사이트를 바로 만드는 것엔 실패했지만,(물론 이런 구조적 설계나 보안, 장기적 관점에서의 유지보수 등에 대한 생각 없이 자연어로 만들어줘하면 대충 기본적인건 만들어지는 것을 안다. 근데 그건 진정한 배움이 아닌 체험일 뿐이라고 생각했다) 이번 스터디가 끝난 2월부터는 배경지식 기초공사를 완료하고 본격적으로 만들어보려고 한다.
화이팅!ㅎㅎ
