웹 게임을 모바일에서 실행하려면, 안드로이드 앱으로 변환해야 합니다. 이를 위해 여러 가지 방법이 있지만, 가장 일반적인 방법은 **웹뷰(WebView)**를 사용하거나 **PWA(Progressive Web App)**로 변환하는 방식입니다. 이 글에서는 웹 게임을 안드로이드 앱으로 변환하는 주요 방법과 그 과정을 소개하겠습니다.

1. 웹뷰(WebView) 사용하기

웹뷰(WebView)는 안드로이드 앱 내에서 HTML, CSS, JavaScript로 작성된 웹 페이지를 실행할 수 있도록 해주는 컴포넌트입니다. 웹 게임을 앱 내에서 실행하려면 웹뷰를 활용하는 것이 가장 직관적인 방법입니다.

단계별 구현 과정:

1. 안드로이드 스튜디오 설치: 안드로이드 앱을 만들기 위해서는 안드로이드 스튜디오를 설치해야 합니다.
2. 새로운 프로젝트 생성: 안드로이드 스튜디오에서 새 프로젝트를 생성합니다. 프로젝트는 "Empty Activity" 템플릿을 선택합니다.
3. 웹뷰 설정: activity_main.xml 파일에 웹뷰를 추가합니다.
4. 웹 게임 로드: MainActivity.java 파일에서 웹뷰를 설정하고, HTML 게임 파일을 로드합니다. 로컬 파일을 로드하거나, 웹 서버에 호스팅된 게임 URL을 사용할 수 있습니다.
5. 빌드 및 실행: 앱을 빌드한 후, 실제 안드로이드 디바이스나 에뮬레이터에서 실행합니다.

장점:

• 구현이 간단하고 빠르며, 기존의 HTML 게임을 그대로 사용할 수 있습니다.
• 별도의 네이티브 코드 작성 없이도 HTML, CSS, JavaScript로 만든 웹 게임을 모바일에서 실행할 수 있습니다.

단점:

• 네이티브 앱의 성능을 구현하려면 제한이 있을 수 있으며, 게임의 성능이 낮을 수 있습니다.
• 사용자 경험이 웹 브라우저와 비슷할 수 있어, 네이티브 앱처럼 보이기 위해 추가적인 커스터마이징이 필요할 수 있습니다.

2. PWA(Progressive Web App)로 변환하기

PWA는 웹 애플리케이션을 네이티브 앱처럼 사용할 수 있도록 만들어주는 기술입니다. PWA는 웹 게임을 앱처럼 실행하고, 홈 화면에 아이콘을 추가할 수 있으며, 오프라인 기능도 제공할 수 있습니다.

PWA 설정 과정:

1. manifest.json 파일 작성: 웹 애플리케이션의 기본 정보를 담은 manifest.json 파일을 작성합니다.
2. Service Worker 구현: 오프라인 기능을 제공하기 위해 Service Worker를 설정합니다. Service Worker는 게임의 파일을 캐싱하고, 네트워크가 없을 때도 게임을 실행할 수 있게 합니다.
3. PWA 기능 활성화: 브라우저에서 웹 게임을 실행하고, "홈 화면에 추가" 옵션을 통해 앱처럼 실행할 수 있습니다.

장점:

• 네이티브 앱처럼 홈 화면에 아이콘을 추가하고, 오프라인에서도 실행할 수 있습니다.
• 별도의 앱스토어 배포 없이도 웹 게임을 모바일 앱처럼 사용할 수 있습니다.

단점:

• 구글 플레이와 같은 앱 마켓에 배포하려면 네이티브 앱으로 변환하는 과정이 필요합니다.
• 일부 기능은 웹 환경에서만 지원되므로, 고급 네이티브 기능은 사용할 수 없습니다.

3. Cordova 또는 Capacitor 사용하기

Cordova와 Capacitor는 HTML, CSS, JavaScript로 작성한 웹 애플리케이션을 네이티브 모바일 앱으로 변환해주는 오픈 소스 플랫폼입니다. 이들 도구를 사용하면 웹 게임을 쉽게 안드로이드 앱으로 패키징할 수 있습니다.

Cordova나 Capacitor를 사용하면 웹 게임을 안드로이드 앱처럼 배포할 수 있으며, 추가적인 네이티브 기능도 쉽게 통합할 수 있습니다.

이번 업데이트에서는 모바일과 PC에서 각각 최적화된 이동 시스템을 구현했습니다. 모바일 기기에서는 터치를 통해 조이스틱을 이용하여 게임을 진행할 수 있고, PC에서는 전통적인 WASD 키를 사용하여 이동할 수 있는 시스템을 도입했습니다. 이로써 다양한 장치에서 편리하고 직관적인 사용자 경험을 제공하게 되었습니다.

1. 모바일에서의 터치 조이스틱

모바일 사용자의 경우, 화면에서 손가락으로 조이스틱을 직접 조작하여 게임을 플레이할 수 있습니다. 터치 시작 시 화면에 조이스틱 UI가 표시되고, 손가락을 이동시키면 조이스틱의 버튼이 플레이어의 이동 방향을 계산하여 그에 맞게 캐릭터가 이동하게 됩니다. 이 방식은 모바일 환경에서 자연스러운 직관적인 조작을 가능하게 해줍니다.

2. 터치 조이스틱의 동작 방식

• 터치 시작 시 조이스틱이 화면에 표시되며, 손가락 위치를 기준으로 조이스틱이 중심을 잡습니다.
• 터치 이동에 따라 조이스틱 버튼이 이동하며, 각도와 거리를 계산하여 플레이어의 이동 방향을 조정합니다.
• 터치 종료 시 조이스틱이 사라지고, WASD 키 입력이 다시 활성화됩니다.

이 시스템을 통해 모바일에서 터치만으로 게임을 플레이할 수 있으며, WASD 입력은 모바일 환경에서는 비활성화됩니다. 이로써 사용자 경험이 모바일 기기에서도 간단하고 직관적이게 되었습니다.

3. PC에서의 WASD 키 입력

PC 사용자는 여전히 WASD 키를 통해 게임 캐릭터를 조작할 수 있습니다. 터치 입력이 비활성화될 때 WASD 키를 통해 이동을 처리하며, PC 환경에서의 전통적인 입력 방식을 그대로 유지합니다. 터치 감지가 이루어지지 않으면 WASD 키는 정상적으로 작동하게 됩니다.

4. 터치와 WASD 입력의 분리

• 모바일 환경에서 터치가 감지되면, 조이스틱이 활성화되고, WASD 입력은 비활성화됩니다.
• PC 환경에서는 WASD 키 입력이 항상 활성화되며, 터치 감지가 되지 않으면 WASD로 이동이 가능합니다.
• 터치 종료 시에는 WASD 키가 다시 활성화되고, 조이스틱 UI는 사라지게 됩니다.

이 시스템은 모바일과 PC 환경에서 각각 최적화되어 사용자에게 더 나은 사용자 경험을 제공합니다. 터치 조이스틱을 통해 모바일 환경에서 자연스러운 조작을 제공하고, PC 환경에서는 WASD 키를 통해 정통적인 입력 방식을 유지하는 구조입니다.

5. UI/UX 향상

이번 업데이트는 UI/UX 측면에서도 큰 향상을 가져왔습니다. 터치 조이스틱은 손끝으로 이동을 실시간으로 감지하여 직관적인 게임 플레이를 제공합니다. 또한, 터치가 끝난 후 WASD 키가 다시 활성화되는 방식으로, 모바일과 PC를 원활하게 전환할 수 있습니다. 이를 통해 사용자는 두 환경에서 모두 자연스러운 게임 경험을 할 수 있습니다.

6. 향후 계획

현재 터치 조이스틱과 WASD 키 입력 방식을 구현한 후, 향후 다양한 디바이스 환경에 맞춘 최적화를 진행할 예정입니다. 또한, 플랫폼 간의 호환성을 고려하여 모바일과 PC 모두에서 원활한 게임 진행이 가능하도록 지속적인 업데이트를 진행할 것입니다.

[업데이트]_거대 파이어볼 기능 추가 및 충돌 시스템 개선

안녕하세요, CastleSurvive 개발자입니다. 오늘은 게임 내 중요한 업데이트가 있었습니다. 바로 거대 파이어볼 기능이 추가되었고, 이와 함께 충돌 시스템도 크게 개선되었습니다. 이번 글에서는 이번 업데이트의 주요 내용을 자세히 설명드리려고 합니다.

1. 거대 파이어볼 기능 추가

먼저, 새로운 스킬인 거대 파이어볼을 게임에 추가했습니다. 이 스킬은 기존의 파이어볼보다 크기가 커지고, 더 강력한 데미지를 가진 특수한 파이어볼입니다. 발사된 후, 거대 파이어볼은 일정한 속도로 이동하면서 경로상의 몬스터들에게 지속적으로 데미지를 입힙니다.

• 거대 파이어볼의 크기는 기존 파이어볼보다 2배 큰 96으로 설정되었으며, **속도는 기존보다 약간 느린 70%**로 조정하여 전략적인 사용을 유도합니다.
• 발사 시, 몬스터의 위치와 파이어볼의 이동 경로를 계산하여 정확한 방향으로 발사되며, 관통 기능이 적용되어 여러 몬스터를 지나치면서 데미지를 주게 됩니다.

이제 플레이어는 파이어볼을 발사할 때 더 많은 몬스터를 동시에 처치할 수 있는 강력한 공격 옵션을 가지게 되었습니다.

2. 충돌 시스템 개선

또한, 파이어볼이 지나간 몬스터들에게 데미지를 주는 시스템이 새롭게 구현되었습니다. 기존에는 파이어볼이 몬스터와 충돌할 때만 데미지를 주었지만, 이번 업데이트에서는 파이어볼이 이동하는 경로에 있는 모든 몬스터에게 지속적으로 데미지를 입히는 방식으로 변경되었습니다.

• 거리 계산: 이제 파이어볼과 몬스터 사이의 거리를 계산하여, 두 객체가 충돌했는지 아닌지를 판단합니다. Math.hypot() 함수를 사용해 파이어볼과 몬스터 사이의 유클리드 거리를 계산하고, 그 거리가 두 원의 반지름 합보다 작으면 충돌로 간주하여 데미지를 입힙니다.
• 반지름 합: 몬스터와 파이어볼은 각각 원형으로 간주하며, 파이어볼과 몬스터의 위치와 크기에 따라 충돌 여부를 판별합니다. 이로 인해 파이어볼이 지나가는 경로에 있는 몬스터들이 파이어볼과 충돌하게 되며, 몬스터는 지속적으로 데미지를 입습니다.

이 업데이트는 파이어볼의 효과를 더욱 넓히고, 게임의 전략적 깊이를 더하는 중요한 요소가 될 것입니다. 이제 파이어볼을 적절하게 사용하여 더 많은 몬스터를 처치하고, 보다 효과적인 공격을 할 수 있게 되었습니다.

3. 넉백 효과와 몬스터 사망 처리

또한, 파이어볼이 몬스터에게 충돌할 때 넉백 효과도 추가되었습니다. 파이어볼이 몬스터를 맞추면, 몬스터는 밀려나게 되며, 이 효과는 보스 몬스터와 일반 몬스터에 따라 강도가 다르게 적용됩니다.

• 넉백 강도는 몬스터의 타입에 따라 다르게 설정되어, 보스 몬스터는 약하게 밀리고, 일반 몬스터는 더 강하게 밀리도록 조정됩니다.
• 몬스터의 체력이 0 이하로 떨어지면 사망 처리가 이루어지고, 경험치와 킬 카운트가 증가합니다. 사망한 몬스터는 배경 사운드와 함께 삭제되며, 게임 내 진행 상황에 따라 레벨업도 가능합니다.

4. 파이어볼 삭제와 화면 밖으로 나간 발사체 처리

마지막으로, 파이어볼이 화면을 벗어나면 자동으로 삭제되도록 설정되었습니다. 파이어볼이 게임 영역을 벗어나면 더 이상 존재할 필요가 없기 때문에, 이를 효율적으로 처리하여 게임의 성능을 최적화하고, 불필요한 리소스를 절약할 수 있습니다.

결론

이번 업데이트는 거대 파이어볼과 충돌 시스템 개선을 통해 게임의 전략적 요소를 크게 강화했습니다. 거대 파이어볼은 플레이어에게 강력한 공격 수단을 제공하고, 충돌 시스템 개선은 게임을 더 직관적이고 재미있게 만들었습니다. 앞으로도 CastleSurvive는 지속적인 업데이트와 개선을 통해 더 많은 재미를 선사할 예정이니, 많은 기대 부탁드립니다!

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분 정도 기다리니 접속이 가능해졌다.

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