웹사이트 개발 Ep.3 - 메인 페이지 설계와 첫 번째 시안 제작

도메인과 서버 환경이 구축된 후, 본격적으로 백일헌 고택 웹사이트의 얼굴이 될 '메인 페이지' 설계에 들어갔다.
메인 페이지는 방문자가 사이트에 처음 들어왔을 때 가장 먼저 접하게 되는 공간이기 때문에, 고택의 이미지를 제대로 전달할 수 있도록 가장 많은 고민과 시간을 들여야 했다.

---

컨셉 확정: "차분함과 여백"

메인 페이지에서 가장 강조하고 싶었던 것은 ‘차분한 고택의 분위기’였다.
너무 화려한 디자인이나 과도한 움직임은 전통 고택이 지닌 고유의 고요함과 어울리지 않는다고 생각했다.

컨셉 키워드는 명확했다.

• 차분함
• 여백
• 절제된 움직임
• 자연스러운 흐름

이를 바탕으로 메인 페이지의 첫 번째 큰 흐름을 잡았다.

---

메인 페이지 기본 레이아웃

레이아웃은 사용자의 시선을 자연스럽게 이끌 수 있도록 단순하게 구성했다.

1. 풀스크린 메인 비주얼
   사이트에 접속하면 가장 먼저 고택의 전경을 담은 고해상도 이미지가 화면을 가득 채운다.
   텍스트는 최소한으로 얹고, 로고와 심플한 메뉴바만 상단에 배치했다.
2. 고택 소개 섹션
   메인 비주얼을 아래로 스크롤하면 자연스럽게 고택의 소개 문구와 간결한 설명이 이어진다.
   긴 글 대신 2~3줄 정도의 짧은 카피라이팅을 사용해 가독성을 높였다.
3. 주요 공간 탐색 섹션
   사랑채, 안채, 별당, 정원 등 고택의 주요 공간을 작은 카드 형태로 배치했다.
   각 카드 클릭 시 상세 페이지로 넘어갈 수 있도록 설계했다.
4. 공지 및 방문 안내
   사이트 하단에는 실제 방문객을 위한 정보(오시는 길, 운영 시간, 연락처 등)를 깔끔하게 정리했다.

---

디자인 시안 제작

첫 번째 시안은 Adobe XD를 이용해 제작했다.
너무 많은 기능보다는, 사이트의 분위기와 흐름을 먼저 잡는 데 집중했다.

• 배경 색은 밝은 아이보리 톤으로 설정
• 폰트는 고전미를 살린 부드러운 고딕체 사용
• 이미지 위에 얹히는 텍스트는 최소화하고, 명암 대비로 가독성 확보
• 섹션 전환은 부드러운 페이드 인/아웃 효과로 설정

또한 모바일 대응을 고려하여, 각 섹션이 수직으로 자연스럽게 쌓이는 형태로 반응형 레이아웃을 잡았다.
PC와 모바일 모두 동일한 분위기를 유지하는 것을 가장 중요하게 고려했다.

---

시안 검토 및 수정 포인트

시안을 처음 완성했을 때, 예상보다 페이지가 다소 심심해 보였다.
하지만 ‘고택 사이트’라는 본질을 다시 생각해보니, 일부러 과하게 채울 필요가 없다는 결론에 도달했다.

다만, 너무 심플한 느낌을 보완하기 위해

• 카드형 섹션에 작은 인터랙션(마우스 오버 시 살짝 확대되는 효과)
• 스크롤할 때마다 부드럽게 등장하는 텍스트 애니메이션

을 추가하기로 했다.
이러한 디테일은 사용자에게 작은 몰입감을 주면서도 전체 톤앤매너를 해치지 않는 선에서 조정할 계획이다.