실제 운영 중인 미용실 브랜드 웹사이트를 디자인하고 개발한 사례입니다. 사진 중심의 반응형 화면에 갤러리 인터랙션과 콘텐츠 편집 기능을 결합하고, Next.js 기반으로 공개 화면부터 관리 기능까지 구성했습니다.
Client work
Live website
제품 경험
실제 운영 중인 미닝의 공식 웹사이트를 디자인하고 개발했습니다. 홈 화면은 큰 사진과 타이포그래피, 공통 내비게이션을 중심으로 구성했습니다. Next.js와 React로 페이지를 나누고, Tailwind CSS로 화면 높이에 맞춘 레이아웃과 요소 배치, 화면 크기에 따라 달라지는 글자 크기를 적용했습니다. 아래에는 소개, 움직이는 갤러리, 이미지 목록, 인터랙티브 후기 화면을 각 섹션의 구현 설명과 함께 담았습니다.
소개 — Next.js Image로 인물 사진을 표시하고, Tailwind CSS의 화면 고정 레이아웃과 반응형 글자 크기를 적용했습니다. 사진 위에 문구를 겹쳐 놓고 스크롤에 따라 화면이 이어지도록 구성했습니다.
Gallery Snippets — GSAP으로 사진 카드가 끊김 없이 가로로 흐르게 하고, 화면 크기가 바뀌면 이동 거리를 다시 계산합니다. 마우스나 키보드 포커스에 따라 사진을 전환하고, 선택한 카드의 갤러리 분류로 연결했습니다.
갤러리 목록 — React로 카테고리 선택과 12개씩 불러오는 목록을 관리했습니다. Tailwind CSS의 반응형 그리드에 Next.js Image를 배치하고, 이미지 로딩 표시와 마우스 오버 효과를 적용했습니다.
Street Notes — CSS sticky로 후기 장면을 화면에 유지하고, 파노라마 배경과 캐릭터 버튼을 겹쳐 배치했습니다. 길 전환과 좌우 이동, 캐릭터를 눌러 후기를 여는 조작을 화면 안에 구성했습니다.
할 수 있는 것
홈·소개: 반응형 타이포그래피, 사진과 문구의 겹침, 스크롤 구간별 화면 고정.
Gallery Snippets: GSAP 반복 이동, 사진 전환, 갤러리 분류 연결.
갤러리 목록: 카테고리 필터, 나누어 불러오는 이미지 목록, 반응형 그리드.
Street Notes: 파노라마 장면, 캐릭터 버튼, 길 전환과 좌우 이동.
운영 관리: 인라인 문구 편집, 이미지 업로드, 서버 저장.
동작 방식
서버에서 첫 화면에 필요한 콘텐츠를 불러와 클라이언트의 콘텐츠 상태에 전달합니다. 편집 요청은 서버 API를 거쳐 Prisma·PostgreSQL에 저장하고, 조회 결과는 Redis로 캐시합니다. 저장할 때 관련 캐시를 비워 이후 조회에 변경된 내용이 반영되도록 구성했습니다.
프라이버시 · 로컬 운영 모델
방문자용 화면과 운영자의 콘텐츠 편집 흐름을 구분했습니다. 편집 도구는 관리자 모드에서 표시하고, 콘텐츠를 저장하는 API에서도 관리자 세션을 확인합니다. 화면 제작과 함께 실제 운영에 필요한 관리 흐름까지 개발한 사례입니다.
출시 현황
mininghair.com에서 실제 운영 중입니다. 첨부 화면은 운영 사이트를 직접 캡처한 것으로, 이 프로젝트에서는 사이트의 구조와 구현, 디자인을 소개합니다.
