상세페이지 기획·디자인 전문 하오스튜디오

■ 핵심 요약 ① 타깃이 확실할수록 상세페이지는 제품 설명보다 고객 상황을 먼저 꺼냅니다. ② 공감 문장은 첫 화면 바로 다음 칸에, 상세 이미지 권장 가로 860px 안에서 읽히게 짭니다. ③ 리뷰·문의에 실제로 쓰인 말을 그대로 옮기면 공감 포인트가 만들어집니다. 안녕하세요, 하오스튜디오입니다. 화장품상세페이지는 타깃이 뚜렷할수록 제품 스펙보다 "이 사람이 지금 뭘 불편해하는지"를 먼저 적어야 끝까지 읽힙니다. 오늘은 실제로 진행한 화장품 상세페이지 제작 프로젝트로 공감 포인트를 어느 자리에 어떻게 넣었는지 짚어볼게요. 타깃이 확실한 브랜드, 첫 화면에 무엇을 먼저 놓아야 할까요? 타깃이 확실한 브랜드일수록 첫 화면에는 제품명이 아니라 "누구를 위한 제품인지" 한 줄을 먼저 놓는 게 맞습니다. 사려는 사람이 자기 얘기라고 느껴야 두 번째 화면으로 넘어가거든요. 여기서 말하는 공감 포인트는, 제품 기능을 설명하는 구간이 아니라 고객이 지금 겪고 있는 불편을 브랜드가 먼저 문장으로 꺼내 보여주는 구간이에요. 첫 화면은 목록에서 클릭을 만드는 대표이미지와도 이어집니다. 쿠팡은 상품 대표이미지를 정사각 비율 1,000 × 1,000px로 안내하는데요, 목록 썸네일에서 위아래가 잘리지 않게 하려면 첫 화면 문구를 이 정사각 안에 들어오는 길이로 미리 맞춰 잡아야 합니다. 문구를 길게 써 놓고 나중에 줄이면 줄바꿈이 어그러지기 때문이에요. 이번 프로젝트는 대용량 펌프형 보습 로션을 다루는 화장품 브랜드였습니다. 타깃이 "건조하고 거친 피부, 민감해서 아무거나 못 바르는 피부, 온 가족이 부담 없이 쓸 대용량을 찾는 사람"으로 이미 정리돼 있었고요. 그래서 첫 화면 다음 칸을 성분표가 아니라 체크 표시가 붙은 대상 문장 세 줄로 채웠습니다. 읽는 사람이 세 줄 중 하나에만 걸려도 자기 얘기가 되도록요. 시안을 보시면 흰 펌프 용기와 물이 튀는 연출컷을 하늘색·흰색 두 가지 색...

■ 핵심 요약 ① 인증 정보는 제품 특징 설명 바로 뒤 구간에 넣어야 끝까지 읽혀요. ② 상세 이미지 가로는 네이버 스마트스토어 권장 860px 기준으로 잡아요. ③ 특허증·시험성적서는 원본을 크게 얹지 말고 핵심만 도식으로 옮겨요. 안녕하세요, 하오스튜디오입니다. 상세페이지제작업체를 찾을 때 인증 받은 제품이라면, 특허·시험 결과·성분 근거를 어느 자리에 어떤 형태로 배치하는지부터 확인하시는 게 좋아요. 오늘은 실제로 진행한 화장품 상세페이지 프로젝트로 인증 정보를 어떻게 정리해 넣었는지 짚어볼게요. 인증 받은 제품, 특허·성분 정보는 어느 자리에 넣어야 할까요? 인증 정보는 맨 위나 맨 아래가 아니라, 제품 특징을 설명한 바로 뒤에 배치하는 구성이 가장 안정적이에요. 인증 정보 섹션은 특허증·시험성적서·원료 표준서처럼 제3자 기관이 확인해 준 사실을, 소비자가 한눈에 알아볼 수 있는 형태로 옮겨 놓은 구간이에요. 맨 위에 두면 아직 제품이 뭔지 모르는 상태라 그냥 넘기고, 맨 아래에 두면 결제 버튼을 이미 지난 뒤라 읽히지 않거든요. 대표이미지에 인증 문구를 얹는 것도 권하지 않아요. 쿠팡 대표이미지는 정사각 1:1, 1,000 × 1,000 px 권장인데 목록에서는 더 작게 줄어들어 작은 글자가 뭉개지거든요. 인증 이야기는 상세 구간에서 풀고, 대표이미지는 제품 형태만 또렷하게 보여주는 쪽이 낫습니다. 인증 정보를 놓는 자리 읽는 사람에게 일어나는 일 첫 화면 · 대표이미지 제품을 아직 모르는 상태라 근거로 읽히지 않고 장식처럼 지나감 제품 특징 설명 직후 "그래서 진짜예요?"라는 의심이 올라온 지점에서 바로 답이 됨 맨 아래 · 배송 안내 옆 구매 판단이 끝난 뒤라 스크롤에서 잘려 나감 이번에 진행한 화장품(립 틴트) 프로젝트도 같은 순서로 짰어요. 첫 구간에서 "컬러와 입술 케어를 동시에"라는 제품 성격을 한 줄로 말한 다음, 바로 다음 화면에 특허...

■ 핵심 요약 ① 브랜드 스토리는 문구가 아니라 섹션 순서로 전달돼요. ② 상세 이미지 가로는 네이버 스마트스토어 권장 860px 기준으로 잡아요. ③ 사진이 없다면 기획·촬영·디자인을 한 곳에 묶어야 흐름이 안 끊겨요. 안녕하세요, 하오스튜디오입니다. 상세페이지 기획부터 맡기면, 대표님 머릿속에만 있던 브랜드 스토리가 구매자가 스크롤하는 순서로 정리돼요. 오늘은 실제로 제작한 유제품 업종 상세페이지 프로젝트로 그 이야기를 페이지 흐름에 어떻게 앉혔는지 짚어볼게요. 브랜드 스토리를 상세페이지에 담는다는 건 뭔가요? 상세페이지 기획은 브랜드가 가진 이야기를 구매자가 스크롤하는 순서로 바꾸는 작업이에요. 문구를 감성적으로 다듬는 일이 아니라, 어떤 이야기를 몇 번째 화면에서 꺼낼지 자리를 정하는 일에 가깝습니다. 스토리가 강점인 브랜드일수록 오히려 페이지에서 손해를 보는 경우가 많아요. 대표님이 창업 배경, 원료를 고른 이유, 만드는 방식까지 다 갖고 계신데 그게 첫 화면에 통째로 쏟아지면 구매자는 읽지 않고 내려버리거든요. 스토리는 나누고 심어야 읽힙니다. 말로만 가진 스토리 "우리는 원료가 좋고, 이런 마음으로 만듭니다." 한 덩어리로 존재해서 어디서 꺼내야 할지 정해지지 않은 상태예요. 페이지에 앉힌 스토리 원료 이야기는 두 번째 화면, 만드는 방식은 세 번째, 쓰는 장면은 네 번째로 쪼개져 각 화면에 한 문장씩 얹힌 상태예요. 서울 동대문구 스튜디오에서 진행한 이번 유제품 업종 프로젝트가 딱 그런 경우였어요. 위 시안을 보시면 화면마다 01, 02, 04처럼 번호를 붙여 네 개 구간으로 나눠 놓았는데요. 번호를 매긴 이유는 디자인 장식이 아니라, 브랜드가 하고 싶은 이야기를 한 구간에 하나씩만 배정하기 위해서였습니다. 그래서 첫 구간은 원유 그대로라는 원료 이야기, 두 번째 구간은 요리에 쓰는 장면, 마지막 구간은 상품 구성으로 자리를 갈랐어요. 두 번째 구간 배경에 초원과 ...

■ 핵심 요약 ① 사진과 영상은 같은 촬영일에 함께 찍어야 톤이 어긋나지 않아요. ② 상세페이지 이미지는 가로 860px 기준, 영상은 세로 9:16을 같이 뽑아둬요. ③ 촬영 전에 영상에 넣을 동작 장면을 미리 정해두면 재촬영이 없어요. 안녕하세요, 하오스튜디오입니다. 상세페이지와 제품 소개 영상을 동시에 맡길 곳을 찾는다면, 촬영과 디자인이 한 곳에서 이어지는지를 먼저 보셔야 해요. 오늘은 실제로 진행한 소스 제품 상세페이지 프로젝트를 꺼내, 사진과 영상을 한 번에 뽑을 때 무엇을 맞춰두는지 짚어볼게요. 상세페이지와 제품 소개 영상, 한 곳에서 같이 만들면 뭐가 달라질까요? 한 곳에서 같이 만들면 같은 촬영 세팅에서 사진과 영상 소스를 동시에 확보할 수 있다는 점이 가장 크게 달라져요. 제품 소개 영상은 상세페이지가 글과 사진으로 설명하는 내용을 움직임으로 다시 보여주는 짧은 영상 콘텐츠예요. 그래서 두 결과물은 원래 같은 조명, 같은 배경, 같은 소품에서 나와야 자연스럽습니다. 촬영과 디자인을 따로 맡기면 문제가 생기는 지점이 정해져 있어요. 사진은 A 스튜디오의 따뜻한 조명, 영상은 B 업체의 차가운 조명으로 찍히면 같은 페이지 안에서 제품 색이 달라 보입니다. 게다가 영상 쪽에서 "이 장면이 더 필요하다"는 요청이 나와도, 촬영이 이미 끝난 뒤라 제품을 다시 보내고 세팅을 다시 잡아야 하죠. 따로 맡길 때 사진·영상 조명 톤이 어긋나고, 장면이 빠지면 제품을 다시 보내 재촬영해야 해요. 대표이미지 정사각 1,000 × 1,000px과 영상 썸네일의 제품 각도가 서로 달라지기도 합니다. 한 곳에서 맡길 때 한 세팅에서 스틸을 찍고 그대로 영상을 이어 담아요. 대표이미지·상세 이미지·영상 썸네일이 같은 각도로 정리돼 페이지 위에서 따로 놀지 않습니다. 이번 프로젝트는 소스 업종의 액상 제품이었어요. 검은 소스가 담긴 병에 오렌지색 라벨과 캐릭터가 들어간 제품이라, 배경을 크림빛과 베...

■ 핵심 요약 ① 육류 선물세트는 부위 이름과 중량을 한 표로 묶어 첫 화면 아래에 올린다. ② 상세 이미지 가로는 860px 기준으로 잡아야 표 안 글자가 뭉개지지 않는다. ③ 부위별 사진을 표의 각 줄 옆에 붙이면 글만 읽을 때보다 이해가 빠르다. 안녕하세요, 하오스튜디오입니다. 육류 선물세트 상세페이지는 어떤 부위가 몇 g씩 들어 있는지를 스크롤 없이 한 화면에서 확인시켜 주는 게 승부처예요. 오늘은 실제로 제작한 세트 구성형 상세페이지 프로젝트를 통해 구성과 중량 정보를 어떻게 한 표에 담았는지 짚어볼게요. 육류 선물세트 상세페이지, 부위와 중량은 어디에 넣나요? 부위와 중량은 대표 이미지 바로 아래, 세트 구성표 한 덩어리로 묶는 자리가 가장 잘 읽혀요. 선물세트를 사는 사람은 맛보다 "얼마짜리를 누구한테 보낼 수 있는가"를 먼저 계산하거든요. 상세페이지는 제품 정보를 위에서 아래로 한 번에 훑어 내려가는 세로형 이미지 문서라서, 궁금한 정보가 아래쪽에 흩어져 있으면 그 지점까지 내려오기 전에 창을 닫아요. 표를 만들기 전에 대표 이미지부터 정해 두는 게 순서예요. 쿠팡은 상품 대표이미지를 정사각 1:1, 1,000 × 1,000px로 안내하는데, 목록에서 여러 상품과 나란히 줄 서는 칸이라 비율이 다르면 잘려 보이기 때문이에요. 이 한 컷에는 세트 전체를 담고, 부위별 디테일과 중량은 아래 표로 넘기면 역할이 겹치지 않아요. 위 시안은 이번에 제작한 생활용품 세트 상세페이지 프로젝트예요. 세트가 두 가지 용량으로 나뉘는 제품이라, 페이지 후반에 "실용적인 세트 패키지 구성"이라는 이름의 표를 따로 짰어요. 왼쪽 줄에 작은 용량, 오른쪽 줄에 큰 용량을 놓고 용량·1회 사용량·사용 환경을 같은 높이로 맞춰, 둘 중 무엇을 살지 눈으로 바로 비교되게 만든 구성이에요. 육류 선물세트라면 이 자리에 부위명·g 중량·포장 단위가 들어갑니다. 구분 정보를 문장으로 풀어 쓸 때 ...