에코스튜디오가 만든 미도착 우편국 템플릿은 이 순서를 화면에 담았습니다. 테마에 대한 관심을 끌 수 있는 인트로와 디자인으로 홈페이지에 방문한 고객의 관심을 끌고, 테마 비교에서 예약 화면까지 자연스럽게 줍니다. 제작을 맡기시면 이 구성을 클라이언트의 실제 방탈출 카페의 테마와 예약 방식에 맞춰 만들어 드립니다.

첫 화면에서 이야기를 열고 테마로 안내합니다

미도착 우편국에 들어가면 봉투가 도착하는 인트로 뒤로 어두운 분류실이 나타납니다. 첫 화면에는 대표 테마의 이야기와 함께 난이도, 공포도, 참여 인원, 플레이 시간을 놓았습니다. 이 테마가 마음에 들면 상세로 들어가고, 다른 이야기가 궁금하면 전체 테마로 이동합니다.

방탈출 카페의 분위기를 보여주는 화면에서도 방문자가 어디를 눌러야 할지는 분명해야 합니다. ‘테마 상세’와 ‘예약’을 버튼을 만들어서 원하는 방향대로 방문자가 선택해서 볼 수 있도록 구성했습니다. 실제 제작에서는 카페의 세계관과 테마 사진으로 첫인상을 만들고, 대표 테마에서 상세 정보나 예약으로 이어지는 길을 맞춥니다.

취향과 인원에 맞춰 테마를 고르기 쉽게 디자인했습니다

테마 목록에서는 지점 위치, 장르, 난이도, 공포도, 인원으로 후보를 좁혀 나가기 쉽게 되어 있습니다. 테마 카드에는 이야기의 짧은 소개와 플레이 정보가 보이고, 상세 화면에는 주의사항과 인원별 가격을 모았습니다. 예약 전에 비교할 내용이 여기저기 흩어져서 고객이 일일히 찾아다니면서 찾아다닐 필요가 없습니다. 테마 목록에서 한눈에 필요한 정보를 모두 볼 수 있도록 구성했습니다.

저희에게 방탈출 홈페이지 제작을 맡기시면 고객사의 방탈출 테마를 검토해 실제 운영 기준에 맞춰 분류 항목과 안내 문구를 정리해 드립니다. 테마가 바뀌거나 새로 생겼을 때도 손님이 같은 방식으로 살펴볼 수 있도록 화면을 구성합니다.

테마를 고르고 예약도 바로 이어서 쉽게 할 수 있도록 제작되었습니다

미도착 우편국에서는 테마 상세에서 예약 버튼을 누르면 선택한 테마가 예약 화면에 남습니다. 방문자는 지점과 날짜, 테마, 시간, 인원을 고른 뒤 선택 내용을 확인합니다. 시간 칸에는 ‘가능’, ‘마감’, ‘오픈 전’이 명확하게 구분돼 있어 무엇을 고를 수 있는지 파악하기 쉽습니다.

실제 예약 기능은 카페마다 운영 방식이 다릅니다. 예약 조회·취소나 운영자 확인 화면이 필요하다면 카페 운영 방식이나 예약 방식에 맞춰 사용할 기능과 범위를 상담에서 정해서 구현해 드립니다.

처음 오는 손님에게 필요한 안내도 한곳에 둡니다

테마를 고른 다음에는 어느 지점으로 가야 하는지, 입장 전에 무엇을 해야 하는지가 궁금할 것입니다. 미도착 우편국은 지점을 선택하면 위치와 해당 지점의 테마를 보여주고, ‘처음 오시는 분’ 화면에는 입장부터 종료까지의 순서를 한눈에 보이게 담았습니다. 공지 게시판도 있어서 이벤트나 공지사항을 올리실 수도 있고, 자주 묻는 질문 게시판도 있어서 해당 게시판을 통해서 고객들이 궁금해할만한 질문들을 문의하지 않고도 스스로 찾아 볼 수 있도록 마련했습니다.

저희에게 제작을 맡겨주시면 방탈출 카페의 실제 주소와 교통 안내, 입장 기준, 예약 변경 방법을 받아 정확한 내용으로 채웁니다. 지점이 여러 곳이라면 테마와 오시는 길을 지점별로 볼 수 있게 제작해드립니다. 손님이 예약 후 다시 찾아야 할 정보를 홈페이지 안에서 확인하도록 만드는 일입니다.

우리 카페에 맞게 만들려면

제작을 맡기시면 카페의 테마 이야기, 실제 사진, 운영 지점과 예약 방식을 먼저 살펴보고 그 자료를 바탕으로 첫 화면에서 무엇을 보여줄지, 테마를 어떻게 비교하게 할지, 예약 버튼이 어디로 이어질지 정해 홈페이지를 제작합니다. 미도착 우편국의 편지와 분류실처럼 카페만의 이야기를 화면 전체에 이어 줄 수도 있습니다.

미도착 우편국 템플릿을 살펴보세요. 만들고 싶은 테마 구성과 예약 방식을 알려주시면 홈페이지 제작 상담에서 필요한 화면과 기능을 함께 정리해 드립니다.

첫 화면에서 수업과 요금으로 바로 안내했습니다

첫 화면에서는 필라테스에 관심 있는 사람이 필라테스를 해야겠다고 결심할 수 있도록 필라테스가 얼마나 효과적인지를 설명하는 문구를 넣었습니다. 그리고 필라테스 센터를 찾는 고객이 가장 궁금해할만한 수업과 요금 설명으로 바로 내려갈 수 있는 버튼을 만들어서, 빠르게 원하는 정보를 파악할 수 있게 설계했습니다.

필라테스 랜딩 페이지나 홈페이지를 저희에게 의뢰하신다면 들어올 고객들이 처음부터 등록하고자 하는 마음이 들 수 있게 사람을 끄는 문구를 활용해 디자인합니다.

수업 방식과 요금을 한눈에 비교하도록 만들었습니다

바른선에 홈페이지는 1:1 개인 레슨과 그룹 수업을 탭으로 나눴습니다. 방문자가 탭을 누르면 해당 수업의 안내와 요금이 바뀝니다. 1:1을 원하는 경우와 그룹을 원하는 고객이 분명히 나뉘는 경우가 많기 때문에, 원하는 정보만 한눈에 보이게 제작을 했습니다.

저희에게 직접 운영하시는 센터의 제작을 맡기시면 실제 수업 방식과 요금을 먼저 파악하고, 고객층이 수업 방식과 요금에서 어떤 메리트를 느낄 수 있을지 분석합니다. 그리고 고객층이 실제로 그 메리트를 분명하고도 쉽게 느낄 수 있는 구성으로 디자인합니다.

공간 사진과 강사 카드에서 체험 신청을 고르기 쉽게 만들었습니다

공간 소개에는 메인 스튜디오뿐 아니라 1:1 수업방, 소도구가 놓인 자리와 라운지도 담았습니다. 사진을 누르면 크게 보고 다음 장면으로 넘길 수 있습니다. 관심있는 고객이라도 선뜻 센터에 방문하기가 망설여질 수 있지만, 수업이 이루어지는 공간과 전후에 머물 공간을 홈페이지에서 확인하면서 첫 방문에 대한 불안함을 편안함으로 바뀔 수 있게 제작했습니다.

강사 소개에서는 강사의 사진과 담당하는 수업과 수업을 하는 시간이 한번에 보이게 만들었습니다. 정보를 찾기 위해 왔다갔다 할 필요 없이 이 한 화면에서 마음에 드는 강사를 정하고 ‘이 선생님으로 체험 신청’을 눌러 바로 신청으로 이어지도록 설계했습니다.

저희에게 제작을 맡기시면 실제 공간 사진과 강사 소개를 받아 효과적으로 배치하고, 강사를 직접 고르는지 상담 후 배정하는지에 맞춰 소개와 신청 화면을 구성합니다.

체험 수업이 어떻게 진행되는지 순서를 보여줘서 체험 수업 신청에 대한 부담감을 없애줍니다.

체험 신청을 앞둔 사람은 센터에서 강사에게 수업을 받는 것이 부담스럽게 느껴질 수 있습니다. 강사 소개 다음 섹션에는 첫 체험 수업을 하시면 어떤 순서로 진행되는지 설명해서 부담없이 체험 수업 신청을 할 수 있도록 설계했습니다. 관심가진 고객이 단계별로 페이지를 살펴보면서 점점 마음의 문을 열고 문의나 체험 수업까지 이어질 수 있도록 제작되었습니다.

저희에게 제작을 맡기시면 센터의 특성에 맞춰, 고객이 결국 모든 페이지를 살펴보고 문의나 예약으로 이어질 수 있게 제작해드립니다.

회원은 수업을 예약하고 관리자는 수업이나 회원관리를 하기 쉽게 제작했습니다.

바른선에는 처음 오는 사람의 체험 신청과 별도로 회원 수업 예약 기능이 있습니다. 회원은 수업을 고르고 내 예약, 회원권 잔여 정보와 출석 내용을 확인합니다. 예약 가능한 수업을 살펴보고 고를 수 있도록 안내하며, 예약 취소도 내 예약 화면에서 찾을 수 있게 했습니다. 관리자 화면에는 ‘오늘 할 일’, ‘수업 관리’, ‘회원’, ‘요약’을 두어 수업과 예약 명단을 확인하고 출석을 처리를 쉽게 할 수 있습니다. 수업을 추가하거나 수정하고 회원 정보를 살펴보는 일도 모두 관리자 페이지에서 가능하게 만들어드립니다.

저희에게 제작을 맡기시면 현재 수업권과 예약 방식, 운영자가 매일 확인하는 일을 살펴보고 필요한 회원·관리자 기능의 범위와 견적을 상담에서 정해 구현해 드립니다. 회원 예약과 관리자 업무를 홈페이지 안에서 이어 사용할 수 있도록 제작할 수 있습니다. 지점별 시간표나 수업 안내가 더 구체적으로 필요하거나 센터의 규모가 커서 설명할 것이 많다면 여러 페이지가 있는 홈페이지로 구성할 수 있습니다. 바른선 필라테스 템플릿을 보시고 필요한 화면을 골라 프로젝트 문의에 남겨 주세요.

출처: 발행된 바른선 필라테스 제작기 · 바른선 필라테스 데모

첫 화면에서 시설을 보고 요금을 찾기 쉽게 디자인했습니다

첫 화면에는 운동 공간 사진과 ‘요금 보기’ 버튼을 함께 뒀습니다. 버튼을 누르면 바로 요금에 대한 설명이 있는 다음 섹션으로 이동이 됩니다. 요금을 확인하고 싶은 고객이 헤매지 않고 쉽고 빠르게 요금 설명으로 이동할 수 있게 제작되었습니다.

회원권과 PT 요금을 비교하기 쉽게 구성했습니다

요금 섹션에서는 회원권과 PT요금을 카드로 분리해서 가독성을 높이고 쉽게 가격을 확인할 수 있게 제작했습니다. 탭을 눌러서 기간별 비용을 비교할 수 있고 애니메이션이 들어가 있어서 고객들이 집중력을 잃지 않고 볼 수 있게 디자인했습니다. 그리고 탭을 누를 때마다 가격이 변하기 때문에 더 긴 기간이 얼마나 저렴한지가 피부로 와닿게 만들어서, 더 장기로 등록하고자 하는 마음이 들 수 있게 제작되었습니다.

PT도 횟수에 따라 가격 차이가 얼마나 나는지 한눈에 비교가 가능하도록 제작했습니다. 그리고 PT에 관심이 있는 고객은 트레이너가 누구인지가 관심이 있기 때문에, 버튼을 눌러서 바로 트레이너 정보를 확인할 수 있도록 제작했습니다.

저희에게 제작을 맡기시면 디자인 전에 클라이언트의 헬스장의 실제 회원권 조건과 가격, PT 가격을 분석해서 장점이 부각되는 요금 안내를 만들고 그것만 보고도 바로 문의로 이어질 수 있게 디자인합니다.

공간과 트레이너를 보고 방문을 판단하게 디자인했습니다

요금 다음에는 프리웨이트, 머신, 유산소 구역, 스튜디오, 락커·샤워 공간을 사진별로 보여줍니다. 사진 없이 기구 이름만 적거나 설명 없이 사진만 놓으면 초보자인 헬린이들은 헬스장에 대해 파악하기 어렵습니다. 그래서 구역 사진에 짧은 설명을 붙여 헬린이라도 공간을 쉽게 파악할 수 있게 했습니다.

트레이너 프로필만 봐도 신뢰감이 갈 수 있도록 실제 트레이너의 사진과 지도하는 운동, 경력, 만날 수 있는 시간을 한 카드에 넣었습니다. 방문자는 담당자를 비교한 뒤 상단 메뉴의 ‘방문 예약’으로 바로 이동할 수 있습니다. 요금을 보다가도, 트레이너의 프로필을 보다가도 언제든 상담으로 이어지도록 설계했습니다.

저희에게 헬스장 홈페이지 제작을 맡기시면 실제 공간 사진과 트레이너 정보를 받아 사람들이 헬스장에 매력을 느낄 수 있을 장점들을 분석하고 파악해서 디자인에 잘 반영해서 제작해드립니다.

처음 오는 손님이 이용 순서를 살피고 예약 뒤 확인 화면까지 볼 수 있게 만들었습니다

어센트에는 프런트 안내, 락커 이용, 기구 안내, 운동, 퇴실 순서를 따로 두었습니다. 처음 오는 사람이라면 첫 방문이 부담스러울 수 있지만 이런 설명을 통해서 부담없이 방문할 수 있도록 만들었습니다.

회원은 수업을 고르고 운영자는 예약·출석을 확인하기 쉽게 만들었습니다

어센트 데모에는 회원 수업 예약 기능이 있어서 마이페이지에서 회원권 잔여 일수, 출석 체크, PT잔여 회수를 확인하고, 수업을 예약하고 예약 내역을 확인 및 취소할 수 있습니다.

운영자는 수업 편성, 예약 명단 확인, 출석 처리처럼 반복하는 일을 관리자 페이지에서 쉽게 할 수 있도록 제작했습니다.

회원관리 프로그램에 필요한 기능은 센터의 운영 방식에 따라 다릅니다. 저희에게 제작을 맡기시면 어떤 방식으로 회원권을 관리하고 PT를 예약하는지에 따라 회원 예약 기능과 관리자 페이지를 개발할 수 있습니다.

또한 키워드 광고 등을 운영하거나 블로그 등이 있으시다면 광고나 블로그에서 홍보한 내용이 홈페이지에서 이어지도록 해서 광고 및 블로그를 통해 유입된 고객들이 문의와 등록으로 연결되도록 설계해드립니다.

어센트 피트니스 템플릿에서 화면 흐름을 살펴보세요. 운영 중인 요금·시설·수업 방식과 필요한 기능을 알려주시면 홈페이지 제작 상담에서 함께 정리해 드립니다.

출처: 발행된 어센트 피트니스 제작기 · 어센트 피트니스 데모

에코스튜디오는 피부 진료와 미용 시술을 안내하는 피부과 의원을 위한 홈페이지 템플릿 「오르세아」를 만들었습니다. 가상의 오르세아의원을 설정해 홈, 피부 고민별 진료 6종, 시술 비교, 진료의 관점, 공간, 방문 안내, 비급여 진료비용 안내, 예약 문의, 피부 노트 글 3편까지 여러 페이지로 구성했습니다. 서로 다른 치료와 회복 과정을 한 화면에 뭉치지 않으려고 한 장짜리 랜딩페이지로 만들지 않았습니다.

처음 방문할 때 한 번만 보이는 인트로

홈에 처음 들어오면 세이지빛 유리와 햇빛 그림자 위에 「ORSEA」와 「오르세아의원」만 보이는 짧은 인트로가 나옵니다. 1.65초 동안 보인 뒤 0.8초에 걸쳐 위로 걷히고, 오른쪽 위 「바로 보기」 버튼이나 Esc 키, 스크롤로 곧바로 넘길 수 있습니다.

인트로는 같은 방문 안에서 한 번만 나옵니다. 다른 페이지 주소로 바로 들어오거나 기기에서 움직임 줄이기를 켜 두었다면 인트로 없이 본문부터 보여줍니다. 로딩 숫자나 영어 슬로건은 넣지 않았습니다.

얼굴 위에 글자를 얹지 않은 첫 화면

첫 화면은 왼쪽에 두 줄 제목 「피부를 세심하게, 변화는 나답게.」, 오른쪽에 세로 인물 사진을 둔 두 칸입니다. 얼굴 위에 글자를 얹으면 피부도 글도 제대로 보이지 않아 사진과 글을 나눴습니다. 처음 시안에서는 넓은 화면에서 제목이 세 줄로 깨져 「피부를」만 한 줄에 남았는데, 글자 굵기와 크기를 조정해 두 줄로 정리했습니다.

색은 밝은 바탕 #F7F9F8에 짙은 녹색 #203932를 글자와 버튼에 쓰고, 일부 구간에만 세이지색 #DCE8E0 면을 깔았습니다. 글꼴은 Pretendard 한 가족입니다. 금색 테두리나 호텔 로비 같은 고급 연출은 쓰지 않았습니다.

시술 이름보다 피부 고민에서 시작하는 탐색

「지금, 어떤 피부 고민이 있나요?」 구간에는 색소·피부톤, 여드름, 모공·흉터, 탄력, 표정주름·볼륨, 홍조·민감 여섯 분야를 두었습니다. 분야를 고르면 오른쪽 사진과 설명, 「탄력 자세히 보기」 같은 상세 페이지 링크가 함께 바뀝니다. 방향키로도 옮겨 다닐 수 있습니다.

고민에서 시작하되 시술을 숨기지는 않았습니다. 상세 페이지로 들어가면 레이저, 고주파, 초음파, 약물, 주사 같은 방법을 나눠 설명합니다. 이 구간 아래에는 「분야를 살펴보는 메뉴이며 진단이나 시술 추천 결과가 아닙니다.」라는 안내를 붙였습니다.

진료 순서를 사진으로 넘겨 보는 네 단계

「듣고, 살피고, 함께 정하는 순서.」 구간은 상담합니다, 살펴봅니다, 계획합니다, 이어갑니다 네 단계로 진료 흐름을 보여줍니다. 단계를 누르면 옆의 사진과 설명이 그 단계의 장면으로 바뀝니다. 자동으로 넘어가지 않고, 방문자가 누를 때만 바뀝니다.

두 번째 단계 사진은 피부 확대경으로 팔 피부를 살피는 진찰 장면입니다. 주사를 놓거나 피부에 상처를 내는 시술 장면은 넣지 않았습니다.

효과 설명 바로 아래에 위험을 둔 진료 상세

진료 상세 페이지 여섯 개는 같은 순서로 이어집니다. 먼저 구분할 것, 방법 비교, 진료 전 확인할 것, 경과와 위험, 일상 관리, 자주 묻는 내용 순서이고, 오른쪽 목차가 스크롤을 따라오며 지금 읽는 구간을 표시합니다.

의료광고 규정은 효과를 과장하거나 중요한 부작용을 빼고 알리는 것을 제한합니다. 그래서 방법 표 바로 아래에 「기대하는 변화와 함께, 위험도 확인합니다.」 상자를 두고, 위험 정보를 접힌 질문 안에 숨기지 않고 본문에 드러냈습니다. 방법 표 앞에는 이 내용이 일반 정보이며 특정 장비 보유나 실제 시술 제공을 뜻하지 않는다는 안내를 넣었습니다. 몇 회 받아야 하는지, 효과가 얼마나 가는지 같은 숫자는 지어내지 않았고, 참고 자료는 미국피부과학회와 미국 FDA처럼 기관과 주제를 밝혀 연결했습니다.

두 가지까지만 나란히 놓는 시술 비교

「시술 이해하기」 페이지에서는 레이저·광 치료, 비침습 고주파, 집속초음파, 보툴리눔 톡신, 필러 다섯 가지 중 두 가지를 골라 나란히 비교합니다. 세 번째를 누르면 선택이 바뀌지 않고 「두 가지까지 비교할 수 있습니다. 선택한 항목 하나를 해제해 주세요.」라는 안내가 나옵니다.

비교 표는 일반적인 작용, 진료에서 확인할 것, 중요한 위험 예시 세 줄로 나눴고, 위험 예시 칸은 세이지색으로 구분했습니다. 표 아래에는 「이 비교는 우열이나 개인별 적합성을 판정하지 않습니다.」라고 적었습니다.

금액을 지어내지 않은 비급여 진료비용 안내

의원은 비급여 진료비용을 환자가 찾아볼 수 있게 알려야 합니다. 그래서 홈 하단과 푸터에서 바로 갈 수 있는 비급여 진료비용 안내 페이지를 만들고, 항목명 검색과 분류 선택, 분류·항목명·단위·금액·포함 및 별도 사항·적용일로 나눈 표를 넣었습니다.

표 안의 금액은 모두 비워 두고 「현재는 항목 구성 예시입니다. 실제 진료 항목과 금액이 등록되어 있지 않습니다.」라고 안내합니다. 템플릿을 쓰는 의원이 실제 항목과 금액을 채우는 자리입니다. 할인 가격이나 마감 타이머도 넣지 않았습니다.

민감한 건강정보를 받지 않는 예약 문의

예약 문의 양식은 이름, 연락처, 관심 분야, 희망 방문일만 받습니다. 증상을 자유롭게 적는 칸이나 사진 업로드는 넣지 않았고, 「상세한 건강정보와 진료기록은 이 화면에 입력하지 마세요.」라는 안내를 붙였습니다. 건강정보는 개인정보 가운데서도 민감정보로 따로 다뤄야 하기 때문입니다.

진료 상세 페이지에서 「탄력 진료 문의」를 누르고 들어오면 관심 분야에 탄력이 미리 골라져 있습니다. 주소에는 증상이나 입력값을 싣지 않습니다. 데모에서는 입력한 내용을 전송하거나 저장하지 않으며, 양식 위 안내 상자에도 그렇게 적었습니다.

피부·진료 과정·공간으로 역할을 나눈 사진

사진 17장은 모두 AI로 만든 연출 이미지입니다. 같은 얼굴 사진이 여러 번 반복되지 않도록 피부, 진료 과정, 공간 세 가지로 역할을 나눴습니다. 인물 사진은 서로 다른 사람으로 만들고, 자연스러운 모공과 비대칭이 보이게 했습니다. 시술 전후 비교나 흰 가운을 입은 의사 초상, 인증서, 특정 브랜드 장비는 넣지 않았습니다.

공간 사진 네 장은 세이지색과 백색, 유리를 같은 재료로 맞췄습니다. 첫 검수에서 표지와 구도가 겹치거나 피부 확대 사진이 인물 사진처럼 보인 것은 다시 만들었습니다. 공간 둘러보기 페이지에서는 사진을 누르면 확대 보기로 넘겨 볼 수 있습니다. 진료 상세의 사진 아래에는 「실제 환자나 시술 결과가 아닙니다.」라고 적었습니다.

모바일에서는 한 열로, 고민 선택은 두 칸으로

모바일에서는 첫 화면이 제목, 소개, 버튼, 사진 순서의 한 열로 바뀌고, 이때도 얼굴 위에는 글자를 얹지 않습니다. 메뉴는 오른쪽 위 버튼을 누르면 전체 화면으로 열립니다.

피부 고민 여섯 분야는 두 칸씩 세 줄로 놓이고, 고른 분야는 짙은 녹색 바탕에 밝은 글자로 표시됩니다. 첫 검수에서 이 선택 표시의 글자가 바탕과 같은 색이라 보이지 않던 문제를 찾아 고쳤습니다. 시술 비교는 가로로 밀지 않아도 되도록 두 방법을 위아래로 쌓아 보여줍니다.

오르세아 템플릿 둘러보기

오르세아 템플릿은 데모 사이트에서 직접 눌러 보실 수 있습니다. 고민 탐색과 진료 상세, 시술 비교, 비급여 안내, 예약 문의까지 이 글에서 소개한 화면이 모두 들어 있습니다. 데스크톱과 모바일 화면 크기에 맞춰 레이아웃이 바뀌는 반응형 웹으로 만들었습니다.

의료광고 규정은 의원마다 다루는 진료와 광고 매체에 따라 확인할 내용이 달라집니다. 실제로 운영할 때는 의료진 정보와 비급여 금액, 문의 접수 방식을 의원의 실제 정보로 채우고, 광고 심의가 필요한지도 함께 확인해야 합니다.

피부과나 의원 홈페이지를 준비 중이라면, 템플릿 갤러리에서 오르세아와 다른 업종 템플릿을 함께 비교해 보세요.

오르세아 템플릿 자세히 보기 →

에코스튜디오는 건축·설계 사무소를 위한 홈페이지 템플릿 「빗금」을 만들었습니다. 빗금은 도면에서 잘린 면을 표시하는 사선에서 가져온 이름입니다. 가상의 빗금 건축사사무소가 주택, 문화공간, 독서공간, 전시공간 네 작품을 소개한다는 설정으로 홈, 프로젝트 목록과 작품 상세 4쪽, 사무소 소개, 설계 과정, 프로젝트 문의, 개인정보처리방침까지 10개 페이지를 구성했습니다.

제목을 사진 밖에 둔 작품집 표지

첫 화면은 작품집의 표지처럼 만들었습니다. 왼쪽 지면에 명조체 제목 「머무는 방식을 설계합니다.」를 두고, 오른쪽에 중정을 품은 집의 외관 사진을 원본 비율 그대로 넣었습니다. 건물의 지붕이나 외곽이 잘리지 않도록 사진 높이를 정했고, 사진 위에는 글자를 얹지 않았습니다.

바탕은 질감 없는 종이색, 큰 제목과 작품명은 Noto Serif KR 명조, 본문은 Pretendard 고딕입니다. 로고는 24도 기운 가는 선 하나와 명조 「빗금」으로 만들었습니다. 사선은 로고에만 쓰고 화면 곳곳에 되풀이하지 않았습니다. 자동으로 넘어가는 슬라이드나 로딩 인트로도 넣지 않아, 방문자가 누르거나 스크롤할 때만 화면이 반응합니다.

같은 크기 카드 대신 크기를 달리한 작품 편집

홈의 「서로 다른 장소, 네 개의 질문.」 구간은 같은 크기의 카드를 나란히 두지 않고 잡지 지면처럼 편집했습니다. 골목의 문화공간 사진은 크게, 물가의 서가 사진은 작게 놓고 높이를 80px 어긋나게 했으며, 그 아래 빛의 틈 사진은 오른쪽으로 들여 넓게 배치했습니다.

사진 아래에는 번호, 작품명, 유형, 한 줄 설명을 늘 보이게 두었습니다. 마우스를 올려야 정보가 나타나는 방식은 쓰지 않았습니다. 작품마다 「자세히 보기」 버튼을 되풀이하지 않고, 작품 하나에 상세 페이지로 가는 링크 하나만 두었습니다.

멀리서 형태, 가까이에서 재료

「멀리서 보이는 형태, 가까이에서 만나는 재료.」 구간에는 새 작품을 넣지 않고, 표지에 나온 중정을 품은 집의 안쪽과 문턱을 보여줍니다. 중정을 바라보는 거실 사진과 콘크리트 벽과 목재 문이 만나는 디테일 사진을 이어 붙여, 외관에서 생활 공간, 재료의 경계로 시선이 옮겨 가도록 했습니다.

넓은 화면에서는 왼쪽 설명이 스크롤을 따라 내려오고, 세로로 긴 디테일 사진은 폭을 줄여 여백을 남겼습니다. 외관, 내부, 디테일로 이어지는 이 순서는 작품 상세 페이지의 세 장면에도 그대로 쓰입니다.

작품 네 개에 맞춘 용도 필터 하나

해외 건축사무소 사이트를 살펴보면 작품 목록에 사진 보기와 목록 보기 전환, 유형·국가·준공 상태 같은 여러 필터를 두는 곳이 있습니다. 빗금에는 작품이 네 개뿐이라 사진·목록 전환과 용도 필터 하나만 가져왔습니다. 국가나 연도 필터를 만들려면 없는 정보를 지어내 채워야 하기 때문입니다.

「문화·전시」를 누르면 골목의 문화공간과 빛의 틈 두 작품만 남고, 결과 수가 「문화·전시 프로젝트 2개」로 바뀌며 화면 낭독기에도 읽힙니다. 목록 보기로 바꿔도 고른 필터가 유지되고, 목록에는 프로젝트, 유형, 살펴볼 장면 세 열만 두었습니다.

작품마다 다른 질문과 세 장면

작품 상세 페이지는 질문에서 시작합니다. 물가의 서가는 「풍경을 가까이 두면서, 책에 집중할 자리를 만들 수 있을까요?」, 중정을 품은 집은 「집을 너무 드러내지 않으면서, 바깥을 가까이 둘 수 있을까요?」를 묻습니다. 그 뒤로 외관, 내부, 디테일 세 장면이 이어지고, 장면 이름도 작품마다 다르게 붙였습니다. 물가의 서가는 풍경·독서·창가, 빛의 틈은 틈·전시실·표면입니다.

넓은 화면에서는 왼쪽 읽기 목차가 스크롤을 따라오고, 지금 읽는 장면 옆에 짧은 선이 붙습니다. 목차를 누르면 그 장면이 머리글 바로 아래에 맞춰 멈춥니다. 본문을 탭 속에 숨기지 않았기 때문에 스크롤만 내려도 세 장면을 모두 읽을 수 있습니다.

작품 사진 열두 장은 AI로 만든 건축 콘셉트 이미지입니다. 작품마다 외관 사진을 먼저 만들고, 그 외관을 참고해 내부와 디테일을 만들어 한 건물로 보이게 했습니다. 층수나 주재료, 창틀이 다른 건물처럼 보이면 다시 만들거나 뺐습니다. 작품 상세의 정보 줄과 푸터에도 AI로 만든 가상의 콘셉트라는 점을 적어 두었습니다.

그 작품 안에서만 넘기는 확대 보기

상세 페이지의 사진을 누르면 어두운 바탕의 확대 보기가 열립니다. 어두운 면은 사이트에서 이 확대 보기에만 썼습니다. 「사진 2 / 3」처럼 지금 몇 번째 사진인지와 캡션을 함께 보여줍니다.

이전·다음 버튼은 그 작품의 사진 세 장 안에서만 움직입니다. 마지막 사진에서는 「다음」 버튼이 꺼지고, 다른 작품이나 첫 사진으로 넘어가지 않습니다. 확대 보기는 Esc 키나 닫기 버튼으로 닫습니다.

설계 과정은 네 단계 표로

설계 과정 페이지는 「하나의 생각이 공간이 되기까지.」라는 제목 아래 네 단계를 표로 정리했습니다. 단계마다 빗금이 검토하는 것, 건축주와 함께 결정할 것, 정리하는 자료 예시를 나눠 적었습니다. 표 아래에는 이 순서가 설계 흐름을 설명한 예시라는 안내를 붙여, 계약 조건처럼 읽히지 않게 했습니다.

「비용과 기간은, 범위를 정한 뒤에.」 구간에서는 설계 업무, 외부 협의, 현장 참여, 일정을 나눠 설명합니다. 자주 묻는 내용 여섯 문항은 대지가 없는 경우, 설계비, 전체 기간, 설계와 시공, 공사감리, 기존 건물을 다룹니다. 질문은 한 번에 하나씩 열리고, 열린 질문의 「+」 표시는 돌아가며 「×」가 됩니다.

본 작품을 들고 가는 문의 양식

작품 상세 페이지 끝의 문의 버튼을 누르면 어떤 작품을 보다 왔는지가 문의 양식에 함께 넘어갑니다. 빛의 틈에서 「전시공간 프로젝트 문의」를 누르면 「관심 프로젝트: 빛의 틈」이 표시되고, 계획 중인 공간에 「문화·전시」가 미리 골라져 있습니다. 문의 내용은 방문자가 직접 쓰도록 비워 둡니다.

필수 칸은 이름, 이메일, 문의 내용 세 개뿐입니다. 계획 중인 공간, 현재 단계, 대지 위치, 희망 시기, 연락처는 「계획 정보를 더 남길까요?」를 눌러야 펼쳐지고, 대지 위치도 시·군·구 정도만 적게 했습니다. 데모에서는 입력한 내용을 어디에도 보내거나 저장하지 않으며, 확인 화면에서도 그렇게 안내합니다.

모바일에서는 한 열로, 목차는 가로로

모바일에서는 모든 다단 배치가 한 열로 바뀝니다. 홈 표지는 제목, 소개, 버튼 다음에 사진이 오고, 홈의 어긋난 작품 배치도 같은 왼쪽 선에 맞춰 풀립니다. 메뉴는 오른쪽 위 버튼을 누르면 전체 화면으로 열립니다.

작품 상세의 세로 읽기 목차는 사진 위의 가로 한 줄로 바뀝니다. 프로젝트 목록 표와 설계 과정 표는 칸마다 이름표를 붙여 위에서 아래로 읽히게 했습니다. 처음 검수 때 좁은 화면에서 표 글자가 「프로젝 / 트」처럼 끊기던 문제를 이렇게 한 열 구성으로 고쳤습니다.

빗금 템플릿 둘러보기

빗금 템플릿은 데모 사이트에서 직접 눌러 보실 수 있습니다. 용도 필터와 읽기 목차, 확대 보기, 작품에서 이어지는 문의 양식까지 이 글에서 소개한 기능이 모두 들어 있습니다. 데스크톱과 모바일 화면 크기에 맞춰 레이아웃이 바뀌는 반응형 웹으로 만들었습니다.

건축·설계 사무소 홈페이지를 준비 중이라면, 템플릿 갤러리에서 빗금과 다른 업종 템플릿을 함께 비교해 보세요.

빗금 템플릿 자세히 보기 →

에코스튜디오는 검색·유튜브·SNS 광고와 콘텐츠·랜딩페이지를 맡는 디지털 마케팅 대행사를 위한 홈페이지 템플릿 「미래」를 만들었습니다. 가상 대행사 미래가 가상 헤드폰 ONE의 캠페인을 기획했다는 설정으로, 홈과 서비스 상세 4쪽, 캠페인 스튜디오, 협업 방식, 회사 소개, 프로젝트 문의, 개인정보처리방침까지 11개 페이지를 구성했습니다.

첫 화면에 광고 한 장면을 크게

처음 만든 시안에서는 큰 제목과 설명, 버튼이 첫 화면을 차지하고 작업물은 아래로 밀려 있었습니다. 광고를 만드는 회사라면 첫 화면에서 광고가 보여야 한다고 판단해 구성을 다시 짰습니다.

지금 첫 화면은 왼쪽에 제목 「브랜드를 보게 하고, 선택할 이유를 만듭니다.」, 오른쪽에 캠페인 사진을 둔 두 칸입니다. 제목에서는 「선택할 이유를」만 코발트 색으로 칠했고, 사진 속 제품 위에는 글자를 얹지 않았습니다. 페이지를 열면 글과 사진이 살짝 올라오며 나타나고 1초 안에 멈춥니다.

실적 대신 가상 캠페인 하나를 깊게

실적이 없는 템플릿에 포트폴리오 세 개를 억지로 만들어 넣지 않기로 했습니다. 대신 가상 헤드폰 ONE의 캠페인 하나를 출발점부터 측정 계획까지 기획해, 결과 숫자 없이도 이 회사가 일하는 방식이 보이게 했습니다.

캠페인 스튜디오 페이지는 캠페인 출발점, 선택한 방향, 완성 광고물, 채널별 역할, 측정 계획, 자체 검토 순서로 이어집니다. 캠페인 문장은 「도시를 지나, 나의 리듬으로.」이고, 그 바로 아래에 「자체 기획 캠페인 · 가상 제품 · 실제 고객 실적 아님」을 적어 두었습니다. 색은 블루 제품, 실버 공간, 빨강 광고면 세 가지로 정했습니다.

캠페인 사진 여섯 장은 AI로 생성했습니다. 첫 장을 기준으로 먼저 만들고 나머지 다섯 장은 그 사진을 참고해 만들어, 짙은 블루 이어컵과 샌드실버 힌지가 모든 장에서 같은 모양으로 보이게 했습니다. 사진 안에는 로고나 문구를 넣지 않았고, 글자는 모두 웹 화면에서 얹었습니다.

SNS·영상·검색·랜딩을 한 무대에서

홈의 캠페인 무대에는 같은 캠페인이 매체마다 어떻게 달라지는지 담았습니다. 처음 시안에서는 광고 카드 여러 장을 겹쳐 놓아 랜딩 화면이 일부만 보였습니다. 그래서 겹침을 없애고 SNS, 영상 콘티, 검색, 랜딩 네 개의 탭으로 하나씩 보여주도록 바꿨습니다.

탭을 고르면 광고물과 옆의 기획 설명이 함께 바뀝니다. SNS 탭에서는 「제품 중심」과 「사용 장면 중심」 두 가지 피드 광고를 비교할 수 있고, 검색 탭의 「도착 화면 보기」를 누르면 랜딩 탭으로 이어집니다. 스크롤을 내리면 무대가 화면 폭만큼 넓어지며 모서리가 각지게 바뀝니다. 1024px보다 좁은 화면이나 움직임 줄이기를 켠 기기에서는 이 효과를 끕니다.

영상 파일 없이 보여주는 4장 모션 콘티

캠페인에는 유튜브·영상 광고도 들어가지만 실제 영상 파일은 없습니다. 사진에 재생 아이콘만 붙여 영상처럼 보이게 하지 않고, 정지 사진 네 장이 차례로 넘어가는 모션 콘티로 만들었습니다. 화면에는 「정지 이미지 기반 모션 콘티 · 실제 집행 영상 아님」이라고 표시했습니다.

네 장면은 도시, 형태, 선택, ONE 순서이고, 일상의 맥락에서 시작해 제품을 알아보고 마지막에 다음 행동으로 이어지도록 배치했습니다. 장면은 2.5초마다 넘어가고, 콘티가 화면 밖으로 나가면 멈춥니다. 장면 번호를 누르면 그 장면에서 멈추고, 움직임 줄이기를 켠 기기에서는 자동으로 넘어가지 않고 「다음 장면」 버튼으로 넘깁니다. 인물 사진은 칸에 맞춰 잘라 내지 않고 전체가 보이게 넣었습니다.

검색광고는 문장으로 보여주는 화면

검색광고에서 방문자가 보는 것은 사진보다 광고 문장입니다. 그래서 검색 키워드 광고 상세 페이지는 사진을 줄이고 실제 문안을 크게 보여주는 쪽으로 설계했습니다.

「같은 제품을 찾아도, 궁금한 것은 다릅니다.」 구간에는 검색어, 광고 문장, 도착 페이지를 한 줄에 놓았습니다. 「제품 탐색」과 「브랜드 검색」을 바꾸면 세 칸이 한꺼번에 바뀌어, 검색 의도에 따라 문장과 도착 페이지가 어떻게 달라지는지 비교할 수 있습니다. 검색 서비스의 로고나 광고 순위 표시는 넣지 않았고, 표시 주소도 예시용 one.example을 썼습니다.

광고와 도착 화면을 나란히 놓은 랜딩 페이지 상세

콘텐츠·랜딩·측정 상세 페이지의 제목은 「광고에서 시작한 관심이, 다음 화면에서도 이어지도록.」입니다. 광고에서 본 제품과 문장이 도착한 페이지에서도 보여야 방문자가 제품을 다시 찾지 않아도 된다는 설명을 화면으로 보여주려 했습니다.

왼쪽에 SNS 피드 광고, 오른쪽에 ONE 랜딩 첫 화면을 나란히 두고, 「연결 보기」를 누르면 두 화면에서 같은 사진과 같은 제목 자리에 테두리가 켜집니다. 아래 검토표는 메시지, 정보, 행동, 측정 네 줄로 방문 뒤에 막히는 곳을 살핍니다. 측정 구간에는 「버튼을 눌렀다는 사실과 문의가 접수됐다는 사실은 다릅니다.」라는 문장을 넣었습니다.

성과 숫자 없이 고르면 바뀌는 설명

성장 그래프나 전환율 같은 성과 숫자는 넣지 않았습니다. 가상 회사가 보여주는 성과 숫자는 근거가 없기 때문입니다. 데모 전체에 매출, 전환율, 광고 수익률 같은 성과 숫자는 하나도 없습니다.

대신 홈의 「지금, 브랜드에 필요한 변화는 무엇인가요?」 구간에서 방문자가 자기 상황을 고르게 했습니다. 「처음 알릴 때」, 「찾는 고객을 만날 때」, 「방문 다음이 막힐 때」 중 하나를 누르면 오른쪽 코발트 판의 설명과 산출물, 이어지는 서비스 링크가 바뀝니다. 예를 들어 「찾는 고객을 만날 때」를 고르면 「검색하는 순간의 질문에 답합니다.」와 함께 키워드 분류, 광고 문안, 페이지 연결표가 나옵니다.

가격표 대신 비용 항목을 나눈 협업 방식 페이지

광고 대행 비용은 매체와 제작 범위에 따라 달라집니다. 그래서 예시 가격표를 넣지 않고, 「비용은, 맡길 범위가 정해진 뒤에.」라는 제목 아래 매체 광고비, 운영비, 제작비, 외부 비용 네 칸으로 비용이 나뉘는 자리를 설명했습니다.

협업 방식 페이지에는 진단, 설계, 제작·집행, 검토 네 단계를 표로 정리하고 단계마다 미래가 하는 일, 함께 확인할 것, 전달물을 적었습니다. 자주 묻는 질문에서는 「성과를 보장하나요?」에 매출이나 전환율을 보장하지 않는다고 답합니다. 질문은 한 번에 하나씩 펼쳐지고, 첫 질문은 처음부터 열려 있습니다.

들어온 곳에 맞춰 관심 업무를 골라 두는 문의 양식

문의 양식의 필수 칸은 브랜드·회사명, 담당자명, 이메일, 문의 내용 네 개입니다. 사이트 주소, 관심 업무, 월 매체 광고비, 희망 시기, 보유 자료는 「프로젝트 정보를 더 남길까요?」를 눌러야 펼쳐지는 선택 칸으로 두었습니다.

다른 페이지의 문의 버튼을 누르고 들어오면 선택 칸이 펼쳐진 채로 관심 업무가 미리 골라져 있습니다. 캠페인 스튜디오의 「이런 캠페인 문의하기」로 들어오면 영상, SNS, 콘텐츠와 랜딩이 선택되어 있고, 방문자는 이를 자유롭게 고칠 수 있습니다. 빈 칸이 있으면 칸마다 안내 문구가 나오고 첫 번째 빈 칸으로 이동합니다. 데모에서는 입력한 내용을 어디에도 보내지 않으며, 화면에도 그렇게 안내합니다.

모바일에서는 카피 먼저, 광고는 한 장씩

모바일에서는 첫 화면의 두 칸이 한 칸으로 바뀌어 제목과 버튼이 먼저, 캠페인 사진이 그 아래에 옵니다. 제목 크기는 화면 폭에 맞춰 40~48px 사이로 줄어듭니다.

캠페인 무대의 탭 네 개는 두 줄로 접히고, SNS 광고는 한 번에 한 장씩 크게 보여줍니다. 모션 콘티는 사진을 위에, 설명을 아래에 둡니다. 본문 글자는 16px 이상, 버튼은 손가락으로 누르기 쉬운 44px 이상으로 맞췄습니다.

미래 템플릿 둘러보기

미래 템플릿은 데모 사이트에서 직접 눌러 보실 수 있습니다. 캠페인 무대의 탭과 모션 콘티, 문의 양식까지 이 글에서 소개한 기능이 모두 들어 있습니다. 데스크톱과 모바일 화면 크기에 맞춰 레이아웃이 바뀌는 반응형 웹으로 만들었습니다.

광고·마케팅 회사 홈페이지를 준비 중이라면, 템플릿 갤러리에서 미래와 다른 업종 템플릿을 함께 비교해 보세요.

미래 템플릿 자세히 보기 →

디쉬카 사이트는 오래 쌓아 온 시공 사례 글로 검색에서 고객을 만나는 사이트입니다. 그래서 이번 이전의 목표는 이 글들을 검색 결과에서 하나도 잃지 않는 것이었습니다. 옮긴 글은 278개이고, 옛 주소 278개를 모두 새 주소로 연결했습니다.

기존 디자인 그대로 옮긴 새 사이트

디쉬카는 오래 써 온 사이트의 모습을 바꾸지 않기를 원했습니다. 기존 방문자에게 익숙한 로고와 메뉴, 첫 화면 구성을 그대로 두고, 같은 화면을 워드프레스의 Bricks 빌더로 다시 구성했습니다.

메뉴는 설치방법, 제품소개, 시공실적, 덤웨이터 도면, 견적문의 그대로입니다. 겉모습은 같지만 이제는 워드프레스 관리자 화면에서 글과 사진을 직접 올리고 고칠 수 있습니다.

시공 사례 글 278개를 그대로 옮기기

옮길 글은 설치방법 8개와 시공실적 270개, 모두 278개였습니다. 글마다 본문과 사진, 작성일, 분류를 그대로 옮기고 대표 이미지 276개도 함께 연결했습니다.

옮기는 과정에서 정리할 것도 있었습니다. 옛 사이트에서는 화면에 보이지 않던 공통 안내 문구가 271개 글의 데이터에 붙어 있어 이 문구를 걷어냈습니다. 대표 이미지 206장이 빠진 것처럼 보이는 문제도 있었는데, 확인해 보니 한글 파일 이름이 서버와 데이터베이스에 서로 다른 방식으로 저장돼 있었을 뿐 파일은 모두 있었습니다. 표기 방식을 맞춰 한 번에 해결했고, 백업 이후에 추가된 사진 14장은 원본 사이트에서 받아 다시 올렸습니다.

옛 주소 278개를 새 주소로 잇는 301 연결

그누보드와 워드프레스는 글 주소를 만드는 방식이 다릅니다. 옛 사이트의 글 주소는 view.php?bbs_no=6&data_no=159처럼 게시판 번호와 글 번호로 이루어져 있어, 워드프레스로 옮기면 주소가 달라질 수밖에 없습니다. 검색엔진에 등록된 옛 주소가 끊기면 그 글은 검색 결과에서 빠지게 됩니다.

그래서 옛 주소 278개를 모두 새 주소로 보내는 301 영구 이동을 걸었습니다. 301은 검색엔진에 “이 글은 이 주소로 옮겼다”고 알려주는 방식이라, 옛 주소로 들어온 방문자도 바로 새 글로 이동하고 검색엔진도 새 주소를 그 글로 이어서 인식합니다.

새 주소는 /dumbwaiter/cases/p159/처럼 분류와 옛 글 번호를 그대로 담았습니다. 옛 159번 글은 새 사이트에서도 p159라서 주소만 보고도 어느 글인지 1대1로 찾을 수 있고, 278개 주소를 하나씩 등록하는 대신 규칙 두 줄로 모든 옛 주소를 새 주소로 연결할 수 있었습니다. 앞으로 올리는 글도 같은 방식으로 번호가 이어지고, 광고에 쓰는 주소도 안정적으로 유지됩니다.

검색 노출을 지키는 이전 순서

새 사이트는 먼저 임시 주소에서 만들고 확인했습니다. 이때 검색엔진이 임시 주소를 먼저 수집하면 나중에 같은 글이 두 주소로 나뉘어 경쟁하게 되므로, 확인하는 동안에는 검색 수집을 막아 두었습니다.

글을 옮기는 작업은 실제 사이트와 같은 구조의 데이터베이스를 따로 만들어 처음부터 끝까지 먼저 실행해 보고, 오류가 없는 것을 확인한 뒤 적용했습니다. 도메인을 새 서버로 옮긴 다음에는 본문 속 주소를 새 도메인으로 바꾸고 검색 수집을 다시 열었습니다.

새 서버와 최신 워드프레스로 옮긴 시공 사례

서버는 기존 호스팅에서 카페24 웹호스팅으로 옮겼고, 사이트는 최신 워드프레스(7.1)에서 운영됩니다. 이전 작업 도중 기존 호스팅의 이용 기간이 끝나 옛 사이트가 만료 화면으로 바뀌었는데, 새 사이트로의 전환을 앞당겨 사이트가 비어 있는 시간을 줄였습니다.

시공 사례 글 화면은 제목과 작성자, 작성 시간, 공유 버튼까지 옛 사이트의 구성을 그대로 따랐습니다. 이전 전에 쓴 글도 작성일이 그대로 남아 있어, 오래된 사례와 최근 사례가 같은 목록 안에서 이어집니다.

모바일에서도 그대로 보이는 사이트

모바일에서는 메뉴를 오른쪽 위 버튼으로 접고, 첫 화면 사진과 시공 사례 글을 세로 화면에 맞게 배치했습니다. 전화 문의 버튼은 화면 아래쪽에 떠 있어 어느 글을 보다가도 바로 연락할 수 있습니다.

완성된 디쉬카 홈페이지

화면은 예전 그대로이고, 바뀐 것은 그 아래의 서버와 워드프레스입니다. 완성된 모습은 디쉬카 홈페이지에서 볼 수 있습니다.

그누보드나 오래된 서버에서 워드프레스로 옮길 계획이라면, 옮길 글과 주소가 몇 개인지와 검색 노출을 어떻게 지킬지부터 에코스튜디오와 같이 정리해 보세요.

사이트 이전 상담 →

에코스튜디오는 서울 성수동의 병원 인테리어 전문 회사 우리집인테리어디자인의 홈페이지를 제작했습니다. 완성한 공간과 시공 원칙을 먼저 보여주고, 상담 전에 필요한 판단 기준을 확인한 뒤 문의로 이어지도록 구성했습니다.

병원 공간 사진으로 시작하는 첫 화면

첫 화면에는 병원 공간 사진을 화면 가득 넣고, 그 위에 “MEDICAL INTERIOR DESIGN”과 “치유의 공간을 디자인하다”를 얹었습니다.

사진은 여러 장이 차례로 바뀌는 슬라이드로 넣었습니다. 위쪽 메뉴에는 회사 소개(About Us), 프로젝트, 매거진, 문의(Contacts)만 두어 처음 온 방문자도 원하는 곳을 쉽게 찾을 수 있게 했습니다.

병원을 짓는 회사라는 것을 먼저 알리는 소개

첫 화면 다음에는 “병원에 특화된 인테리어&시공”이라는 제목으로 회사가 하는 일을 밝혔습니다. 환자가 오래 머무는 의료 공간은 세세한 부분까지 손길이 필요하다는 회사의 생각을 두 문단으로 나눠 담았습니다.

회사 설명 바로 아래에는 고객 후기에서 가져온 한 문장, “보이지 않는 곳까지 신경 써줘서 좋았어요”를 크게 이어 붙였습니다.

원장님이 확인하고 싶은 것을 다섯 가지로 정리

병원 인테리어를 맡길 때 확인할 내용을 “병원 인테리어 5가지 포인트”로 묶었습니다. 디자인, 법령에 맞는 설계, 매일의 공사 공유, 마감, 사후관리입니다.

항목을 누르면 설명이 펼쳐지는 방식이라 다섯 가지 제목을 한눈에 보고 궁금한 것만 열어 읽을 수 있습니다. 두 번째 항목에서는 병원 공사에 의료법과 건축법, 장애인 관련 법이 함께 적용된다는 점을, 세 번째 항목에서는 현장 소장이 그날 진행한 공사 사진을 매일 공유한다는 점을 안내합니다.

지역·진료과·규모가 보이는 포트폴리오

포트폴리오에는 완성한 병원 사진을 크게 보여주고, 제목에 지역과 진료과, 규모를 함께 적었습니다. “신경과 병원 인테리어 (인천 주안 40평대)”, “100평대 병원 인테리어 (강남모아 여성의원)”처럼 원장님이 자기 병원과 비슷한 사례를 바로 찾을 수 있는 이름입니다.

사례는 병원(Medical)과 상업 공간(Commercial)으로 나누고, 홈에서는 6개를 먼저 보여준 뒤 “Load More” 버튼으로 더 볼 수 있게 했습니다. 제목에 지역과 진료과가 들어가 있어, 같은 말로 검색하는 원장님에게도 사례가 닿을 수 있습니다.

보이지 않는 공사와 등록 서류를 함께 보여주는 영역

회사는 눈에 잘 띄지 않는 부분일수록 오래 쓰는 데 중요하다고 설명합니다. 그래서 “뒤탈없는 기초시공”이라는 제목 아래 전열교환기를 쓰는 환기공사, 방음 소재를 쓰는 방음공사, 막힘을 막는 배관공사를 그림 표시와 함께 정리했습니다.

옆에는 건설업 등록증 사진을 넣고, 실내건축면허를 갖춘 회사와 계약하면 하자 보수 같은 문제가 생겼을 때 법적으로 보호받을 수 있다는 점을 적었습니다.

294편의 글이 쌓인 칼럼·후기·시공 이야기

매거진 메뉴의 전문가 칼럼과 고객 후기, 프로젝트 메뉴의 시공 이야기는 모두 워드프레스 글로 올라갑니다. 2019년 9월부터 올린 글이 294편입니다(2026년 9월 24일 기준). 홈에서는 최근 칼럼 4편을 사진과 요약으로 보여줍니다.

칼럼 제목은 “병원 인테리어 추가 비용 폭탄, 어떻게 막을 수 있을까?”, “병원 인테리어 업체, AS 시스템부터 파악하세요”처럼 개원을 준비하는 원장님이 걱정할 질문으로 지었습니다. 글을 읽으면 회사가 어떤 기준으로 일하는지 알 수 있습니다. 워드프레스로 제작해 회사가 직접 새 글을 올리고 사진을 바꿀 수 있습니다.

부담 없이 남기는 상담 양식

상담 양식은 성함, 연락처, 지역, 진료과만 필수로 받고 평수, 일정, 예산, 남기실 말씀은 선택으로 두었습니다. 칸마다 “예: 한의원, 성형외과, 정형외과 등”, “예: 40평 (선택)”처럼 예시를 넣어 무엇을 적으면 되는지 바로 알 수 있습니다.

양식 위에는 “영업일 기준 1~2일 안에 연락드립니다”라는 안내를 두었습니다. 왼쪽에는 대표가 직접 쓴 책 『실패 없는 병원 인테리어』를 소개하고, 개원 상담을 신청하면 상담 때 이 책을 선물한다고 적었습니다. 자동으로 입력되는 스팸을 거르는 숨은 확인 칸도 넣었습니다.

모바일에서도 같은 순서로 보는 홈페이지

모바일에서는 메뉴를 오른쪽 위 버튼으로 접고, 첫 화면 사진과 제목을 세로 화면에 맞게 다시 배치했습니다. 상담 양식의 칸은 한 줄에 하나씩 놓아 손가락으로 누르고 입력하기 쉽게 했습니다.

완성된 우리집인테리어디자인 홈페이지

데스크톱과 모바일 화면 크기에 맞춰 레이아웃이 바뀌는 반응형 웹으로 만들었습니다. 완성된 모습은 우리집인테리어디자인 홈페이지에서 볼 수 있습니다.

인테리어·시공 회사 홈페이지를 준비 중이라면, 어떤 사례를 먼저 보여줄지와 고객이 상담 전에 무엇을 확인하고 싶어 할지부터 에코스튜디오와 같이 정리해 보세요.

인테리어 회사 홈페이지 제작 상담 →

에코스튜디오는 블록체인 프로토콜을 연구·개발하는 Oraclizer의 홈페이지를 제작했습니다. Oraclizer는 토큰화된 증권 같은 자산의 토큰, 보관 기록, 계약, 규제 상태를 여러 시스템에서 한 번에 맞춰 옮기는 기술을 만듭니다. 전문 용어가 많은 기술을 영문 한 페이지에 차례대로 풀어내고, 더 깊은 자료는 문서와 리서치 사이트로 이어지게 구성했습니다.

회사를 한 문장으로 소개하는 첫 화면

첫 화면의 제목은 “State should move as one.”(상태는 하나로 움직여야 한다) 한 문장입니다. 그 아래에 자산의 토큰과 보관 기록, 계약, 규제 상태가 서로 다른 시스템에 흩어져 있다는 문제를 적고, Oraclizer가 이것을 한 번에 옮긴다는 답을 이어서 붙였습니다.

오른쪽에는 상태가 연결되는 단계를 S₀부터 S₃까지 네 칸으로 나눠 보여줍니다. 마지막 칸인 Atomic binding(원자적 결합)은 “모두 함께 반영하거나 모두 되돌린다”는 이 회사가 내세우는 약속입니다.

어려운 개념은 익숙한 것과 나란히 놓아 설명

이 분야 방문자에게 익숙한 것은 가격 같은 값을 블록체인에 전달하는 기존 오라클, 즉 데이터 피드입니다. 기술 소개 영역에서는 이 데이터 피드와 Oraclizer의 오라클 상태 머신을 한 줄에 나란히 놓았습니다.

밝은 칸의 데이터 피드는 점 하나가 선을 따라 전달되고 끝납니다. 어두운 칸의 상태 머신은 관찰, 연결, 검증, 반영 네 단계를 거칩니다. 설명을 읽지 않아도 색과 도형만으로 두 방식이 다르다는 것이 보입니다.

질문하는 순서대로 이어지는 9개 영역

홈페이지는 한 페이지에 9개 영역으로 이어집니다. 기술 소개, 먼저 풀어야 했던 여섯 가지 과제, 시스템 구조, 활용 사례, 표준, 연구, 협업 파트너, 자주 묻는 질문, 회사 소개와 문의 순서입니다.

새 기술을 검토하는 사람은 무엇을 하는지부터 묻고, 왜 필요한지, 어떻게 동작하는지, 어디에 쓰는지, 누가 함께 검증하는지로 넘어갑니다. 영역 순서를 그 질문 순서에 맞췄습니다. 상단 메뉴의 Technology, Architecture, Use Cases, Standards, Research, About을 누르면 원하는 영역으로 바로 이동합니다.

확대해도 선명한 시스템 구조도

시스템 구조 영역에는 Oraclizer가 동작하는 방식을 도면 한 장에 담았습니다. 왼쪽의 입력 네 가지가 가운데 마름모 안에서 관찰, 연결, 검증, 반영을 차례로 지나 오른쪽의 결과로 나갑니다. 검증을 통과하지 못하면 이전 상태로 되돌아가는 길도 함께 그렸습니다.

구조도는 사진 대신 SVG 도면 파일로 만들었습니다. 화면을 키우거나 고해상도 모니터로 봐도 선과 글자가 흐려지지 않습니다.

모바일에서는 밀어서 보는 구조도

모바일 첫 화면에서는 상단 메뉴를 버튼 하나로 접고, 제목과 설명, 두 개의 버튼을 위에서 아래로 차례대로 놓았습니다.

넓은 도면을 모바일 화면에 맞춰 줄이면 도면 속 글자를 읽기 어렵습니다. 모바일에서는 도면 크기를 그대로 두고 가로로 밀어 전체를 볼 수 있게 했습니다. 도면 위에는 “Swipe to inspect the full diagram”(밀어서 전체 도면 보기) 안내를 넣었습니다.

주장마다 근거로 이어지는 표준·연구 영역

표준 영역에서는 Oraclizer가 추진하는 표준 세 가지를 카드로 보여주고, 카드마다 Submitted(제출), Pre-submission(제출 준비), Working concept(구상 단계)처럼 지금 어느 단계인지 표시했습니다.

연구 영역에는 논문과 형식 검증 자료를 모았습니다. 홈페이지의 주요 설명은 표준 문서와 논문, GitHub 저장소로 연결됩니다. 새 창으로 열리는 링크 74곳에는 화면 낭독기로 읽을 때 “opens in a new tab”(새 탭에서 열림)이 함께 안내되도록 했습니다.

소개 사이트와 문서·리서치 사이트를 나눈 구성

프로토콜 명세나 연구 글처럼 계속 늘어나는 자료를 소개 페이지 한 곳에 모두 담으면 페이지가 무거워지고 원하는 자료를 찾기도 어렵습니다. 그래서 역할을 세 곳으로 나눴습니다. oraclizer.io에서 회사와 기술을 소개하고, 기술 문서는 docs.oraclizer.io, 연구 글과 소식은 research.oraclizer.io에서 봅니다.

소개 사이트는 Next.js로 만든 가벼운 한 페이지로, 처음 접속할 때 내려받는 HTML·스크립트·스타일이 압축 기준 약 230KB입니다. 전송은 Cloudflare 네트워크를 거칩니다. 기술 문서 사이트는 왼쪽에 전체 목차, 오른쪽에 지금 읽는 글의 차례를 두고, 위쪽에 검색과 어두운 화면 전환을 넣었습니다.

연구 글과 소식을 모으는 리서치 사이트

리서치 사이트는 Updates, Core, Proofs, Protocol, Economy, RWA, EIP의 7개 분야로 글을 나눴습니다. 새 연구와 소식은 날짜와 함께 쌓이고, 구독 버튼으로 새 글 알림을 받아 볼 수 있습니다.

문서와 리서치 사이트는 WordPress로 운영해 새 글을 올리고 목차를 관리하기 쉽습니다. 소개 사이트는 자주 고칠 일이 없고, 늘어나는 글은 이 두 사이트에 쌓입니다.

검색엔진과 AI 도구가 읽는 회사 정보

홈페이지에는 회사 이름과 설명, 로고를 담은 구조화 데이터와 사이트맵을 넣었습니다. 해외 투자자나 연구자가 검색으로 회사를 찾을 때, 검색엔진이 이 정보를 읽어 갑니다.

공식 문서, 표준, 논문, 저장소 주소는 llms.txt 파일에도 모아 두었습니다. AI 도구가 읽어 갈 수 있게 만든 공식 자료 목록입니다.

문의 주제를 고르는 문의 양식

문의하는 쪽은 기관, 연구자, 표준 관계자처럼 목적이 제각각입니다. 그래서 문의 양식에서는 이름, 업무 이메일, 소속 기관과 함께 문의 주제를 기관 연동, 연구, 표준, 파트너십, 개인정보 요청, 기타 중에서 고르게 했습니다. 문의를 받는 쪽은 주제를 보고 담당자를 바로 정할 수 있습니다.

자동으로 입력되는 스팸을 거르기 위해 사람에게는 보이지 않는 확인 칸도 넣었습니다.

완성된 Oraclizer 홈페이지

데스크톱과 모바일 화면 크기에 맞춰 레이아웃이 바뀌는 반응형 웹으로 만들었습니다. 완성된 모습은 Oraclizer 홈페이지에서 볼 수 있습니다.

기술 기업이나 스타트업 홈페이지를 준비 중이라면, 기술을 어떤 순서로 설명할지와 어떤 자료를 근거로 보여줄지부터 에코스튜디오와 같이 정리해 보세요.

기업 홈페이지 제작 상담 →

에코스튜디오가 제작한 매거진봐야쥬는 여행과 라이프스타일을 다루는 온라인 매거진입니다. 현재 공개된 홈페이지를 통해 브랜드를 소개하는 화면과 기사를 읽는 구조를 살펴보겠습니다.

매거진봐야쥬의 현재 공개 화면. 캡처 시점에 따라 기사와 이미지가 달라질 수 있습니다.

매거진의 성격을 먼저 알려주는 홈

첫 화면은 리조트 풍경을 넓게 보여주고, 그 위에 매거진의 이름과 여행·라이프스타일이라는 주제를 전합니다. 화면 중앙의 기사 보기 버튼은 인상적인 장면에서 실제 콘텐츠로 이동하는 출발점입니다.

웹진 제작에서는 브랜드 소개와 기사 목록의 역할이 다릅니다. 소개는 어떤 관점의 매체인지 알려주고, 목록은 지금 읽을 이야기를 고르게 합니다. 매거진봐야쥬의 홈에서도 이 두 영역을 나누어 볼 수 있습니다.

최신 글과 주제별 목록으로 이어지는 탐색

최신 기사 영역에는 제목, 발행일, 분류와 글의 일부가 함께 표시됩니다. 제목만 나열하는 대신 어떤 이야기인지 미리 살펴보고 선택할 수 있는 구성입니다.

‘가봐야쥬’, ‘해봐야쥬’처럼 매체의 이름을 살린 분류도 사용합니다. 주제별 목록에서는 같은 분류의 글을 모아 볼 수 있고, 다음 목록으로 이동해 지난 기사도 찾아볼 수 있습니다. 새 글과 쌓인 글에 각각 접근하는 경로가 있다는 점이 콘텐츠 사이트에서 중요합니다.

사진과 설명을 함께 읽는 기사 화면

기사 상세에서는 제목과 발행일, 작성자를 확인한 뒤 본문을 읽습니다. 여행 기사에는 장소의 분위기를 보여주는 사진이 여러 장 들어가고, 사진 사이에 설명이 이어집니다.

사진 아래의 설명과 본문 중간의 구분 제목은 긴 기사를 따라가는 기준이 됩니다. 독자는 사진을 보며 장소를 떠올리고, 이어지는 글에서 맥락을 읽을 수 있습니다. 온라인 매거진 디자인에서는 사진을 크게 보여주는 것뿐 아니라 사진 다음에 읽을 문장의 흐름도 함께 살펴봐야 합니다.

기사가 쌓이는 홈페이지의 운영 구조

매거진봐야쥬는 홈, 분류별 목록, 개별 기사로 연결됩니다. 새로운 기사와 이전 기사가 같은 탐색 구조 안에 놓여 있어, 한 번의 소개로 끝나는 홈페이지와 다른 방식으로 콘텐츠를 쌓아갑니다.

매거진 홈페이지 제작을 준비한다면 디자인과 함께 글의 분류 기준, 기사에 표시할 정보, 지난 글을 찾는 방법을 정하는 것이 좋습니다. 이 사례에서는 공개된 목록과 기사 연결을 통해 그 구조를 확인할 수 있습니다.

읽는 흐름과 매체의 문의 경로를 구분

회사소개와 광고·제휴 안내는 기사를 읽는 흐름과 별도의 경로로 제공됩니다. 독자는 콘텐츠를 둘러보고, 매체와 협업하려는 방문자는 필요한 안내로 이동할 수 있습니다.

웹진에는 독자뿐 아니라 광고주와 제휴 담당자도 찾아옵니다. 모든 방문자를 같은 문의 버튼으로 보내기보다, 읽을 콘텐츠와 협업 안내의 목적을 구분하는 것이 매거진 사이트를 구성할 때 살펴볼 지점입니다.

매거진 홈페이지 제작을 준비하고 있다면

여행 웹진이나 브랜드 매거진을 준비하고 계신가요? 어떤 이야기를 발행할지, 독자가 기사를 어떻게 찾고 읽게 할지부터 함께 정리해 보세요.

매거진봐야쥬 사이트 보기 · 매거진 홈페이지 제작 문의