일본 핸드메이드 액세서리 브랜드 ancoro의 브랜드 홈페이지입니다. 화면 설계부터 개발, 배포까지 혼자 진행했고 ancoro.shop 도메인으로 운영 중입니다. [이렇게 만들었습니다] 1) 파일 하나로 완결되는 구조로 만들었습니다. 사진 23장을 페이지 안에 넣어 외부 이미지 서버 없이 동작하고, 파일 하나만 올리면 배포가 끝납니다. 매달 나가는 솔루션 비용이 없습니다. 2) 일본어와 한국어를 헤더 버튼으로 전환하게 했습니다. 기계 번역이 아니라 언어별로 문구를 따로 썼고, 고른 언어는 다음 방문에도 유지됩니다. 3) 화면 크기에 따라 레이아웃이 다섯 단계로 바뀌고, 쓰는 분 기기의 다크모드 설정을 따라 색이 자동으로 바뀝니다. 4) 주문 폼을 직접 만들었습니다. 상품과 옵션을 고르면 금액이 바로 계산되고, 주문 내용을 한 번에 복사해 메신저로 보낼 수 있습니다. 5) 스크롤에 따라 요소가 자연스럽게 나타나도록 처리했고, 화면 낭독기를 위한 설명을 26곳에 넣었습니다. 6) 메신저나 SNS에 링크를 붙였을 때 미리보기 이미지와 문구가 제대로 뜨도록 설정했습니다. [구성] 한 페이지 안에 섹션 9개(첫 화면, 라인업, 상품 3종 상세, 갤러리, 주문 안내, 자주 묻는 질문, 브랜드 소개), CSS 388줄, JavaScript 197줄, 화면 분기 5단계 [사용 기술] HTML, CSS, JavaScript. 프레임워크 없이 직접 작성했습니다. [이런 분께 맞습니다] 쇼핑몰 솔루션의 정해진 틀 말고 브랜드 분위기를 그대로 살린 페이지가 필요하신 분, 해외 고객을 함께 받아야 해서 두 개 이상 언어가 필요하신 분, 매달 나가는 비용 없이 오래 두고 쓸 페이지를 원하시는 분께 맞습니다. 지금 쓰시는 이미지와 문구만 주시면 어느 정도 규모가 될지부터 말씀드리겠습니다.

브랜드 홈페이지 첫 화면. 브랜드 분위기에 맞춰 서체와 색을 직접 정했습니다.

헤더 버튼 하나로 일본어와 한국어가 전환됩니다. 문구는 언어별로 따로 썼습니다.

화면 크기에 따라 레이아웃이 다섯 단계로 바뀌고, 기기의 다크모드 설정을 따라갑니다.

한 페이지 안에 섹션 9개. 주문 폼은 금액이 바로 계산되고 내용을 한 번에 복사할 수 있습니다.