왕초보의 Claude를 활용한 홈페이지 제작 기초 학습

소개

시도하고자 했던 것과 그 이유를 알려주세요.

회사 홈페이지를 직접 제작하여 온라인 홍보와 신규 고객 확보에 활용하고자 하였습니다.

기존에는 홈페이지 제작을 외주에 맡기는 것이 일반적이었지만, AI를 활용하면 직접 수정하고 관리할 수 있다는 점에 관심을 갖게 되었습니다.

이번 스터디에서는 Claude Code를 활용하여 홈페이지 제작 환경을 구축하고, 기존 기업 홈페이지를 분석하여 AI가 어떤 방식으로 홈페이지를 생성하는지 기초부터 학습하는 것을 목표로 하였습니다.

진행 방법

어떤 도구를 사용했고, 어떻게 활용하셨나요?

사용한 도구

• Claude Code

• Claude Desktop

• Node.js

• npm

• Designlang

• GitHub

진행 과정

1. Claude Desktop과 Claude Code의 차이점을 이해하고 개발 환경을 구성하였습니다.

2. Node.js와 npm을 설치 및 확인하여 Claude Code 실행 환경을 준비하였습니다.

3. GitHub 저장소를 생성하고 Claude Code와 연동하였습니다.

4. Designlang를 이용하여 Apple 홈페이지로 테스트를 진행한 후 한솔제지 홈페이지를 분석하였습니다.

5. 분석 결과를 기반으로 Claude가 바로씨앤피 홈페이지 초안을 HTML 형태로 자동 생성하였습니다.

6. 생성된 HTML 파일을 로컬 브라우저에서 확인하며 AI를 활용한 홈페이지 제작 과정을 학습하였습니다.

사용한 프롬프트

프롬프트 ① (디자인 분석)

터미널에서 아래 명령을 실행해줘.

npx designlang https://www.hansolpaper.co.kr

프롬프트 ② (생성된 파일 확인)

design-extract-output 폴더에 생성된 파일 목록을 보여주고,
각 파일이 어떤 용도인지 설명해줘.

프롬프트 ③ (홈페이지 초안 생성)

생성된 디자인 분석 결과를 참고하여
한솔제지 홈페이지를 그대로 복제하지 말고,
구조와 디자인 분위기만 참고해서
바로씨앤피 홈페이지 초안을 만들어줘.

회사 특징
- 백판지 롤 쉬트 가공 전문
- 제조 및 유통
- 컷팅기 2대 운영
- 납기까지 책임지는 제지 파트너

프롬프트 ④ (미리보기)

생성한 baro-cnp-homepage-draft.html 파일을
브라우저에서 열어서 미리 보여줘.

활용 이미지

① Node.js 설치 확인 화면

터미널에서 node -v를 실행해줘.

설치된 Node.js 버전은 v22.22.3입니다.

② Designlang 실행 화면

터미널에서 아래 명령을 실행해줘.

npx designlang https://www.hansolpaper.co.kr/

명령이 실행됐고 다양한 산출물 파일들을 생성했지만, 마지막 단계에서 오류가 발생했습니다.

결과: hansolpaper.co.kr 사이트에서 디자인 토큰/컴포넌트/모션 등 30개 이상의 파일을 추출 완료 (hansolpaper-co-kr-*.md/json/css/js 등)했으나, 마지막에 Extraction failed — The "string" argument must be of type string or an instance of Buffer or ArrayBuffer. Received undefined 오류로 종료됐습니다 (exit code 1).

파일들은 design-extract-output/ 폴더에 생성되었습니다. 대부분 산출물(디자인 토큰, 컬러/모션/타이포 등 33개 파일)은 정상적으로 만들어졌고, 마지막 한 단계(예: 스크린샷 저장 등으로 추정)에서만 Extraction failed 오류가 발생한 것으로 보입니다.

③ 한솔제지 홈페이지 분석 화면

design-extract-output 폴더에 생성된 파일 목록을 보여주고, 각 파일이 어떤 용도인지 간단히 설명해줘.

그중에서 한솔제지 홈페이지 디자인을 참고해 새 홈페이지를 만드는 데 가장 중요한 파일 5개를 골라줘.

오류가 난 anatomy.tsx나 prompts 파일은 일단 제외하고 진행해줘.

design-extract-output 폴더 파일 목록 (한솔제지 — hansolpaper-co-kr-*)

(anatomy.tsx, prompts/ 폴더는 요청대로 제외)

새 홈페이지 제작에 가장 중요한 파일 5개

요약 흐름: design-tokens.json(원천 데이터) → design-language.md(이해) → intent.json(구조 설계) → tailwind.config.js(구현) → preview.html(검증) 순으로 활용하면 됩니다.

궁금하신 게 있으면(예: 3번 대신 variables.css를 쓸지, 실제 프로젝트 스택이 무엇인지) 알려주시면 더 맞춰서 추천해 드릴게요.

④ Claude가 홈페이지 초안을 생성하는 화면

생성된 디자인 분석 결과를 바탕으로 한솔제지 홈페이지를 그대로 복제하지 말고, 구조와 디자인 분위기만 참고해서 바로씨앤피 홈페이지의 메인 화면 초안을 만들어줘.

회사 특징:

• 백판지 롤 쉬트 가공 전문

• 컷팅기 2대 운영

• 제조 및 유통

• 주요 취급 품목: 백판지, KLB, 크라프트, 올펄프류, 지관원지, 라이너지

• 핵심 문구: 납기까지 책임지는 제지 파트너

• 한솔제지 디자인 분석 결과를 참고하기 위해 핵심 파일들을 먼저 확인하겠습니다.

  브라우저 미리보기 창을 직접 열 수 없는 환경이라, 대신 Artifact로 게시해서 바로 확인하실 수 있게 하겠습니다.

  바로씨앤피 홈페이지 메인 화면 초안을 만들어 게시했습니다.

  디자인 방향: 한솔제지 분석 결과에서 "타이트한 컬러 팔레트·굵고 촘촘한 헤딩·플랫한 형태" 같은 구조적 특징만 가져오고, 색상·톤·모티프는 완전히 새로 설계했습니다.

  • 팔레트: 백판지 표면을 연상시키는 그레이시 아이보리 바탕 + 산업/설비를 상징하는 딥 스틸블루(주 액션 컬러) + 크라프트지 색을 그대로 가져온 브라운 앰버(포인트 컬러 하나로 절제해서 사용)

  • 타이포: 헤드라인은 굵은 산세리프, 스펙 수치·품목 코드는 모노스페이스 — "제지 스펙시트" 느낌을 의도

  • 레이아웃 모티프: 히어로에 컷팅선(가위 아이콘)이 있는 시트 스택 그래픽, 상단 통계 스트립은 선적 매니페스트(manifest) 형태

  구성 (한솔 구조 참고, 내용은 완전히 신규):

  1. 히어로 — "납기까지 책임지는 제지 파트너" 헤드라인 + CTA 2개

  2. 매니페스트 스트립 — 컷팅기 2대 / 취급품목 6종 / 제조·유통 2원화 / 단일 창구

  3. 사업영역 3카드 — 가공·제조·유통

  4. 취급품목 6종 그리드 — 백판지, KLB, 크라프트, 올펄프류, 지관원지, 라이너지

  5. 설비현황 — 커팅기 1·2호기 소개

  6. 진행 프로세스 — 입고→커팅→검수→포장→납품 (실제 순서라 번호 사용)

  7. 문의 CTA + 푸터 (연락처·주소는 예시 placeholder로 표시)

  라이트/다크 모드 모두 대응했고, 연락처·주소·사업자번호는 실제 정보로 교체가 필요한 예시값입니다. 로컬 파일로는 baro-cnp-homepage-draft.html에 저장되어 있습니다.

⑤ 생성된 홈페이지(baro-cnp-homepage-draft.html) 화면

ALT

한국어 텍스트가 포함된 웹 브라우저의 스크린샷

결과와 배운 점

배운 점

• AI를 활용한 홈페이지 제작은 코딩보다 개발 환경을 이해하는 것이 먼저라는 점을 배웠습니다.

• Node.js와 npm이 대부분의 AI 개발 도구의 기반이라는 것을 이해하게 되었습니다.

• Claude는 단순히 코드를 작성하는 것을 넘어 기존 홈페이지를 분석하여 새로운 홈페이지 초안을 생성할 수 있다는 점이 인상적이었습니다.

• 홈페이지 제작도 AI와 반복적으로 대화하면서 원하는 방향으로 개선할 수 있다는 점을 경험하였습니다.

시행착오

• Claude Desktop과 Claude Code의 차이를 이해하지 못하여 초기에 사용 방법이 혼동되었습니다.

• 로그인 만료로 Sandbox 오류가 발생하여 명령어 실행이 되지 않는 문제가 있었습니다.

• Designlang 실행 시 마지막 단계에서 오류가 발생하였으나, 대부분의 디자인 데이터는 정상적으로 생성되어 있다는 것을 확인하였습니다.

• Claude Desktop의 브라우저 미리보기 기능이 정상적으로 표시되지 않아 Artifact와 로컬 HTML 파일을 이용하여 결과를 확인하였습니다.

도움이 필요한 부분

• Claude를 이용한 홈페이지 제작 실무 활용 방법

• 효과적인 프롬프트 작성 방법

• GitHub를 이용한 홈페이지 배포 과정

• 반응형 홈페이지 제작 방법

앞으로의 계획

이번에는 홈페이지 제작 환경을 구축하고 AI를 활용한 기본적인 홈페이지 생성 과정을 학습하였습니다.

다음 단계에서는 바로씨앤피의 실제 회사 정보를 반영하여 홈페이지를 완성하고, GitHub를 통한 배포와 지속적인 수정·관리 방법까지 학습할 계획입니다.

도움 받은 글 (옵션)

• Claude Code 공식 문서

• Designlang 사용 가이드

• 지피터스 Claude 활용 스터디 자료

• 스터디원들의 실습 사례 및 질의응답