능률적 노션 사용법 #9 - 노션을 뒤집어 놓으신 html 임베드 사이트, apption

세상에 착한 개발자가 많음에 감사합니다.

덕분에 우리는 코딩을 할 줄 몰라도, 온갖 기능들을 노션에서 활용할 수 있습니다.

 

그 중에서도 apption.co 의 역할은 좀 더 특별하고, 종합적입니다.

 

HTML로 임베드 링크를 생성하는 핵심 기능 뿐 아니라, 노션에 임베드가 가능한 모든 서비스를 모으고 방법을 안내합니다.

 

 

1. 여기저기서 임베드 서비스들을 많이 모아두셨습니다.

Apption.co에는 현재 40개의 임베드 서비스가 등록되어있습니다.

모두 한 사람이 개발한 것은 아니고, 각기 다른 서비스들을 사이트에 모아둔 것입니다. 그것만으로도 좋은 서비스입니다만,

 

 

2. HTML 코드로 개인맞춤형 임베드 링크를 만들 수 있게 해줍니다.

핵심 가치는 큐레이션이 아닙니다.

가장 먼저 나오는 "직접만들기" 페이지는, HTML 코드를 활용해서 직접 자신에게 필요한 임베드 링크를 만들 수 있게 합니다.

유료인 super.so처럼 노션 자체에 HTML을 추가할 수는 없지만, 임베드로 어느정도 가능하게 하는 것입니다.

 

예를 들자면, disqus는 무료로 사이트에 댓글기능을 지원합니다. 하지만 HTML 코드로만 지원하기 때문에, 일반적인 방법으로는 노션에 사용할 수 없습니다. 하지만 apption을 이용하면 노션페이지에도 disqus를 임베드하여 댓글 기능을 사용할 수 있게 됩니다.

 

뿐 아니라, 틀이 다 짜여진 html 코드에다가 필요에 맞추어 데이터를 수정하거나 커스텀할 수 있습니다. 나의 d-day 위젯도, 내 지역의 날씨 정보도 모두 그렇게 만들 수 있게 됩니다.

 

 

3. 엑셀, 스프레드시트 같은 표의 데이터가 잘 복사되지 않는 점을 고려해, 표를 임베드하는 기능을 지원합니다.

엑셀, 스프레드시트 등의 데이터베이스가 markdown 형식의 노션 테이블에 잘 복사되지 않는 문제가 있습니다.

물론 이 문제도 어떤 분의 노력으로 해결할 방도가 생기긴 했습니다. 다만, 굳이 수정이 필요없는 테이블이라면, 심플한 html 테이블 링크를 생성해서 쓰는 것도 괜찮을 것 같습니다.

 

 

임베드한 표는 저렇게 표현됩니다.

 

40개의 임베드 서비스를 내용 위주로 간추려서 소개하겠습니다.

 

0. html 코드로 직접 만들기

(아래 서비스 중 많은 것들은 이 과정을 중간단계로 거칩니다.)

 

1. 유명한 앱 연동

google calendar

google analytics

google trends

유튜브 비디오

 

스포티파이

트위터 (타임라인)

페이스북 (포스트 공유)

핀터레스트

페이팔

애플 뮤직

메일침프

젠데스크

코드펜

아마존 associates

쿠팡 파트너스

disqus (댓글)

 

2. 작지만 유용한 서비스

차트(그래프) 3 종류

카운트다운 2 종류

날씨

세계 시간

노션 페이지를 발표용 화면 view로

서베이

인용구 위젯 2 종류

Buy me a coffee

마인드맵

HTML Table (앞서 말한 표 형태 데이터베이스)

HITS 등 SVG 관련

환율 정보 등.

 

 

 

많은 개발자들의 노력으로, 같은 기능도 다양한 버전과 디자인으로 임베드할 수 있게 되었습니다.

특히 댓글, 서베이 등 많은 서비스는 apption의 도움을 받아 html코드 입력으로 노션에 삽입할 수 있게 됩니다.

 

apption.co의 사용 방법을 이해하고, 다양한 임베드링크를 구경하면, 여러분의 노션 페이지가 더욱 풍요로워질 것입니다.