Claude Code로 스마트스토어 상세페이지 1시간 만에 완성
만들기
오늘 만들 것
스마트스토어와 쿠팡 파트너스를 시작할 때 가장 큰 벽은 상세페이지 제작입니다. 디자인을 배우지 않은 초보자가 포토샵을 붙잡고 오래 씨름하거나, 비싼 외주를 맡기는 건 부담이 큽니다. 이번 편에서는 Claude Code에게 일을 맡겨서 상품명과 특징 몇 가지만 적으면, 구매 전환을 노릴 수 있는 세련된 HTML 상세페이지를 바로 만들어주는 '상세페이지 생성기 웹앱'을 같이 만들어보겠습니다. 복잡한 서버 없이 웹 브라우저 창 하나만 띄워 바로 쓰는 방식이라 진입장벽도 낮습니다.
First Result In 5 Mins
5분 만에 첫 화면 보기: 빈 폴더 하나를 만들고 Claude Code를 켠 다음, 1줄 요청만으로 상세페이지 입력창 디자인을 브라우저에 띄웁니다.
만들기
Claude Code 실행하고 첫 뼈대 만들기
먼저 컴퓨터에 빈 폴더를 하나 만들고, 그 위치에서 터미널(CMD)을 연 뒤 `claude`를 실행합니다. 이어서 Claude Code에게 첫 화면 구성을 바로 짜달라고 요청합니다.
AI의 뇌 장착하기 (Claude API 연동)
첫 화면이 뜨면 이제 AI가 실제로 상세페이지 글을 작성하도록 연결해야 합니다. 사용자가 화면에서 직접 자신의 API 키를 넣고 안전하게 쓸 수 있게 기능을 추가합니다.
클립보드 복사 기능 및 기본 템플릿 다듬기
완성된 상세페이지 코드를 마우스로 드래그하지 않고 스마트스토어에 바로 가져갈 수 있게 원클릭 복사 버튼을 붙이고, 디자인 완성도도 더 다듬습니다.
확인하기
완성된 index.html 파일을 브라우저로 엽니다. 본인의 Anthropic API 키를 넣고, 상품명에 '저소음 사무용 무선 키보드', 특장점에 '조용한 타이핑감, 쫀득한 키감, 3개 기기 동시 연결'을 적은 뒤 '상세페이지 생성' 버튼을 누릅니다. 우측 미리보기에 세련된 카드 뉴스 형태의 상세페이지가 완성되어 나타나고, 복사하기 버튼을 눌렀을 때 메모장에 정상적으로 소스코드가 붙여넣어지면 성공입니다.
사용하기
스마트스토어 상품 등록 화면의 스마트에디터 ONE에서 우측 상단의 'HTML' 탭을 누른 후, 복사한 코드를 그대로 붙여넣고 다시 'Editor' 탭을 누르면 AI가 만든 상세페이지를 바로 상품 등록에 쓸 수 있습니다.
이런 글도 있어요
관련 검색어
- 🔍 Claude Code 사용법
- 🔍 Claude Code 비교
- 🔍 스마트스토어 사용법
- 🔍 스마트스토어 비교
- 🔍 상세페이지 사용법
- 🔍 상세페이지 비교
