스마트스토어 상세페이지, "이미지 대신 텍스트"로 코딩하기 — 스마트에디터 ONE에서 안 깨지는 HTML 템플릿 만들기
소개
시도하고자 했던 것과 그 이유
농산물(정읍명품귀리 귀리쌀) 상세페이지를 Claude Code로 HTML 코딩해서 스마트스토어에 적용했습니다. 그런데 정작 스마트에디터 ONE으로 변환해 붙여넣자 곳곳이 깨졌습니다 — 원형 배지가 찌그러지고, 비율 그래픽이 통째로 사라지고, 둥근 모서리가 무시되는 식이었습니다.
이걸 계기로 목표를 다시 잡았습니다. 단순히 한 페이지를 고치는 게 아니라, "스마트에디터 ONE에서 변형되지 않는 코딩 기준"을 만들어 다른 상품에도 재사용할 수 있는 템플릿을 확보하는 것.
이 작업이 중요한 이유가 하나 더 있습니다. 네이버가 맥락 기반 추천 에이전트 N을 확대하고 있어서, 상세페이지가 이미지 덩어리면 봇이 상품 정보를 읽어갈 수 없습니다. 크롤링 가능한 텍스트 기반 상세페이지로 바꿔두는 것이 지금 시점에 필요한 대비라고 판단했습니다.
한국어 앱 스크린샷
🖼️ [이미지 1] 스마트스토어 적용 결과 캡처 — 깨진 부분(사라진 비율 그래픽, 찌그러진 번호 배지) 표시
진행 방법
사용 도구: Claude Code(최초 코딩) → GPT(플랫폼 기준 조사) → Claude 디자인(진단·수정) 조합
1단계 — 적용 결과 캡처 + 원본 코드로 진단 요청
캡처 이미지 2장과 원본 HTML이 든 로컬 폴더를 함께 첨부하고, 수정 전에 진단부터 요청했습니다.
이 코드를 스마트스토어에 적용한 결과 이미지야.
이미지를 분석한 후 가독성이 떨어지는 부분들을 어떻게 수정해야할지 제안해줘.
제안우선하고 수정은 요청이 있을때 해줘
Claude가 문제를 12개 항목으로 우선순위화해줬습니다. 핵심 발견: 코드에는 있는데 에디터가 삭제해버린 요소들(빈 span으로 그린 도트 그래픽, width/height로 만든 원형 배지), 모바일에서 붕괴되는 3열 레이아웃, 15px 작은 글자, 저대비 회색 캡션.
🖼️ [이미지 2] Claude의 12개 진단 제안 화면 캡처
밥 한 그릇과 함께 한국 웹사이트의 스크린샷
2단계 — 조건을 명시한 전체 수정 요청
너가 제안한 전부를 수정해줘. 특히 모바일에서 잘 보이도록 해야하고, 디자인 스타일을 변경해도 괜찮아.
이 코드를 템플릿으로 다른 상품도 코딩해야 하니까 신중하게 작업해줘.
지금 현재 디자인을 너가 원하는대로 변경해도 되지만, 기획 부분을 수정하면 안돼.
작업 전에 너가 더 알아야 할 점이 있다면 질문해
"기획은 건드리지 마라, 작업 전 질문해라"를 명시하니 Claude가 질문 폼을 먼저 보내왔고, 답변 후 모바일 우선 수정본(v2)이 나왔습니다. 하지만 붙여넣어 보니 라운드 박스가 여전히 적용되지 않는 등 만족스럽지 않았습니다.
3단계 — GPT로 플랫폼 기준 조사 → md 문서화
Claude의 추측에 맡기는 대신, GPT에 "네이버 스마트스토어 코딩 기준에 대해서 조사해줘"라고 요청해 네이버 공식 도움말 기반의 조사 결과를 받았고, 이를 Claude로 한 번 더 다듬어 매우 보수적인 코딩 기준 md 파일로 정리했습니다. (금지: script/style/iframe, 레이아웃용 table, flex/grid/position, border-radius, object-fit, aspect-ratio, calc… / 원칙: 단일 열 860px, div·p·span·img 기본 태그만, CSS가 제거돼도 의미가 유지되는 구조)
한국어 텍스트가 있는 검은 화면
🖼️ [이미지 3] 코딩 기준 md 문서 일부 캡처
4단계 — md 기준으로 최종 수정
이 md파일을 꼼꼼히 읽고 코드를 수정해줘.
이 기준으로 최종본(v3)이 완성됐습니다. 레이아웃용 <table> 사용, 다열 표는 전부 세로 나열형으로 재구성, DOCTYPE/head/body 없이 <div>부터 시작, 재사용을 위한 [교체] 주석 포함. 문구와 기획은 그대로 유지됐습니다.
한국어 텍스트가 있는 검은 화면
🖼️ [이미지 4] 최종 v3 미리보기 화면 (수정 전/후 비교면 더 좋음)
💻 코드 전문은 코드블록으로 첨부 (smartstore-3a.html)
결과와 배운 점
결과
적용 결과 많이 개선되었습니다. 다만 padding 값이 일부 적용되지 않는 등 여전히 해결되지 않는 부분이 있어 스마트에디터 ONE에서 약간의 수작업은 불가피합니다. 그래도 이 과정을 통해 최소한의 수작업만으로 상세페이지를 텍스트화 할 수 있는 기준을 확보했습니다.
배운 점 / 꿀팁
"제안 우선, 수정은 요청 시" — 단계를 나누면 AI가 문제를 체계적으로 정리해주고 수정 범위를 내가 통제할 수 있습니다.
결과 캡처 + 원본 코드를 함께 첨부 — 코드만 주면 에디터가 뭘 삭제하는지 알 수 없고, 캡처만 주면 정확한 수정이 안 됩니다.
플랫폼 제약은 AI의 추측에 맡기지 말 것 — 조사(GPT) → 문서화(md) → 적용(Claude)으로 역할을 나누고, 기준은 보수적으로 잡을수록 결과가 안정적입니다.
템플릿 재사용 지점에 [교체] 주석을 달아달라고 하면 다음 상품 작업이 빨라집니다.
시행착오
캡처에서 배경·테두리가 살아있는 걸 근거로 AI가 "border-radius도 유지된다"고 추론했지만 실제로는 무시됐습니다. AI의 렌더링 추론도 반드시 실제 붙여넣기로 검증해야 합니다.
빈 <span>으로 그린 그래픽은 에디터가 통째로 삭제한다는 것을 결과 화면을 보고서야 알았습니다.
도움이 필요한 부분
스마트에디터 ONE의 CSS 허용 목록이 공식 공개되지 않아, padding처럼 부분적으로 무시되는 속성의 정확한 조건을 아직 파악하지 못했습니다. 비슷한 경험이 있는 분들의 사례 공유 부탁드립니다.
앞으로의 계획
이번 템플릿으로 오트밀·선식 등 다른 상품 상세페이지 제작
복잡한 비교표·인증서는 860px 이미지, 나머지는 텍스트 HTML로 가는 혼합형 검증
에이전트 N·검색봇이 상품 정보를 잘 수집하도록 텍스트 구조(정보 순서·명칭) 지속 개선
도움 받은 글 (옵션)
네이버 스마트스토어 판매자 도움말: 상세설명 작성·권장 크기(faqId 3923), HTML 태그 제한(4414), 모바일 미리보기·외부 이미지(4178), 허용되지 않은 속성 필터(5305), 이미지·HTML 용량(13986), 이미지 업로드 형식(3378)
위 자료를 GPT로 조사·정리한 자체 md 문서(첨부)를 Claude 디자인에 업로드해 활용
