프로젝트 배경
1) 문제점 가상의 주거 리노베이션 스튜디오를 위한 자체 프로젝트로, 다음을 주요 해결 과제로 설정했습니다. - 공간 사진만 나열하면 프로젝트별 설계 의도와 특징을 파악하기 어려움 - 주거 유형에 맞는 사례를 찾고 상세 정보를 확인할 수 있는 탐색 구조가 필요함 - 관심 프로젝트 확인 후 상담으로 이어지는 동선이 필요함 - 대형 이미지 중심의 디자인에서도 모바일 가독성과 사용성을 확보해야 함
프로젝트 성과
핵심 화면 6종 및 프로젝트 상세 8개 구현
메인, 프로젝트 목록·상세, 서비스, 스튜디오, 상담 화면을 제작하고 8개 공간 사례의 해법·재료·갤러리를 구성했습니다.
화면 너비에서 반응형 레이아웃 검증
360px부터 1440px까지 화면 너비에서 주요 페이지의 가로 넘침을 점검하고, 모바일 메뉴와 갤러리 사용성을 확인했습니다.
프로젝트 탐색부터 상담까지 연결 흐름 구현
유형별 프로젝트 필터와 URL 상태 유지를 구현하고, 상세 페이지에서 선택한 프로젝트가 데모 상담 폼에 자동 반영되도록 연결했습니다.
핵심 기능
진행 단계
기획 및 사이트 구조 설계
2026.08.
주거 리노베이션 스튜디오를 주제로 타깃과 제작 범위를 정하고, 프로젝트 탐색부터 상담까지 이어지는 사이트 구조와 사용자 동선을 설계했습니다.
프로젝트 상세
1) 포트폴리오 소개 - 서비스 카테고리: 주거 리노베이션 스튜디오 홈페이지 - 메인 타깃: 주거 리노베이션을 검토하며 포트폴리오, 작업 과정, 상담 경로를 한 사이트에서 확인하려는 고객 - MORROW SPACE는 공간 사진과 프로젝트 서사를 중심으로 브랜드 경험부터 상담 신청까지 연결한 반응형 웹 포트폴리오입니다. 2) 작업 범위 - 참여 범위: 사이트맵과 사용자 흐름 기획, UI/UX







