인테리어 은조 아임웹 홈페이지 제작 사례

은조 아뜰리에 · Imweb Website / Portfolio IA / Visual Curation / Smorer Form / Media Optimization

은조 포트폴리오 앵커탭 화면 — Portfolio anchor frame · selected item lands in the base screen

Client은조 아뜰리에

PlatformImweb

RolePortfolio IA · Publishing

전시가 먼저인 사이트

은조 웹사이트는 설명보다 사진이 먼저 말하는 구조다. Main, Our Team, Portfolio, Story, Eunjo’s Atelier, Contact로 이어지는 메뉴 안에서 가장 강한 중심은 Portfolio다. 특히 포트폴리오 화면은 단순한 이미지 나열이 아니라, 상단의 작은 프로젝트 목록에서 선택한 항목이 하단의 기본 화면 프레임으로 착착 도착하는 앵커탭형 전시 구조를 가진다.

방문자는 콸콸, 한강버거, 블루엘리펀트 홍대, 들컴퍼니, 도회 같은 포트폴리오 썸네일을 가로로 훑고, 선택한 프로젝트가 아래쪽 큰 프레임에 프로젝트명과 대표 이미지로 정렬되는 경험을 한다. 이 방향은 인테리어 포트폴리오 사이트에 맞는 판단이었다. 공간은 설명보다 이미지의 밀도, 선택의 리듬, 화면이 도착하는 감각으로 먼저 설득해야 한다.

아임웹 템플릿 너머의 브랜드감

은조는 하이엔드 인테리어와 공간 브랜딩을 다루는 스튜디오이기 때문에, 단순한 회사소개형 템플릿으로는 브랜드 감도가 충분히 드러나기 어려웠습니다. 블랙과 골드 톤, 고해상도 이미지, 영상 배경, 여백과 타이포그래피의 리듬을 조정해 아임웹 특유의 정형화된 인상을 줄이는 데 초점을 맞췄습니다.

문의 흐름도 기본 폼을 그대로 쓰기보다 스모어폼을 활용해 비주얼 톤을 맞췄습니다. 사용자는 공간 이미지를 충분히 본 뒤 상담 의뢰로 넘어가고, 운영자는 문의 내용을 구조화된 데이터로 받을 수 있도록 했습니다.

풀다가 맡은 범위는 웹 리뉴얼 전략, UI/UX 디자인, 아임웹 기반 프론트엔드 구성, 포트폴리오 아카이브 구조, 미디어 렌더링 최적화, 상담 폼 세팅까지 이어졌습니다. 목표는 “예쁜 사이트”가 아니라 공간 작업의 밀도가 웹에서도 일관되게 느껴지는 브랜드 경험이었습니다.

은조 아뜰리에 메인 화면 — **Main**브랜드와 포트폴리오 진입을 빠르게 연결하는 첫 화면입니다.

은조 포트폴리오 앵커탭 선택 화면 — **Anchor Portfolio**상단 리스트에서 선택한 프로젝트가 하단 프레임에 타이틀과 대형 이미지로 도착합니다.

은조 도회 프로젝트 상세 화면 — **Project Detail**짧은 공간 설명 뒤 실제 사진을 연속적으로 전시하는 상세 구조입니다.

디바이스별 전시 프레임

Responsive Gallery

같은 포트폴리오도 디바이스마다 다른 장면으로 보여야 합니다.

데스크톱에서는 상단 목록과 하단 무대의 관계가 중요하고, 태블릿에서는 카드의 밀도, 모바일에서는 선택한 프로젝트의 타이틀과 대표 이미지가 빠르게 도착하는 감각이 중요합니다.

데스크톱 포트폴리오 앵커 프레임 — Desktop · anchor frame

모바일 비율 프로젝트 상세 — Mobile · image first detail

슬라이드형 카드 전시

Anchor List

작은 포트폴리오 목록은 탐색 속도를 만들고, 선택한 프로젝트는 아래쪽 큰 프레임으로 내려와 정렬됩니다.

Main Entry

브랜드 첫인상과 포트폴리오 진입을 짧게 연결해 방문자가 바로 작업을 보게 합니다.

Project Scene

상세는 긴 설명보다 실제 공간 사진의 흐름을 우선해 작업의 분위기를 남깁니다.

매거진형 이미지 보드

포트폴리오 앵커 프레임 전체 화면 — **Wide Frame**목록과 선택 결과를 한 화면에서 읽는 전시장 구조

세로로 이어지는 프로젝트 상세 — **Vertical Detail**공간 사진이 세로 흐름으로 이어지는 상세 화면

은조 메인 화면 캡처 — **Brand Entry**브랜드와 포트폴리오를 바로 연결하는 진입 화면

포트폴리오 목록 화면 캡처 — **Gallery Rhythm**이미지 카드의 반복으로 만드는 선택 리듬

정보 구조

01Main

브랜드 첫 인상과 대표 포트폴리오 진입

02Our Team

공간을 만드는 사람과 회사 소개

03Portfolio

프로젝트 목록과 공간 사진 중심 탐색

04Contact

견적 문의, 전화, 이메일, 지도, 소셜 채널 연결

Portfolio는 단순한 게시판이 아니라 사이트의 중심 동선이다. 상단 리스트는 탐색 장치이고, 하단의 큰 프레임은 선택한 프로젝트가 도착하는 무대다. 이 구조는 풀다의 현재 프로젝트 상세 개선 방향에도 중요한 기준이 된다. 프로젝트 페이지는 글을 읽는 곳이기 전에 작업을 훑고, 선택하고, 큰 장면으로 확인하고, 기억하는 전시장이어야 한다.

앵커탭 전시 구조

은조 포트폴리오의 핵심은 상단 선택 목록과 하단 기본 프레임의 관계다. 썸네일 목록은 단순 이동 메뉴가 아니라 사용자가 포트폴리오를 훑는 속도를 만든다. 선택된 프로젝트는 하단에서 큰 제목과 대형 이미지로 다시 정렬된다. 이때 화면은 새 페이지로 완전히 끊기는 느낌보다, 같은 무대 안에서 선택한 프로젝트가 제자리로 내려와 앉는 느낌을 준다.

Observed

선택은 위에서, 전시는 아래에서.

상단 썸네일 목록으로 빠른 선택 제공
선택된 항목은 하단 기본 프레임에 크게 도착
프로젝트명과 이미지가 같은 무대에서 정렬
사용자는 이동보다 전환의 감각으로 포트폴리오를 탐색

풀다 Lesson

디지털 프로젝트도 전시 가능한 장면을 가져야 합니다.

프로젝트 목록도 썸네일 중심의 선택 경험으로 설계한다
상세는 선택된 작업이 큰 프레임으로 도착하는 무대가 되어야 한다
기획 문장은 이미지와 타이틀의 리듬을 방해하지 않게 보조한다
CMS에서도 대표 이미지, 목록 썸네일, 앵커 캡션 필드를 우선 고려한다

결과

은조 웹사이트는 아임웹이라는 제한된 도구 안에서도 포트폴리오가 어떻게 전시장처럼 작동할 수 있는지 보여준다. 단순히 이미지를 많이 놓는 것이 아니라, 작은 선택 목록과 큰 전시 프레임을 연결해 사용자가 작업을 고르고 확인하는 리듬을 만든다.

앞으로 풀다의 프로젝트 콘텐츠는 설명문보다 전시물이 먼저 보이는 방향으로 관리한다. 프로젝트명, 역할, 짧은 설명, 썸네일 선택, 큰 이미지 프레임, 산출물, 운영 결과가 한 화면 안에서 리듬 있게 이어져야 한다.

← 과제 목록