1. 공통 레이아웃·스타일 통일

• 헤더 통일: index.html, about.html, rooms.html 모두에서 클릭 가능한 로고(백일헌 종택)와 네비게이션 메뉴(홈·소개·객실 안내·예약하기) 배치를 통일했습니다. <a> 태그의 구조 오류(닫는 </a> 빠짐)를 바로잡아 모든 페이지 헤더가 정상 렌더링되도록 수정했습니다.
• CSS 정리: style.css 에 중복된 스타일을 통합하고, .header .container, .logo-img, nav ul li a 등 핵심 요소만 남겼습니다. 공통 폰트·컬러·그리드 설정으로 페이지 전반의 톤앤매너를 일치시켰습니다.

2. 메인 비주얼 슬라이더 개선

• 무한 루프 슬라이더: 3장의 비주얼 이미지를 순환 클론 구조로 배치하고, background-size: cover → contain 전환 옵션을 통해 이미지가 잘리는 문제를 해결했습니다.
• UI 컨트롤: 좌우 화살표(<, >) 클릭 시 slider-wrapper가 화면 너비만큼 스크롤되도록 scrollBy 로직을 추가해, 한 번에 한 장씩 자연스럽게 이동하도록 완성했습니다.

3. 페이지 내 앵커 스크롤

• 부드러운 이동: 네비게이션 메뉴 클릭 시 페이지 내 #about, #rooms, #reservation 섹션으로 scroll-behavior: smooth;가 작동하도록 html { scroll-behavior: smooth; scroll-padding-top: 6rem; } 를 적용해, 고정 헤더에 가려지지 않게 했습니다.

4. 고택 소개·객실 안내 탭 UI

• about.html: “1. 고택 이야기 / 2. 체험 프로그램 / 3. 사색의 길 산책 코스 / 4. 갤러리” 목록 클릭 시 오른쪽 콘텐츠가 전환되는 탭 인터페이스를 구현했습니다.
  • .about-sidebar li[data-tab] 클릭으로 .tab-content를 토글하며, active 클래스로 선택된 콘텐츠만 노출합니다.
• rooms.html: 동일한 방식으로 “1. 건너방 / 2. 윗사랑방 / 3. 아랫사랑방” 탭을 추가해, 카드형 그리드 대신 콘텐츠 전환형 레이아웃을 완성했습니다.

5. 인터랙션·애니메이션

• IntersectionObserver: reservation.js에 포함된 Fade-in 애니메이션 로직으로, 페이지 스크롤 시 각 <section>에 .visible 클래스를 붙여 자연스러운 진입 효과를 부여했습니다.
• CSS 트랜지션: 탭 사이드바·카드 호버·화살표 버튼 모두에 transition을 설정해, 사용자 동작 시 깔끔한 피드백을 제공합니다.

1. 블로그 개설 및 도메인 연동

• 서브도메인 설정: blog.baekilheon.com 서브도메인을 가비아 DNS 관리 화면에서 CNAME 레코드로 티스토리에 연결.
• 보안 인증: Let’s Encrypt를 통해 HTTPS 적용. 본문, 이미지, 위젯 로딩 시 Mixed Content 오류 없이 안정적 접속 보장.

2. 스킨 커스터마이징 – 메인 페이지와의 시각적 연계

• 배경 & 타이포그래피: 메인 페이지와 동일한 아이보리톤 배경, 여백 확보. 제목은 고전 서체 웹폰트(한글 ‘금속활자체’), 본문은 부드러운 고딕체로 가독성 유지.
• UI 요소: 본문 내 ‘인용구 박스’, ‘체험신청 버튼’에만 은은한 그림자·테두리 추가. 카드형 레이아웃은 메인 페이지 ‘주요 공간 탐색 섹션’ 카드 디자인과 통일감을 준다.

3. 카테고리 구성 및 콘텐츠 맵

1. 고택 이야기
   • 역사 개요: 1728년 이삼 장군 하사금으로 건립, 국가민속문화유산 제273호 지정 .
   • 건축 구조: 안채·사랑채·별당·광채가 ‘ㅁ’자형 배치된 변격 한옥, 동향 대문채·문간채 해설.
   • 유물 전시: 가문 고문서·서책, 19세기 민속 소품 사진 갤러리.
2. 체험 프로그램
   • 한옥스테이: 객실별 사진·요금·예약 링크(예약 폼 위젯 삽입).
   • 전통 다례·공예: 다례 체험 일정, 목판화·매듭공예 워크숍 안내.
   • 공연·강연: 국악 연주회·한옥 건축 강연 일정.
3. 사색의 길 산책 코스
   • 코스 설명: 뒤뜰→매봉재→충헌사→옛 우물터→선비계단 순환 약 2km(소요 40분).
   • 포인트 가이드: 소나무 숲 팔각정·노성산 전망대 사진·동선 지도 삽입.
4. 방문 후기 & 갤러리
   • 방문객 체험담: 사진, 별점, 코멘트 템플릿.
   • 포토 갤러리: 고택 풍경·계절별 모습 슬라이드쇼.

4. 예약 시스템 & 알림 연동

• 위젯 삽입: Ep.2에서 개발한 CSS/HTML/JS 기반 예약 폼을 블로그 사이드바에 배치.
• Firebase Functions: 폼 제출 시 관리자 SMS·이메일 자동 알림.
• 달력 캘린더: 이미 예약된 날짜 비활성화 처리, 가독성 높은 달력 UI 적용.

5. 다국어 지원 & SEO 최적화

• 콘텐츠 언어 분리: 한국어·영어·중국어·일본어 버전 포스트 작성, <link rel="alternate" hreflang="…"> 태그 적용.
• 메타·OG 태그: 언어별 메타 설명, SNS 공유 시 적절한 언어·이미지 노출.
• 키워드 & 내부 링크: “백일헌 종택”, “한옥스테이”, “사색의 길” 등 주요 키워드 밀도 조절, 메인 페이지·상세 페이지 상호 링크 강화.

6. 콘텐츠 발행 스케줄 & 운영 프로세스

• 발행 주기: 매주 화·금, 주 2회 정기 포스팅.
• 검수 절차: 사전 맞춤법·링크·이미지 품질 확인 후 발행, 발행 직후 네이버·구글 서치콘솔 자동 색인 스크립트 실행.
• SNS 연동: 카카오톡 채널·인스타그램 카드 링크 공유 버튼 배치.

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

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

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

컨셉 키워드는 명확했다.

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

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

메인 페이지 기본 레이아웃

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

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

디자인 시안 제작

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

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

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

시안 검토 및 수정 포인트

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

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

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

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

백일헌 고택 웹사이트 프로젝트의 두 번째 단계는 본격적인 사이트 기반을 마련하는 작업이었다.
고택을 소개하는 사이트인 만큼, 단순한 블로그 느낌이 아니라 독립된 웹사이트로서 신뢰감을 주어야 했다. 이를 위해 가장 먼저 도메인을 확보하고, 기본적인 서버 환경을 구성하는 일부터 시작했다.

도메인 구매: 이름에 담은 의미

도메인은 사이트의 얼굴이다. 특히 전통 건축을 소개하는 사이트인 만큼, 지나치게 현대적인 느낌이나 가벼운 이미지는 피하고 싶었다.
도메인 이름을 고르는 데만 하루 넘게 고민했다. 한눈에 기억하기 쉽고, 고택의 정체성을 간결하게 표현할 수 있어야 했다.

최종적으로, ‘고택’과 ‘백일헌’이라는 키워드를 살짝 변형해 단순하고 직관적인 도메인을 확보했다.
구매는 신뢰할 수 있는 국내 도메인 등록업체를 통해 진행했고, 관리의 편의를 위해 SSL 인증서도 함께 세팅했다.
방문자가 접속할 때 '보안 연결'이 적용되는 HTTPS는 필수였다. 사이트 신뢰도에 직접적으로 영향을 미치기 때문이다.

서버 선택: 단순하지만 탄탄하게

도메인을 구매한 후, 이제 사이트를 올릴 서버가 필요했다. 처음에는 클라우드 서비스나 VPS를 고려했지만,
운영 복잡도와 초기 규모를 생각해 합리적인 가격대의 웹호스팅 서비스를 선택했다.

웹호스팅은 설정이 간단하고, 안정적으로 운영할 수 있어 작은 규모의 전통문화 사이트를 시작하는 데 적합했다.
특히 웹호스팅 패널에서 바로 SSL 연동, FTP 접속, DB 설정 등을 지원해주기 때문에 빠르게 개발 환경을 준비할 수 있었다.

기본 폴더 및 파일 구조 설정

서버에 접속한 후, 사이트의 기본 틀을 만들기 시작했다.
폴더와 파일을 체계적으로 정리해두는 것은 나중에 작업할 때 시간을 아끼는 데 매우 중요하다.

구성은 다음과 같이 잡았다.

• / : 메인 루트 폴더
  • /assets/ : 이미지, 폰트, 아이콘 등 리소스 파일
  • /css/ : 스타일 파일
  • /js/ : 자바스크립트 파일
  • /pages/ : 서브페이지별 HTML 파일
  • /index.html : 메인 페이지

간결하지만 확장성까지 고려한 구조였다. 앞으로 콘텐츠가 늘어나더라도 폴더를 추가하거나 수정하기 쉽게 설계했다.

도메인 연결 완료

모든 준비를 마친 뒤, 도메인과 서버를 연결했다.
네임서버를 설정하고, 도메인 설정에서 웹호스팅 IP를 연결해준 후 대략 10분 정도 기다리니 접속이 가능해졌다.

브라우저 주소창에 직접 구매한 도메인을 입력했을 때, 아무런 문제 없이 초기 화면이 뜨는 걸 확인했을 때의 그 작은 뿌듯함은 개발자만이 느낄 수 있는 보람이었다.

전통 건축을 소개하는 웹사이트를 만든다는 것은 단순한 정보 나열 이상의 의미가 있다. 이번 프로젝트의 목표는, 오래된 고택의 역사와 아름다움을 온라인 공간에서 살아 숨 쉬게 하는 것이었다.

초기에는 많은 고민이 있었다. 기존에 운영되고 있는 전통문화 관련 사이트들을 여러 곳 참고하면서 방향을 잡기 시작했다. 디자인, 콘텐츠 구성, 사용자 흐름 등 다양한 부분을 세심하게 분석했다. 하지만 단순히 비슷하게 따라 만드는 것이 아니라, '백일헌 고택만의 이야기'를 담아야 한다는 것을 잊지 않으려고 했다.

직접 운영하는 독립 도메인 선택

처음에는 블로그 플랫폼을 활용할지, 아니면 별도 사이트를 구축할지 고민했다.
결국 '직접 도메인을 구매하고 사이트를 운영하자'는 결론을 내렸다.

이유는 간단했다.
1. 자유로운 콘텐츠 구성, 2. 디자인 제한이 없음, 3. 장기적인 브랜딩 가능성 때문이었다.
티스토리나 워드프레스 무료형 서비스에 비해 당장은 조금 더 번거롭고 비용이 들지만, 사이트를 제대로 키워나가기 위해서는 독립 도메인이 필요하다고 판단했다.

현재까지 진행한 작업 흐름은 다음과 같다.

1. 도메인 구매 및 연결 준비
2. 기본 사이트 구조 구상
3. 메인 페이지와 서브페이지 레이아웃 설계
4. 필요한 콘텐츠(사진, 설명문) 수집 및 정리

사이트 기획 방향: "하나의 작은 문화 공간"

백일헌 고택 사이트는 단순한 정보 제공 페이지가 아니다.
기획 단계에서 가장 중요하게 생각한 것은 '이곳을 찾는 사람들이 작은 문화 공간을 거닐듯이 경험할 수 있게 하자'는 점이었다.

따라서 콘텐츠 구조도 그에 맞춰 설계했다.

• 고택 소개: 간결하지만 깊이 있는 역사 설명
• 공간별 탐방: 사랑채, 안채, 정원 등을 섹션별로 나누어 상세 소개
• 연관 이야기: 고택을 둘러싼 인물과 지역 이야기
• 방문 안내: 위치, 운영시간 등 기본 정보 제공

각 페이지는 따로 떨어진 느낌이 아니라 하나의 이야기처럼 연결되도록 구상하고 있다.

참고 사이트 분석: 배우되, 베끼지 말 것

작업에 착수하기 전에, 비슷한 느낌의 전통문화, 고택 소개 사이트들을 다수 살펴봤다.
디자인 톤, 메뉴 구성, 모바일 최적화 방식 등은 좋은 참고가 되었지만, 그대로 모방하지 않고 백일헌 고택의 정체성을 살릴 수 있도록 차별화를 염두에 뒀다.

특히 주의했던 점은 '과한 연출'을 피하는 것이었다. 전통 고택의 매력은 화려함이 아니라, 절제와 여백에 있다.
웹사이트도 마찬가지였다. 깔끔하고, 불필요한 꾸밈 없이 본질을 보여주는 방향으로 잡았다.