CASE 57메가폰 봉천점2026.04

블로그 후기처럼 읽히는
휴대폰 매장 랜딩

서울 봉천동 알뜰폰 매장을 위해 만든 모바일 랜딩 3개 시안 중 블로그 후킹형 시안입니다.

업종: 알뜰폰·휴대폰 매장 (서울 관악구 봉천동)
형태: 모바일 랜딩 3시안 중 블로그 후킹형
구성: 글 요약 목차 · 직접 가본 후기 · 받아본 가격
좋았던 점/아쉬운 점 · 방문 전 꿀팁 · 하단 3CTA
기술 스택: 모바일 퍼스트 HTML/CSS · Vanilla JS 모달 · Pretendard 웹폰트 · gpt-image-1.5 일러스트

메가폰 봉천점 데스크탑·모바일 화면 — PENNYPAGE WORKS · CASE 57

01과제

무엇을 받았고, 무엇을 했나

휴대폰 성지를 찾는 고객은 광고보다 블로그 후기를 먼저 검색합니다. 그래서 네이버 블로그 글처럼 읽히는 구성에 목차·모델별 가격표·좋았던 점/아쉬운 점·방문 팁을 넣고, 하단 전화·예약·카톡 3개 CTA를 Vanilla JS 모달로 연결했습니다.

시세표 직판형·브랜드 랜딩형·블로그 후킹형 3개 시안을 한 번에 제작하고, 1차 피드백에서 폰트·카드 계층·히어로 이미지를 다듬은 구성으로 완성했습니다.

핵심 — 광고가 아니라 후기처럼고객이 먼저 찾아 읽는 블로그 글의 형식을 그대로 빌려, 읽다 보면 하단 예약·카톡 버튼에 닿도록 구성했습니다.

02화면

히어로가 아니라 실제로 일하는 구간

글 요약 목차 — 블로그 글 구성 — 01글 요약 목차 — 블로그 글 구성

모델별 가격표 · 좋았던 점/아쉬운 점 — 02모델별 가격표 · 좋았던 점/아쉬운 점

사은품 안내 · 방문 전 꿀팁 — 03사은품 안내 · 방문 전 꿀팁

본문 — 카툰 일러스트를 넣은 후기 단락 — 04본문 — 카툰 일러스트를 넣은 후기 단락

03구성

이 사이트에 들어간 것

01
블로그형 글 레이아웃제목·작성자·조회수까지 블로그 글 형식
02
글 요약 목차5개 소제목 미리보기
03
카툰 4컷 일러스트gpt-image-1.5 생성
04
모델별 가격 비교표번호이동·기변 가격 나란히
05
좋았던 점/아쉬운 점 카드장단점 2단 카드
06
방문 전 꿀팁체크리스트형 4항목
07
예약·카톡 상담 모달Vanilla JS 모달
08
모바일 하단 3CTA전화·방문 예약·카톡

메가폰 봉천점 모바일 전체 화면

모바일 · 스크롤해서 보기

제작 당시 화면을 보존했습니다.

미러본은 납품 시점 화면을 그대로 보존한 사본입니다.

미러본 보기 제작 문의