노션으로 만든 신입생 오티 웹페이지

신입생 오리엔테이션을 위해서 여러 안내 자료를 탑재한 웹페이지를 노션(Notion)으로 만들었습니다.

이 글에서 디자인과 기능에 관한 몇 가지 팁을 나눠보려 합니다.

 

노션으로 만든 신입생 오티 웹페이지

 

노션으로 만든 페이지는 웹에 게시를 할 수 있습니다.

노션 페이지 그대로 게시하는 방법도 있지만, 우피(oopy)라는 서비스를 이용하면 홈페이지처럼 여러 옵션을 설정할 수 있습니다. 이 웹페이지의 경우, 상단 메뉴바와 폰트 변경, '맨 위로' 버튼, 카카오톡 채널 버튼, 방문자 카운터, 눈 오는 효과 등이 적용되었습니다. 

 

신입생 오리엔티이션용 웹페이지를 만들 때 이렇게 구상했습니다.

 

• '환영'의 느낌이 나는 이미지 활용: 선배들이 운동장에서 환영하는 설정이면 좋겠다 생각해서 제미나이로 만들었습니다. 일단 학생들의 표정이 드러나게 커버 이미지를 설정하고, 이미지 전체를 가장 하단에 넣었습니다. 그래야 맨아래까지 집중력 있게 살펴볼 수 있지 않을까 하고 말이죠. 참고로, 우리학교는 저 시커먼 것이 교복입니다. :)
• 각각의 내용은 한 페이지에 담지 말고, 여러 하위 페이지에 만들기: 처음에는 한 화면에 모두 담았었는데 2가지 문제가 있었습니다. 스크롤 압박이 심했고, 동시에 여러 동영상과 안내 자료가 로딩되면서 처리 속도가 떨어졌습니다. 결정적으로 초딩인 제 아들에게 보여줬더니 모든 동영상을 동시에 틀고 흥미롭게 바라보고 있는 것을 목격하고서, "아, 다른 학생들고 이렇게 하겠구나."하는 생각이 들어 자료마다 다른 페이지로 구성하는 것으로 계획을 변경했습니다. 
• 하위 페이지는 링크만 하지 말고 버튼처럼 디자인하기: 링크만 덜렁 걸어놓으면 너무 단순하고, 무엇보다 흥미롭지 않습니다. 저는 노션의 '인용' 블록을 활용해서 하위 페이지를 버튼처럼 링크했고요, 그 절차는 이렇습니다. ― ① 인용 블럭 생성 ② 하위 페이지 생성 ③ 하위 페이지 링크를 드래그하여 인용 블록 안에 넣기 (그러면 맨 위에 빈 줄, 그 아래에 하위 페이지 링크로 구성됩니다.) ④ 위아래를 맞추기 위해 하위 페이지 링크 왼쪽에 대고 + 버튼을 눌러 블럭을 하나 더 생성 ⑤ 그 아래에 '코드' 속성으로 대강의 내용 입력 ⑥ 버튼마다 색상 다르게 설정

 

그리고 하위 페이지는 이렇게 만들었습니다.

 

하위 페이지 구성

 

• 동영상에 집중하도록 커버 이미지 생략: 모든 안내에 동영상이 들어가기 때문에 상단의 커버 이미지는 넣지 않았습니다. 동영상에 집중하게 만들기 위해서입니다.
• 동영상 밑에 목차 또는 세부 주제들 표시: 동영상만 덜렁 있으면 신입생 입장에서는 영상에 무슨 내용들이 있는지 알지 못하니 필요성을 잘 느끼지 못한 채 모호한 상태로 영상을 보게 될 것입니다. 그래서 영상에서 어떤 내용들을 다루었는지 설령 영상을 보지 않고 넘어가더라도 글을 훑어보고 알 수 있도록 하위 주제나 목차를 입력해 두었습니다.
• 동기화 블록으로 인덱스 영역(내비게이션) 만들어 두기: 노션 오리지날 페이지를 게시하면 상단의 페이지 위치를 통해 상위 페이지로 이동할 수가 있습니다. 아니면 웹브라우저의 '뒤로 가기'를 눌러 돌아가야겠지요. 그런데 우피(oopy)를 적용하면 이 부분은 좀 더 불편해집니다. 상단 메뉴바 바로 밑에 페이지 위치가 표시되더라도 클릭이 되지 않거든요. 그래서 사용자들은 '뒤로 가기'를 누르거나 상단 메뉴바를 통해 다시 해당 페이지로 접근하는 수밖에 없습니다. 이런 불편함은 사용자들이 안내를 모두 보지 않게 할 수 있는 치명적인 불편함입니다. 그래서 저는 페이지마다 맨밑에 또다른 내비게이션 역할을 하는 인덱스(index) 블록을 만들어 두었습니다. 이게 있으면 사용자들은 클릭을 통해 바로 다른 안내 자료를 볼 수 있으니까요. 저는 ① 일단 '콜아웃' 블록을 만들고 제목 속성을 주어 타이틀으르 입력한 뒤, ② 그 밑에 '@'를 입력해서 필요한 하위 페이지들을 모두 링크했습니다. ③ 그리고 동기화 블록으로 설정했습니다. ④ 동기화 블록의 링크를 복사한 뒤, 다른 하위 페이지에 가서 '동기화된 블록'으로 붙여넣습니다. 이렇게 하면 설령, 인덱스를 바꿔야 하는 일이 생겨도 하나만 바꾸면 다른 하위 페이지에 모두 적용되어 편합니다.

 

끝으로, 하나 더 말씀드리고 마치렵니다.

 

노션에 음악 파일을 첨부하면 바로 들을 수 있는 블록으로 만들어 줍니다.

 

교가를 들려주기 위해서 음성 파일을 노션에 첨부하니 바로 들을 수 있도록 세팅이 됩니다. 그 밑에 악보를 첨부하니 들으면서 악보를 볼 수 있는 제법 괜찮은 모양새가 되었습니다. :)