PENNY PAGE
CASE 39古友 고우성수

성수동 솥밥집을
4개 국어로 보여 주는 한 장

컨셉 작업 — 성수동 한식 솥밥집을 주제로 만든 원페이지입니다.

업종
요식업 · 한식 솥밥 (서울 성수동)
형태
컨셉 시안 · 원페이지 · 다국어
구성
소개 · 대표 솥밥 · 반찬 한 상 · 공간
방문 후기 · 오시는 길
기술 스택
반응형 HTML/CSS · Vanilla JS · 다국어 i18n · Noto Serif KR
古友 고우성수 데스크탑·모바일 화면
PENNYPAGE WORKS · CASE 39

01과제

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

성수동은 외국인 방문객이 많아 메뉴와 위치를 여러 언어로 보여줘야 합니다. 그래서 Vanilla JS i18n으로 한국어·영어·중국어·베트남어를 버튼 하나로 전환하게 하고, 네이버 지도 길찾기와 전화 예약 버튼을 하단에 두었습니다.

실사 사진 중심으로 대표 솥밥·정갈한 반찬·공간(간판·실내·메뉴판)·방문 후기·오시는 길을 원페이지에 담았습니다.

핵심 — 버튼 하나로 4개 국어KO/EN/CN/VN 전환 버튼 하나로 메뉴와 위치 안내가 바뀝니다. 길찾기와 전화 예약은 하단에 모았습니다.

02화면

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

대표 솥밥 메뉴 카드
01대표 솥밥 메뉴 카드
공간 — 간판·실내·메뉴판
02공간 — 간판·실내·메뉴판
방문 후기
03방문 후기
오시는 길 — 네이버 지도 · 전화 예약 버튼
04오시는 길 — 네이버 지도 · 전화 예약 버튼

03구성

이 사이트에 들어간 것

  • 01
    4개 국어 전환KO/EN/CN/VN · Vanilla JS i18n
  • 02
    대표 솥밥 메뉴 카드실사 사진 · 가격 표기
  • 03
    반찬 한 상 소개솥밥 주문 시 기본 제공 안내
  • 04
    공간 갤러리간판·실내·메뉴판 실사
  • 05
    방문 후기별점 카드
  • 06
    네이버 지도 길찾기외부 지도 연결 버튼
  • 07
    전화 예약 버튼tel: 링크
  • 08
    스크롤 등장 애니메이션섹션별 순차 등장
古友 고우성수 모바일 전체 화면

모바일 · 스크롤해서 보기

컨셉 작업입니다.

특정 고객 없이 업종 문법을 연구하려고 만든 시안입니다.