깃허브 시작하기와 웹사이트 제작의 기본 개념
개발 지식이 많지 않아도 나만의 웹사이트를 인터넷에 무료로 공개하는 방법이 있습니다. 과거에는 서버를 직접 구축하고 도메인을 구매해야 했지만, 이제는 깃허브를 활용해 간단하게 개인 포트폴리오나 블로그를 운영할 수 있습니다. 깃허브는 원래 소스 코드를 관리하고 여러 개발자와 협업하기 위한 도구이지만, 내장된 무료 호스팅 기능 덕분에 웹사이트 배포 용도로도 널리 쓰이고 있습니다.
깃허브 계정 생성 및 환경 설정, 초보자도 쉽게 이해하는 레포지토리 개념
깃허브를 이용하려면 먼저 공식 웹사이트에 접속해 계정을 만들어야 합니다. 공식 사이트인 깃허브 홈페이지에서 이메일 주소와 비밀번호를 입력하면 누구나 무료로 회원가입을 진행할 수 있습니다. 가입 과정에서 본인 인증과 간단한 사용자 이름 설정을 마치면 기본적인 준비는 끝납니다.
계정을 만든 뒤 가장 먼저 이해해야 할 핵심 개념은 레포지토리입니다. 레포지토리는 쉽게 말해 프로젝트 단위로 파일을 모아두는 디지털 창고라고 생각하면 됩니다. 웹사이트를 구성하는 HTML 파일이나 이미지 등을 이 창고에 담아두게 됩니다.
- 퍼블릭 레포지토리: 파일 내용이 인터넷에 공개되며, 깃허브의 무료 웹 배포 기능을 사용할 때 주로 선택하는 설정입니다.
- 프라이빗 레포지토리: 파일 내용이 타인에게 공개되지 않고 나만 볼 수 있도록 비공개로 유지되는 창고입니다.
웹사이트를 무료로 배포하고 다른 사람들에게 보여주기 위해서는 반드시 퍼블릭 설정으로 레포지토리를 생성해야 합니다. 창고를 만들 때 이름을 영문으로 작성하고, 웹사이트 배포를 위해 공개 설정에 체크한 뒤 생성 버튼을 누르면 첫 번째 작업 공간이 완성됩니다. 이제 이 공간에 준비된 템플릿 파일을 업로드하기만 하면 웹사이트 제작의 기본 단계가 마무리됩니다.
멋진 템플릿으로 나만의 웹사이트 꾸미기
처음 웹사이트를 제작할 때 빈 화면에서 코드를 작성하는 것은 막막한 일입니다. 이미 디자인과 레이아웃이 완성된 템플릿을 활용하면 프로그래밍 지식이 부족한 초보자도 완성도 높은 웹사이트를 쉽고 빠르게 만들 수 있습니다.
무료 템플릿 사이트 추천 및 다운로드
상업적 용도로도 자유롭게 쓸 수 있는 오픈소스 템플릿을 제공하는 플랫폼을 활용하면 비용 부담 없이 멋진 디자인을 구할 수 있습니다. 가장 대표적인 무료 템플릿 제공 사이트들을 아래와 같이 추천합니다.
- HTML5 UP: 반응형 웹 디자인이 적용된 깔끔하고 세련된 원페이지 템플릿이 많아 포트폴리오 용도로 인기가 높습니다.
- 템플릿몬스터 무료 섹션: 다양한 업종별로 정돈된 레이아웃을 제공하여 비즈니스 소개용 웹사이트에 적합합니다.
- 깃허브 토픽 검색: 깃허브 검색창에 free html templates 등의 키워드를 입력하면 개발자들이 공유한 실시간 소스코드를 직접 다운로드할 수 있습니다. 템플릿 다운로드와 관련하여 공식 소스 관리가 필요하다면 깃허브 공식 홈페이지를 참고하시기 바랍니다.
마음에 드는 템플릿을 찾았다면 다운로드 버튼을 눌러 압축 파일 형태로 내 컴퓨터에 저장합니다. 압축을 해제하면 HTML, CSS, 이미지 파일 등이 포함된 폴더가 나타납니다.
템플릿 소스코드 수정하는 방법
다운로드한 템플릿은 기본적으로 영문 텍스트나 예시 이미지로 채워져 있으므로 본인의 콘텐츠에 맞게 수정하는 작업이 필요합니다. 전문적인 개발 프로그램이 없어도 텍스트 편집기만 있으면 충분히 수정할 수 있습니다.
- 코드 편집기 설치: 메모장보다는 코드 가독성이 좋고 오타를 방지해 주는 무료 편집기인 비주얼 스튜디오 코드를 다운로드하여 설치합니다.
- 폴더 열기: 편집기를 실행한 뒤 다운로드하여 압축을 푼 템플릿 폴더 전체를 통째로 불러옵니다.
- 텍스트 및 이미지 변경: 좌측 파일 목록에서 확장자가 html인 파일을 클릭하면 코드가 나타납니다. 화면에 표시되는 영어 문장을 찾아 한글로 수정하고, 이미지 파일은 같은 이름의 새 이미지로 교체하여 덮어씁니다.
- 로컬 미리보기: 수정한 HTML 파일을 더블 클릭하여 크롬 등의 웹브라우저로 열어보면 내가 바꾼 내용이 실시간으로 적용되었는지 바로 확인할 수 있습니다.
수정이 완료된 폴더는 웹사이트의 뼈대가 되는 소스코드가 되므로, 이제 깃허브에 업로드하여 무료로 인터넷에 배포하는 단계로 넘어가면 됩니다.
깃허브 페이지를 통한 무료 배포와 호스팅
깃허브에 자신이 만든 웹사이트 코드를 업로드했다면, 이제 전 세계 누구나 접속할 수 있도록 인터넷상에 공개할 차례입니다. 깃허브에서 제공하는 무료 호스팅 기능인 깃허브 페이지(GitHub Pages)를 이용하면 서버 구축 비용이나 복잡한 설정 없이도 단 몇 번의 클릭만으로 웹사이트를 배포할 수 있습니다.
깃허브 설정에서 배포 활성화하기
코드를 업로드한 저장소(Repository) 페이지로 이동한 후, 상단 메뉴에 있는 Settings(설정) 탭을 클릭합니다. 설정 페이지 왼쪽 사이드바에서 Pages 메뉴를 찾아 선택합니다.
페이지 배포와 관련된 설정 화면이 나타나면 다음과 같은 순서로 진행합니다.
- Build and deployment 항목 아래에 있는 Source 옵션을 Deploy from a branch로 설정합니다.
- 그 바로 아래에 있는 Branch 설정에서 배포에 사용할 브랜치를 선택합니다. 보통 기본값인 main 또는 master를 선택하고, 폴더는 /(root)로 지정한 뒤 Save 버튼을 누릅니다.
- 설정이 완료되면 잠시 후 페이지 상단에 웹사이트가 성공적으로 배포되었다는 초록색 안내 문구와 함께 접속 주소가 나타납니다.
배포가 완료되기까지는 통상적으로 1분에서 수 분 정도의 시간이 소요됩니다. 주소가 생성된 후 링크를 클릭하면 웹브라우저를 통해 자신이 만든 웹사이트가 정상적으로 열리는 것을 확인할 수 있습니다.
나만의 무료 도메인으로 사이트 접속하기
깃허브 페이지를 통해 배포된 기본 웹사이트 주소는 사용자 이름과 저장소 이름이 결합된 형태(예: username.github.io/repository-name)로 제공됩니다. 이 주소는 무료로 사용할 수 있어 매우 유용하지만, 주소가 다소 길거나 직관적이지 않다는 아쉬움이 있습니다.
만약 더 깔끔하고 전문적인 주소를 원한다면 가비아나 후이즈 같은 국내 도메인 등록 업체를 통해 저렴한 비용으로 개인 도메인을 구매한 뒤 깃허브와 연동할 수 있습니다. 개인 도메인 연동 과정은 다음과 같습니다.
- 구매한 도메인 업체의 DNS 관리 메뉴에서 레코드를 추가합니다.
- 타입(Type)을 CNAME으로 설정하고, 값(Value)에 본인의 깃허브 페이지 기본 주소(username.github.io)를 입력합니다.
- 깃허브 저장소의 Settings > Pages 메뉴로 돌아와 Custom domain 항목에 구매한 도메인 주소를 입력하고 저장합니다.
- 보안 접속을 위해 Enforce HTTPS 옵션을 체크하여 SSL 인증서가 정상적으로 발급되도록 설정합니다.
도메인 DNS 정보가 전 세계 인터넷망에 반영되는 전파 시간에는 통상적으로 몇 시간에서 최대 하루 정도가 소요될 수 있습니다. 연동 직후 접속이 되지 않더라도 오류가 아니므로 잠시 기다린 후 다시 접속을 시도하면 정상적으로 나만의 도메인을 통해 웹사이트가 열리게 됩니다. 도메인 구매 및 관리와 관련한 자세한 사항은 각 도메인 등록 업체의 고객센터나 안내 페이지를 참고하면 더욱 안전하게 진행할 수 있습니다.