01 / Context
무엇을 해결할 것인가.
줄눈 재료와 시공 방식에 따라 결과가 달라집니다. 고객이 소재의 특성과 시공 전후의 차이를 비교할 수 있는 정보가 필요합니다.
줄눈 시공의 소재·정밀도·현장 결과를 보여주고 지역 상담을 받는 시공 포트폴리오 홈페이지.
02 / Direction
프로젝트를 바라본 방향.
소재별 설명과 시공 전후 비교, 작업 순서를 중심으로 구성했습니다. 운영자가 작업 사례를 계속 게시할 수 있도록 콘텐츠 관리 기능을 연결했습니다.
결과를 같은 장면에서 비교
시공 전후를 따로 나열하는 대신 같은 장면 위에서 비교합니다. 사용자가 슬라이더를 움직이며 변화의 경계를 직접 확인합니다.
소재와 공정을 연결
소재의 특성에서 현장 판독, 소재 설계, 시공, 검수로 이어집니다. 소재 이름을 나열하는 대신 선택의 이유와 작업 기준을 설명합니다.
작업 기록을 계속 쌓는 구조
브랜드 화면은 유지하고 글과 사진을 직접 게시하게 했습니다. 완성된 사이트 안에 새로운 현장의 기록이 계속 축적됩니다.
03 / Experience
사용자의 다음 행동을 설계하다.
재료와 공정 설명, 시공 전후 비교, 작업 포트폴리오를 연결했습니다. 각 사례에서 작업의 차이를 살펴보고 전화 상담으로 이어지도록 구성했습니다.
- 01브랜드·시공 분야↓
- 02소재 특성 확인↓
- 03시공 전후 비교↓
- 04사례·공정 탐색↓
- 05전화 연결↓
04 / Making
경험을 실제 시스템으로.
React·TypeScript로 브랜드 화면을 구성하고 사진과 작업 이야기를 Site Studio에 연결했습니다. 공개 홈페이지는 승인된 정적 게시본으로 제공합니다.
05 / In detail
구현의 디테일.
↔BeforeAfter전체 기능 보기 +
- 시공 분야/소재 소개
- 다수 현장 포트폴리오
- 슬라이더로 시공 전후 비교
- 현장 판독→소재 설계→시공→검수 안내
- 전화 상담
- 작업 이야기 목록·글·사진·대표사진·초안/게시
06 / Intelligence & automation
인터랙션과 자동화.
콘텐츠 수정, 검토와 게시를 운영 흐름으로 연결했습니다. 운영자가 승인한 글과 사진을 홈페이지에 반영합니다.
07 / Outcome
그래서, 가능해진 일.
재료·공정·시공 사례를 탐색하는 홈페이지와 작업 이야기를 직접 게시하는 운영 환경을 구성했습니다.
프로젝트 직접 보기 ↗08 / Continuity
만든 이후의 시간까지.
Site Studio에서 작업 이야기와 대표 사진을 작성·수정·게시합니다. 사이트별 권한으로 접근을 제한하고 초안과 게시 버전을 구분합니다.
PAPA Site Studio ↗