brunch

매거진 폴라리스 뉴스레터

라이킷 9 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 안목 Jun 27. 2021

노션을 이용한 폴라리스 홈페이지 제작기 #1

폴라리스 메이킹노트

노션으로 홈페이지를 세련되게 만드는 것은 상당히 어려운 일인 것 같다. (물론 엄청나게 예쁜 샘플도 많다) 노션에 익숙하지 않는 독자가 보면 뭔가 건축물의 뼈대가 그대로 튀어나와 있는 날 것 그대로의 느낌. 그럼에도 원하는 기능을 (개발자 없는 문과생들이) 빠르게 구현하기엔 노션만큼 간편하고, 저렴한 방법이 없어서 노션을 선택. 간편하다고는 했지만, 여전히 노션이 낯설어서 이 악물고 했다. 이 글을 읽으면 어떤 생각으로 무엇을 참고해 가며 어떻게 결과물을 냈는지 확인할 수 있다.

1. 홈페이지의 목적

의논이 더 필요해! 어떤 기능을 위주로 꾸려나갈지는 팀원들과 더 논의 해봐야 한다. 와서 어떤 패턴으로 이용하게 될까, 무슨 목적으로 이용하길 기대하나, 등등. 지금 나온 생각만 정리하면 다음과 같다. 팀원들과 제대로 합의되지 않은 나의 뇌피셜 위주로 만들었다.

주제별 글 모음. 정치, 외교, 주제의 대분류는 사회과학대의 학과 구분을 따를 것 같다. 물론 inter-discpline한 주제도 있어서 마냥 무 자르듯 주제를 분류할 순 없겠지만. 기본적으로 내가 chrome 북마크 관리하던 방법론이다. 기본적으로, 폴라리스 홈페이지가 언시 공부생들이 일단 제일 먼저 들어와 보는 도서관 기능을 할 수 있으면 좋지 않을까 하는 바람.

지난 호 보기. 홈페이지에 시각을 끄는 이미지가 부족한 것 같아서...

연재 기사 모아보기. 언론사 홈페이지 가보면 좋은 연재 잔뜩 만들어놓고 정작 연재 기사를 찾아보기 어려운 경우가 많다. 이런 연재 기사 링크를 쭉 모아놓으면 홈페이지가 정보의 허브 역할을 할 수 있지 않을까.

Interaction: 이메일을 통한 뉴스레터가 일방적인 의사소통이다보니까 뉴스레터 만드는 사람들은 늘 독자의 반응에 목마를 듯. 손쉽게 소통할 수 있는 공간을 홈페이지에 만들 수 있으면 좋겠다. Like it, 피드백, 등등.

주제분류 예시

2. 모델로 참고한 사이트.

일단 OOPY 가면 노션으로 구축된 회사 및 개인 포트폴리오를 잔뜩 구경할 수 있다.

Cue-ration. 댓글창 기능은 여기서 발견했다. '구조화'가 노션을 통한 홈페이지 구축의 핵심인데 관련해서 참고할 게 많을 듯. 여기도 아카이빙을 기본으로 하니까.

3. 나의 노션 선생님

댓글창 기능은 무료도 있고, 유료도 있는데 당연히 무료인 놈으로 달았다. cleverway님의 블로그 글을 참조해 달았다. 사용한 툴은 Apption. 이 페이지 임베드하라는 건 간단히 /이미지로 하면 된다. 파일을 업로드하거나 링크를 임베드하라고 되어 있는 녀석이다.

홈페이지를 백지부터 만드는 것은 유튜버 Elin님의 영상을 참고했다. 자랑이나 사담 없이 딱 단도직입적으로 백지부터 만들어 나가셔서 좋다. 숙련도 때문에 만드시는 속도가 조금 빠르게 느껴질 수 있는데, 멈춰 가면서 하면 될 듯.

4. 결과물

아직 큰 틀만 잡아놨다. 여기서 확인할 수 있다.