안녕하세요 MCP 스터디 버디 진여진입니다 🙇♂️
오늘은 웹 사이트 만들 때 실패율을 줄이는 여러 방법을 소개드립니다.
🐳지난 수업
지난 수업을 클로드 MCP 와 Claude Code 를 설치,
어떤 사이트를 만들지 기획을 목표합니다.
https://www.webjangi.com/artwork
래퍼런스를 가지고 다지인 가이드를 만들어 안정적으로 개발을 진행합니다.
디자인 가이드를 잘 만들려면, 웹사이트 캡쳐를 잘 해야하는데요
어떻게 캡쳐하는지 사례를 공유합니다.😎
🏠웹 사이트 캡처를 하는 여러 방법들
1. 네이버 브라우저 Whale 의 전체 캡처
웨일 브라우저의 해당 아이콘 + 전체 화면 복사를 하시면 바로 캡쳐가 가능합니다
이 방법이 가장 편하죠? 🤣
2. Chrome 개발자 모드 활용
다음은 크롬 개발자 모드에서 전체 페이지를 캡처하는 방법을 진행합니다
한국어의 스크린 샷
F12 개발자 모드를 활성화 한 다음
Ctrl + Shift + P → 옵션을 선택합니다
그리고 복사~
캡쳐하는 여러 방법 중 이런 방법도 있다는 것도 참고해 주세요 😊
3. Chrome 확장 플러그인 사용
https://chromewebstore.google.com/detail/gofullpage-full-page-
scre/fdpohaocaechififmbbbbbknoalclacl?hl=ko&utm_source=ext_sidebar
구글 확장 플러그인을 설치하고 이용해주시면 됩니다.
여러 캡처 플러그인이 있어 검색해보시고 마음에 드신 플러그인 사용해주시면 돼요
지금처럼 플러그인 사용하게 되면, 자동적으로 Loading 이 실행이 되고
해당 사이트 전체를 캡쳐하게 됩니다.
4. Element 복사해 사이트 구조 파악하기
F12 - 전체 html ->
...->copycopy element이대로 아무 LLM 에게 다가갑니다 - 저는 무료인 AI Studio 이용했어요
한국 웹 사이트의 스크린 샷
프롬프트 :
`웹 사이트 구조 파악해줘 + Ctrl + v
그럼 이렇게 추출할 웹 사이트의 구조 파악도 가능합니다
응용 : 다이어그램, 머메이드도 만들어줘
프롬프트 : 해당 사이트 구조를 다이어그램으로 출력해줘
이렇게 출력도 가능합니다
사이트 구조 이해에 도움이 될 수 있으니 참고해주세용
📚 디자인 가이드 만들기
이젠 vscode 와 Claude code 에서 작업을 진행합니다. (cursor, 다른 방법도 가능해요)
해당 이미지를 ide 에 첨부 -> 디자인 가이드를 만들어봅니다.
반가워 "첨부파일.png" 파악해서 디자인 가이드 알려줘
이럼 디자인 가이드 나옵니다
이걸 바탕으로 구체적인 코딩 진행하세면 좋아용
👌템플릿을 활용하자 : shadcn/ui
바이브코딩도 그냥 만들라고 하면 어렵습니다
이미 만들어진 템플릿 이용을 이용하는 것도 방법이에요
해당 사이트는 무료로 이용할 수 있는 유명한 템플릿 이라고 생각해주시면 됩니다.
위의 3개의 도구로 만들어진 밀키트(?) 라고 보시면 돼요
사이트 가이드에 맞게 설치를 진행하고, 작업을 이어가주시면 됩니다.
해당 사용법 문서 있어서 따라하시면 됩니다
그냥 cli 다운도 되는데 우리 클로드 코드 써먹으면 편해요
프롬프트 : 이거 설치 좀 해줘 : gitgub 주소
그럼 지금의 폴더처럼 자동으로 다운이 받아집니다.
이렇게 다운받아진 패키지를 가지고 작업을 진행하면 됩니다
그럼 외부 문서 읽어도 되냐고 묻는데 전부 Yes 해주시면 돼요
이럼 패키지를 설치하고 여기에서 작업을 진행하면 됩니다
라이브러리와 함께 간단한 ui 그럴싸하게 만들기
클로드코드를 사용하니까
@를 이용해 맥락을 제공하고 작업을 진행합니다여담이지만, 바이브코더가 되어 가장 좋은 점은
어떤 일이든 테스트를 해볼 수 있다는 점
오픈소스를 체험할 수 있다는 점인 것 같습니다
거인의 어깨를 이용할 수 있다는 점이 너무 좋아요
이렇게 웹 사이트가 나왔다고 합니다
그럼 나름? 원샷 프롬프트라도 괜찮은 사이트가 나오게 됩니다
디자인 가이드 + 라이브러리로 실패율을 줄이는 웹사이트 개발 진행합니다 🙂
