7.1 Template: 홈페이지 만들기

1. 홈페이지를 만드는 방법 2. 솔루션을 사용하여 구축하기 3. 직접 구축하기🏡3.1 URL 구매 3.2 Notion 페이지 작업 3.3 URL을 노션페이지 연결 4. HTML로 대문페이지 만들기

1. 홈페이지를 만드는 방법

많은 기업들이 채용 공고, 홈페이지 등을 Notion으로 빠르게 구축 및 배포하고 있습니다. 방법은 크게 2가지로 나눌 수 있습니다.

혹시 홈페이지 Sample Template을 보러 오셨다면 아래 링크를 참고해주세요. Duplicate가 가능합니다.

Notion 홈페이지 URL 연결 서비스 연동

URL 구매 후 연결

2019년 초창기 책을 출판 했을 때에는 Notion이 많이 알려지기 전이었기 때문에 2번처럼 URL을 직접 연결하는 방법 외에는 없었습니다. 하지만 이제는 URL 을 연결시켜주고, 분석 도구까지 제공해주는 여러 서비스가 나왔으니 참고해보세요. 아래 홈페이지를 제작하실 때 유용하게 사용할 수 있는 솔루션을 언급해드립니다. 제가 모르는 유용한 솔루션이 있다면 comment를 달아주세요. commnet 열어두었습니다.

Notion에 투표를 하거나 익명 뎃글도 달게 할 수 있습니다.

Joey: Extension block for notion

Use Extension block to interact with guest

https://joeynotion.com/

아래와 같이 그래프를 그리는 솔루션도 있으니 참고하세요.

Notion Charts

Populate your charts with Google Sheets, where add-ons like Google Analytics and Supermetrics can keep your data current. Choose from Notion's color palette for a gorgeous aesthetic that pairs beautifully with your Notion page. Suit your fancy with Light Mode or Dark Mode. Select chart types, legend positions and other options that work with Notion.

https://www.notion.vip/charts/

방문자 통계를 알고 싶다면 아래 블로그 글을 참고해주세요.

프즈 리부트 : 네이버 블로그

http://blog.naver.com/tolovefeels/222064972163

2. 솔루션을 사용하여 구축하기

아래와 같은 솔루션을 사용하면 여러분의 페이지를 단번에 홈페이지로 만들어줍니다. 자세한 사용법이 있는 링크도 함께 첨부합니다.

oopy 콘솔

Oopy에서 자신만의 웹사이트를 만들어 보세요!

https://app.oopy.io/

노션으로 우리가게 홈페이지 만들기! (10분)

우리가게 홈페이지를 만들고 싶은데 방법은 모르겠고!

https://www.oopy.io/blogs/your-store-with-oopy

3. 직접 구축하기🏡

홈페이지 만들기는 다음과 같은 프로세스를 거칩니다.

URL 구매

노션 페이지 작업(보안상 Workspace를 별도로 만들기를 추천해드립니다.)

URL을 노션페이지 연결

3.1 URL 구매

URL을 구매할 수 있는 사이트는 많습니다. 하지만 고객센터 연결, 문제 해결 등을 고려했을 때 이번 튜토리얼에서는 한국 회사인 Cafe24를 이용하도록 하겠습니다.

Cafe24 메인페이지 입니다. 저기서 빨간색 네모 칸에 원하는 URL 주소를 입력합니다.

저희가 진행중인 캠프의 URL이 필요해서 저 URL을 구매 진행하였습니다. com만 구매하는 것이기 때문에 다른 것에는 체크박스를 풀어주세요.

저는 1년으로 구매를 하였습니다. 해당 URL은 지금은 만료되어 없습니다. 아래 정보를 입력해주셔야 하며 회원정보와 동일을 클릭하시면 회원정보로 자동 입력이 들어갑니다.

결제하시면 구입이 완료됩니다.

결제가 완료된 화면입니다. URL 연결을 해야 하므로 나의 서비스 관리로 이동을 눌러주세요.

저는 구입한 URL이 여러개라 해당 화면처럼 나옵니다. 여러분이 구입한 URL을 선택하시고 하단에 포워딩 관리를 클릭하세요. 그럼 아래 보기처럼 이동합니다.

CName 설정으로 좀 더 세분화 해서 URL을 연결할 수 있지만 여기서는 유동포워딩으로 설정하겠습니다. 포워딩 주소에 Notion 주소를 넣어주시면 됩니다.

3.2 Notion 페이지 작업

개인 작업 공간에서 왼쪽 상단에서 ID를 클릭하세요. 그런 다음 Create or Join Workspace를 클릭하시면 아래와 같이 새로운 워크스페이스가 만들어집니다.

보안상의 이유로 가능하면 새로운 워크스페이스를 만드는 것을 추천해드립니다. setting에서 workspace이름과 domain 설정을 해주세요.

Workspace URL을 입력하면 그 URL로 해당 워크스페이스에 접속할 수 있습니다. 우리는 이 Workspace URL을 bootcampisland.com과 연결시킬 것입니다.

작업이 완료된 상태입니다. 대문페이지로 사용할 페이지를 작업해야 합니다. 여기서는 노션에서 제공하는 기본 템플릿을 사용하여 작업하도록 하겠습니다. 이번에는 함께 홈페이지 작업할 작업자를 초대해볼게요.

좌측 상단에 Settings & Members를 클릭해주세요.

그럼 위와 같이 상대방을 초대할 수 있는 창이 뜹니다. Add a Member를 클릭하시면 아래와 같이 상대방의 이메일을 입력할 수 있는 창이 뜨고 상대방 이메일을 입력한 다음 Invite를 누르면 초대가 완료됩니다.

초대가 완료되셨으면 연결할 URL을 설정합니다. 우측 상단에 보시면 아래와 같은 Share 기능 키가 있습니다.

19년 업데이트 전까지만 하더라도 Search engine indexing이 무료였는데, Personal pro 기능으로 바뀌었습니다. 좋은 업데이트도 있어요. Allow editing기능은 없었는데 이제 누구나 접속해서 해당 페이지를 편집하게 하거나 comment를 달게 할 수 있습니다. 상대방이 복사를 못하게 하시려면 Allow duplicate as template은 비활성화 해주셔야 합니다.

이제 Copy link를 눌러주세요.

3.3 URL을 노션페이지 연결

좀 전에 띄어놓은 페이지에서 유동 포워딩을 클릭하신 후 웹 사이트 제목에는 원하시는 제목을, 포워딩 주소로는 노션 URL 주소(www.notion.so/bootcampisland)로 연결하시면 됩니다.

마지막으로 연결된 화면입니다. 연결되려면 설정 후 30분은 기다려야 합니다.

4. HTML로 대문페이지 만들기

대문페이지를 HTML로 만들게 되면 좀더 다양하게 커스터마이징이 가능합니다. 그러나 해당 챕터는 HTML을 어느정도 다룰 줄 알아야 하기 때문에 별도의 챕터로 편성하도록 하겠습니다.

🚪

9.6 홈페이지 대문페이지 만들기