[Claude Code] 스마트스토어에서 사용할 HTML 상세페이지 제작

📝 한줄 요약

노션에 작성해둔 AI 공간디자인 강의 정보를 Claude Code에게 던졌더니, 스마트스토어에 바로 붙여넣을 수 있는 HTML 상세페이지를 뚝딱 만들어줬다. (실제로 사용하지는 않았다)
바쁘시면 이것만 읽어도 돼요:

• Notion MCP 연결 하나로 Claude가 노션 페이지를 직접 읽고 상품 상세페이지 HTML을 생성해줌

• 스마트스토어 제약 조건(인라인 CSS만, JS 불가, 시스템 폰트만)을 알려줬더니 알아서 맞춰서 설계함

• 히어로 배너 → 핵심 정보 → 커리큘럼 → 강사 소개 → FAQ까지 섹션 구조도 스스로 잡아줌

• 이미지 URL 만료 문제도 Cloudinary 활용법까지 안내해줘서 해결

• 디자이너 없이, 코드 몰라도, 노션 링크 하나로 상세페이지 완성

🎯 이런 분들께 도움돼요

• 스마트스토어에 강의나 서비스 상품을 올리려는 1인 창업자/프리랜서

• HTML을 모르지만 직접 상품 상세페이지를 만들고 싶은 분

• 노션에 서비스 정보를 정리해뒀는데, 이걸 그대로 판매 페이지로 쓰고 싶은 분

😫 문제 상황 (Before)

스마트스토어에 강의 상품을 올려야 했다. 상품 정보는 이미 노션에 잘 정리돼 있었다. 강의명, 대상, 커리큘럼, 강사 소개, FAQ까지 다 있었다.
문제는 이걸 스마트스토어 상세페이지로 옮기는 작업이었다. 스마트스토어는 HTML로 상세페이지를 만드는데, 아무 HTML이나 되는 게 아니다. 인라인 CSS만 써야 하고, JavaScript는 아예 안 되고, 외부 폰트도 못 쓴다. 최대 너비도 860px로 제한된다. 디자이너한테 맡기자니 시간이 걸리고, 직접 하자니 HTML을 모른다.
노션에 다 있는 내용을 손으로 다시 옮겨 적고 꾸미는 것도 일이었다. 그래서 Claude Code에게 그냥 통째로 던져봤다.

🛠️ 사용한 도구

• 도구: Claude Code

• 모델: Claude Sonnet 4.6

• 연동: Notion MCP (Claude가 노션 페이지를 직접 읽을 수 있게 해주는 연결 도구), Cloudinary (이미지 호스팅)

🔧 작업 과정

노션 링크 하나로 상세페이지가 생겼다

노션 페이지 주소를 복사해서 이렇게 요청했다.

이 내용을 네이버 스마트 스토어 쇼핑몰에 올릴 수 있게 html로 디자인해줄 수 있어?
cloudinary에 올릴 거야

Claude가 Notion MCP를 통해 노션 페이지를 직접 열어서 읽었다. AI 공간디자인 5주 과정의 강의 정보, 커리큘럼, 강사 소개, FAQ 등 모든 내용을 가져왔다.
그러고는 스마트스토어 제약 조건에 맞게 설계를 시작했다. 외부 스타일시트 없이 인라인 CSS만 사용하고, JavaScript는 완전히 배제하고, 시스템 폰트만 쓰고, 최대 너비 860px 안에 맞췄다. 색상 팔레트는 딥 네이비(#1a1f3a)와 골드(#c9a84c)로 잡아서 고급스러운 느낌을 냈다.
섹션 구성도 알아서 잡았다. 히어로 배너로 시작해서 핵심 정보 카드, 이미지 갤러리, 추천 대상, 5회차 커리큘럼, 강사 소개, FAQ, 마지막 CTA(구매 유도 버튼)까지. 내가 구조를 지시한 게 아니라 Claude가 판매 페이지에 필요한 내용을 스스로 판단해서 배치했다.
결과물은 smartstore_product.html 파일로 저장됐다.

"파일은 어디 있지?" 라고 물었더니, 저장

된 폴더의 위치를 알려줬다.

Claude가 파일 위치를 바로 알려줬다.

그리고 스마트스토어에 붙여넣는 방법도 단계별로 안내해줬다.

복사는 어떻게 하는 거야? 현재 html은 어디에 저장되어 있지?

1. HTML 파일 열기 → 전체 선택(Ctrl+A) → 복사(Ctrl+C)

2. 스마트스토어 센터 → 상품 등록 → <> HTML 소스 버튼 클릭 → 붙여넣기
   여기서 이미지 문제가 하나 있었다. 노션에서 가져온 이미지 URL이 S3 임시 링크라 만료될 예정이었다.

3. Claude가 이 문제를 먼저 짚어주면서, Cloudinary(웹에 이미지를 제공해주는 저장소, 무료량이 넉넉한 편이다) 에 이미지를 업로드하고 URL을 교체하는 방법까지 안내해줬다. Cloudinary에 이미지 3장(image1_bfheks, image2_hwiiyg, image3_zzvxgs)을 업로드한 뒤 HTML의 이미지 주소를 새 URL로 바꾸면 끝이었다.

✅ 결과 (After)

Before vs After

결과물

• smartstore_product.html: 스마트스토어에 바로 붙여넣을 수 있는 완성된 상품 상세페이지

• 히어로 배너 / 핵심 정보 카드 / 이미지 갤러리 / 추천 대상 / 5회차 커리큘럼 / 강사 소개 / FAQ / CTA 전 섹션 포함

💬 이 과정에서 배운 AI 활용 팁

효과적이었던 것

1. 링크만 던져주기 — "이 노션 페이지 내용으로 만들어줘"만 해도 Claude가 직접 읽고 반영해줌

2. 제약 조건을 같이 알려주기 — "스마트스토어용"이라고 하니 알아서 인라인 CSS, JS 제거, 시스템 폰트, 너비 제한까지 맞춰줌

3. 모르는 건 바로 물어보기 — "복사는 어떻게 해?"처럼 사소한 것도 물어보면 단계별로 설명해줌

이렇게 하면 안 돼요

1. 이미지 URL 신경 안 쓰기 — 노션 이미지는 임시 URL이라 만료됨. 만든 뒤 Cloudinary 등에 이미지를 따로 올려야 함

2. HTML 파일 만들고 끝이라고 생각하기 — 스마트스토어 HTML 소스 버튼을 통해 붙여넣어야 하는 별도 단계가 있음

🌍 다른 업무에 적용한다면?

• 다른 플랫폼 상세페이지: 크몽, 탈잉, 클래스101 등 각 플랫폼의 제약 조건을 알려주면 그에 맞는 상세페이지 생성 가능

• 서비스 소개 랜딩페이지: 노션에 정리된 서비스 기획서를 그대로 랜딩페이지로 변환 가능

• 제안서 HTML화: 클라이언트에게 보내는 제안서를 웹 페이지 형식으로 만들 때도 동일하게 활용 가능

🚀 앞으로의 계획

이번에 만든 HTML을 기반으로 다른 강의 상품 상세페이지도 동일한 방식으로 만들 예정이다. 노션에 강의 정보를 잘 정리해두면 상세페이지 제작은 Claude에게 맡기는 흐름이 자리를 잡을 것 같다. 나중에 강의 종류가 늘어나면 템플릿을 하나 고정해두고 내용만 갈아끼우는 방식도 가능할 것 같다.

📋 재사용 가능한 프롬프트

프롬프트 1: 노션 페이지 → 스마트스토어 HTML 변환

[노션 페이지 URL]
이 내용을 네이버 스마트스토어에 올릴 수 있게 HTML로 디자인해줘.
스마트스토어 제약 조건에 맞게 만들어줘 (인라인 CSS만, JS 불가, 시스템 폰트, 최대 너비 860px).
색상은 [원하는 색상]으로 해줘.

프롬프트 2: 이미지 URL 교체

HTML 파일에서 노션 S3 이미지 URL을 Cloudinary URL로 교체해줘.
교체할 URL 목록:

• 기존: [노션 이미지 URL] → 새 URL: [Cloudinary URL]