프로젝트
maykim.kr 홈페이지 구축기
may2kim
2026. 10. 13. 22:14
🎯 왜 만들었나
M365 교육 과정 중 "도메인을 직접 사서 GitHub로 홈페이지를 만들고 연결해보면 도움이 된다"는 말을 듣고 처음으로 도메인을 구매해 홈페이지를 만들어 보았습니다. 이왕 만드는 김에 취업에 활용할 수 있는 포트폴리오로 만들고 싶었습니다.
🛠️ 사용한 것
- 가비아 – 도메인 구매(maykim.kr), DNS 설정
- GitHub / GitHub Pages – 홈페이지 파일 저장 및 무료 배포
- Claude – index.html 초안 작성
📋 진행 과정
- 도메인 구매: 가비아에서 maykim.kr 2년 등록 (등록정보 숨김·안전잠금 설정)
- 홈페이지 파일 준비: Claude로 index.html 초안 작성
- GitHub 업로드: 저장소(maykim-site) 생성 후 index.html 업로드
- Pages 배포: Settings → Pages → Deploy from a branch → main / root 저장
- 도메인 입력: Pages의 Custom domain에 maykim.kr 입력 후 저장
- DNS 설정: 가비아 DNS 관리에서 아래 레코드 추가
| 타입 | 호스트 | 값/위치 | TTL |
| A | @ | 185.199.108.153 | 600 |
| A | @ | 185.199.109.153 | 600 |
| A | @ | 185.199.110.153 | 600 |
| A | @ | 185.199.111.153 | 600 |
| CNAME | www | may2kim.github.io. | 600 |
7. 연결 확인: GitHub에서 “DNS check successful” 확인
8. HTTPS 적용: Enforce HTTPS 체크 → 주고받는 정보를 암호화하고, 브라우저의 "주의 요함" 경고 없이 안전하게 접속되도록 설정
9. 직접 수정: 한 줄 소개 문구와 글자 색을 index.html에서 직접 고치고 커밋
📋 진행 과정 2 – 포트폴리오 연결
- 노션 포트폴리오 게시: 공유 → 게시, 「템플릿으로 복제」 끄기, 사이트 주소를 may2kim.notion.site 로 변경
- 가비아 포워딩 시도: 기존 DNS 설정과 충돌해 사용 불가 → 다른 방법 선택
- 이동 페이지 만들기: GitHub에 새 저장소 maykim-portfolio 생성 후, 노션으로 자동 이동하는 index.html 작성
- Pages 배포: Settings → Pages → main / root 저장
- 도메인 입력: Custom domain에 portfolio.maykim.kr 입력
- DNS 설정: 가비아에 레코드 1줄 추가
| 타입 | 호스트 | 값/위치 | TTL |
| CNAME | portfolio | may2kim.github.io. | 600 |
7. 연결 확인: 처음엔 “DNS check unsuccessful” → 시간이 지난 뒤 Check again → 성공
8. HTTPS 적용: Enforce HTTPS 체크
9. 메인 홈페이지에 버튼 추가: index.html에 「상세 포트폴리오 보기」 버튼을 직접 작성 (CSS로 모양, HTML로 링크)
🤔 어려웠던 점 / 해결한 방법
- 글자 색을 바꿀 때 휴대폰 전용 설정(@media)을 고칠 뻔함 → 기본 설정과 화면 크기별 설정의 차이를 알고 올바른 위치를 수정
- A 레코드와 CNAME의 차이가 헷갈림 → 각 레코드가 담당하는 주소와 역할을 찾아보며 이해
- 가비아 포워딩이 안 됨 → 포워딩은 도메인 전체를 넘기는 방식이라 기존 DNS 설정과 함께 쓸 수 없었음 → GitHub에 이동 페이지를 만들어 해결
- DNS 확인 실패 → 레코드가 퍼지기 전에 확인해서 생긴 일 → 기다린 후 재확인으로 해결
- 버튼 코드를 CSS 영역에 넣는 실수 → 모양(CSS)과 내용(HTML)이 들어가는 위치가 다르다는 걸 알고 수정
💡 배운 점
- A 레코드는 도메인을 서버의 IP 주소로 직접 연결하고, CNAME은 다른 도메인 이름으로 연결한다는 것
- 도메인 자체(@)에는 CNAME을 쓸 수 없어 A 레코드를 사용한다는 것
- HTML 코드를 직접 찾아 고치고 커밋하며 웹페이지가 수정·배포되는 흐름을 경험
- AI로 쉽고 빠르게 홈페이지를 만들 수 있다는 점이 재미있었고, 그동안 접하지 못했던 도메인 사이트를 처음 써보며 새로운 것을 배울 수 있었습니다.
- www와 portfolio가 같은 곳(may2kim.github.io)을 가리켜도, GitHub이 접속한 주소를 보고 각 저장소의 페이지를 보여준다는 것
- <meta http-equiv="refresh">로 다른 주소로 자동 이동시킬 수 있다는 것
📸 캡처
