Notion으로 코딩 없이 쉽게 웹사이트 만들기

회사 웹사이트에 페이지를 추가하는 작업은 디자이너, 엔지니어 그리고 바쁜 일정 사이에서 균형을 맞춰야 하는 지루한 프로세스일 가능성이 높습니다. 정말 간단한 페이지들도 여러 팀을 거쳐 만들어야 하는 일이니까요.

하지만 Notion에서는 클릭 한 번이면 웹으로 페이지를 게시할 수 있습니다. 아래에서 방법을 알아보세요.

• 개발자 없이도 아름다운 페이지를 구축해 보세요. 수십 개의 임베드와 제목, 열과 같은 도구를 사용할 수 있어 복잡한 콘텐츠 관리 시스템을 구축할 때 종종 필요한 개발자 리소스가 전혀 없이도 시각적으로 풍부한 웹사이트를 만들 수 있습니다.

• 직접 페이지를 게시하세요. 웹사이트를 구축 또는 확장하기 위해 디자이너, 엔지니어와 씨름할 필요가 없습니다. 어떤 Notion 페이지도 공개 페이지로 쉽고 빠르게 만들 수 있으며 링크를 공유해 페이지를 선보이거나 심지어는 검색 엔진에서 검색되게 만들 수도 있습니다.

Notion을 활용하면 몇 번의 클릭만으로 웹사이트를 만들 수 있습니다. 페이지에서 공유를 클릭하고 웹에서 공유를 켜면 끝입니다. 링크가 있는 사람이라면 페이지를 볼 수 있습니다. 또한 페이지에서 편집을 하면 실시간으로 편집한 내용이 반영되어 방문자들은 편집된 버전을 볼 수 있습니다. 믿을 수 없이 간단하죠?

아무것도 없이 처음부터 만들고 싶지 않은 사용자분들이 빠르게 페이지를 완성할 수 있도록 출발점으로 사용 가능한 템플릿을 공유합니다. 또한 아이디어를 얻으실 수 있도록 Notion을 활용해 웹사이트를 구축한 회사들의 예시도 공유합니다.

채용 보드: 채용 관련 상황은 항상 유동적입니다. 그렇기 때문에 채용이 끝난 직무를 빼고, 새로운 채용 공고를 올리고, 회사 사명을 다시 작성하는 등의 업데이트 사항을 빠르게 반영할 수 있는 채용 보드는 매우 유용합니다. 보는 사람의 시선을 사로잡고 유용한 정보를 담은 채용 보드는 어떤 환경의 회사인지 보여주는 창문의 역할을 합니다.

채용 보드 템플릿을 복사해서 워크스페이스에서 사용해 보세요.

도움말 센터: 고객 서비스 관련 이메일이 쌓이는 것을 줄여줍니다. 여태 받았던 고객 지원 관련 이메일을 살펴보고 가장 많은 질문을 받았던 사항에 대한 답변을 포함한 콘텐츠를 작성해 게시하세요. 고객들이 더 쉽게 찾고 있던 답변을 확인할 수 있습니다.

Notion에서는 이러한 콘텐츠를 하위 페이지에 쉽게 정리하고 필요에 따라 편집할 수 있습니다.

필요할 때 언제나 사용할 수 있는 도움말 센터 템플릿입니다.

블로그 게시물: 커뮤니티를 구축하고 딱딱한 CMS(콘텐츠 관리 시스템)에 의존할 필요 없이 역동적인 콘텐츠를 만들어 보세요. Notion에서 블로그 게시물을 작성하고 깔끔하고 가독성이 좋은 게시물을 만들어 다른 사람들에게 공개할 수 있습니다. 목차, 오디오 파일, 이미지, 동영상과 같은 요소들을 페이지에 바로 임베드할 수 있어 독자들의 집중력이 높아집니다.

블로그 포스트 템플릿으로 당신의 이야기를 들려주세요.

로드맵: 기존 고객뿐만 아니라 잠재 고객과도 공유할 수 있는 제품 로드맵을 활용해 보세요. 로드맵을 게시하면 고객은 어떠한 기능을 지닌 제품을 만나게 될지 파악할 수 있습니다. 심지어는 공개 편집 기능을 켜면 고객이 원하는 기능을 제출하는 것도 가능합니다.

로드맵 템플릿을 복사해 워크스페이스에서 사용해 보세요.

Notion 페이지를 원하는 대로 바꿔서 사용할 준비는 되었지만 어떤 모습이 될 지 아직 상상이 안 되시나요? 여기 소개된 회사들은 전적으로 Notion만을 활용해서 탁월한 웹사이트를 제작했습니다. 아마 이 회사들의 웹사이트가 창의력을 자극할지도 모르겠네요.

Blendle의 직원 안내서: 네덜란드의 온라인 뉴스 플랫폼인 Blendle에서는 활발히 사용 중인 위키를 공개적으로 게시합니다. Blendle의 직원 안내서를 통해 회사 위키 구축 방안에 대한 아이디어를 얻어 보세요. 신입 직원에게 알려주는 회사 목표, 회사 추천 도서 리스트, 회사 가치를 구성하는 방식을 깔끔하고 체계적으로 보여줍니다.

Toucan의 회사와 친해지게 만드는 채용 보드: 새로운 언어를 배울 수 있게 도와주는 브라우저 확장 프로그램을 만든 Toucan의 채용 보드는 회사의 가치와 팀원들을 전면에 내세웁니다. 심지어 현재 근무자가 누구인지 표시하는 데이터베이스도 있어 향후에 직장 동료가 될지도 모르는 사람에 대해 미리 파악할 수도 있습니다.

페이지에서 /를 입력하면 페이지에 포함할 수 있는 요소의 전체 메뉴가 나타납니다. 해당 요소를 사용하려면 /이미지나 /typeform과 같이 /를 입력하고 사용하고 싶은 요소의 이름을 입력하세요.

1. 제목과 줄 바꿈: H1(제목 1), H2(제목 2), H3(제목 3)을 활용해 콘텐츠를 빠르게 파악하고 원하는 내용을 쉽게 찾을 수 있도록 만들어 보세요. 텍스트가 너무 긴 경우에는 대시 기호(—)를 연속적으로 세 개를 입력해 줄 바꿈으로 텍스트를 나눠보세요.

2. 열: 한쪽에는 이미지를, 다른 쪽에는 텍스트를 배치해 신문과 같은 느낌이 나는 레이아웃을 활용해 보세요 ⋮⋮ 아이콘으로 드래그 & 드롭하면 Notion 페이지에서 원하는 곳에 페이지, 텍스트, 이미지를 배치할 수 있습니다. 열을 생성하고 싶으면 기존 콘텐츠를 왼쪽이나 오른쪽으로 드래그 & 드롭하세요. 파란 수직선이 나타나 원하는 위치를 찾는데 도움을 줍니다.

3. 목차: 목차는 사이트에서 독자들이 원하는 섹션으로 바로 넘어갈 수 있게 만들어 줍니다. /목차를 입력하면 섹션을 나누는 제목을 활용한 목차를 생성할 수 있습니다.

4. 이미지/동영상/오디오: 멀티미디어를 경험할 수 있는 환경을 만들어 보세요. YouTube 동영상을 임베드하거나, 팟캐스트 파일을 업로드하거나, 이미지를 Notion 페이지로 바로 드래그 & 드롭할 수 있습니다. 이미지나 동영상의 측면에 생기는 바를 이용하면 크기도 조정할 수 있습니다.

   

5. Typeform 임베드: Typeform을 Notion 페이지에 삽입하면 피드백을 수집하거나 연락처 포털을 만들 수 있습니다.

6. 콜아웃과 인용: 특정한 섹션이나 문장을 돋보이게 만드는 콜아웃이나 인용을 활용해 보세요. 다른 유명 블로그에서도 흔히 사용하는 기능입니다.

   

7. 토글 리스트: 자주 묻는 질문(FAQ)과 같은 콘텐츠의 경우 토글 리스트를 활용해 웹사이트 방문자에게 가장 관련성이 높은 정보만 표시되게 만들면 방문자는 편하게 필요한 내용을 찾을 수 있습니다. 가장 핵심이 되는 정보를 토글의 미리보기에 두고 나머지 내용은 안에다 중첩시켜 두세요.

8. 색: 디자인을 원하는 대로 바꾸거나 텍스트 색이나 배경색을 다르게 해서 콘텐츠를 강조해 보세요. 원하는 텍스트를 강조 표시하고 •••을 클릭한 후 색을 선택해 원하는 텍스트 색이나 배경색을 선택하세요.

편집 허용: Notion에 로그인한 사용자라면 누구든지 내가 작성한 페이지를 편집할 수 있도록 허용해 페이지의 레이아웃이나 콘텐츠에 대한 협업을 할 수 있습니다. Notion 계정으로 로그인하지 않은 사용자는 읽기 전용 버전만 볼 수 있습니다. 예를 들어 회사의 도움말 센터 페이지를 공유하는 경우에는 이 기능을 꺼놓는 것이 좋습니다. 하지만 고객과 웹사이트의 초안 버전을 공유하면 대중에게 웹사이트를 공개하기 전에 고객의 피드백을 받을 수 있어 좋겠죠.

템플릿 복제 허용: 정말 멋진 랜딩 페이지 템플릿을 제작했는데 다른 회사들도 이 템플릿 포맷을 유용하게 쓸 수 있을 것 같다는 생각이 든다면, 제작한 페이지를 템플릿으로 복제할 수 있게 만들어 주세요. 템플릿을 복제한 사용자는 해당 템플릿을 자신의 Notion 워크스페이스에 저장할 수 있습니다. 이 옵션은 공유 메뉴에서 사용할 수 있습니다.

검색 엔진 인덱싱: 트래픽을 늘리고 페이지가 Google과 다른 검색 엔진에서 보일 수 있도록 합니다.

혼자서 콘텐츠를 게시할 수 있으니 Notion에서 다양한 페이지를 만들고 소소한 변경 사항을 반영하는 건 정말 쉽게 하실 수 있을 겁니다.