3.3 Import: 타 문서 포함하기

1. Import 2. Text & Markdown 3. CSV 4. HTML 테스트1 - html 테스트 테스트2 - CSS 테스트 테스트3 - img 테스트 테스트4 - 다양한 태그 테스트 5. Word & Google Docs 테스트1 - 기본문서 테스트2 - Table이 담겨 있는 문서 6. Trello

1. Import

여러가지 문서를 Notion에 가져오는 방법입니다. 데스크탑에서 로그인하신 다음 왼쪽 하단에 아래와 같은 import창이 있습니다.

import창을 누르시면 아래와 같이 다른 노트, CSV, Docs, Word 심지어 HTML까지 import 시킬 수 있는 창이 뜹니다. 이 책에서는 문서에 해당하는 text, csv, html, word, google docs를 시험해 보도록 하겠습니다.

2. Text & Markdown

메모장으로 간단한 텍스트를 만들어 보았습니다. 여기서 .txt로 저장하는 것이나 .md로 저장하는 것에 차이는 없습니다.

잘 올라가는 것을 볼 수 있습니다. 이번에는 안에 마크다운 문법을 넣어보도록 하겠습니다.

역시나 잘 올라가는 것을 볼 수 있습니다. 이번에는 마크다운 문법을 좀 더 다양하게 테스트 해보도록 하겠습니다.

기타 마크다운도 잘 들어가는 것을 볼 수가 있습니다. 그러면 이번에는 Google에서 markdown table generator를 사용하여 테이블을 생성해서 import 해보도록 하겠습니다.

역시 잘 들어가는 것을 볼 수 있습니다. 마지막으로 마크다운에 이미지를 삽입해 보도록 하겠습니다.

이미지와 함께 업로드를 하려고 하면 왼쪽과 같이 Failed가 뜨며 이미지가 제대로 업로드 되지 않는 것을 볼 수 있습니다. 텍스트만 들어가는 것은 문제가 없습니다. 그럴 경우 test라는 문자열만 들어갑니다.

3. CSV

CSV는 Comma-Separated Values의 약자로 필드를 쉼표로 구분한 데이터 텍스트 파일입니다. 아래는 위키백과에서 가져온 csv 예제입니다.

https://ko.wikipedia.org/wiki/CSV_(파일_형식)

이것을 메모장에 옮긴다음 .csv파일로 저장하시면 아래와 같이 엑셀로 읽을 수 있는 파일이 됩니다.

클릭해서 열어보시면 아래와 같이 셀로 나뉘어진 파일로 보이며, 우리가 엑셀 파일을 수정했듯이 분류, 차트그리기, 수식 넣는 것이 가능합니다.

이제 이 파일을 노션에 업로드 해보도록 하겠습니다.

csv파일로 업로드를 하게 되면 table로 업로드가 되며 하단에서 Calculate탭을 이용하여 엑셀처럼 연산이 가능합니다.

4. HTML

HTML이 어디까지 import되는지는 중요한 부분인데요. 이유는 Evernote를 비롯한 많은 문서에서 HTML Export 기능을 제공하고 있기 때문입니다. 아래는 에버노트 예시입니다. 노트 내보내기를 누르시면 오른쪽과 같이 출력 형식을 선택할 수 있는 창이 뜹니다.

많은 문서가 이토록 HTML로 내보낼 수 있는 기능들을 제공하기 때문에 Notion이 어디까지 import가 가능한지 테스트해 볼 필요성이 있습니다.

테스트1 - html 테스트

저는 개발자이기 때문에 일단 HTML을 import 해보기로 했습니다. 아래와 같이 간단한 코드를 작성해보았습니다.


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <h1>hello world</h1>
  <p>hello world</p>
</body>
</html>

해당 파일을 test.html로 작성하여 import 해보겠습니다.

위와 같이 h1이나 p 태그가 마크다운으로 변경되어 들어가 있음을 알 수 있습니다.

테스트2 - CSS 테스트

어디까지 마크다운으로 변경이 가능한지 알아보기 위해 css를 포함한 html까지 올려보도록 하겠습니다. 우선 css 코드가 들어간 문서입니다.


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    h1{color:red;}
  </style>
</head>
<body>
  <h1>hello world</h1>
  <p>hello world</p>
</body>
</html>

해당 파일을 업로드하여 얻은 결과는 아래와 같습니다.

처음에 테스트 했던 모습과 같습니다. css는 적용이 되지 않습니다.

테스트3 - img 테스트

img는 가능한지 알아보기 위해 테스트해보았습니다.


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    h1{color:red;}
  </style>
</head>
<body>
  <h1>hello world</h1>
  <p>hello world</p>
  <img src="./a.png" alt="">
</body>
</html>

해당 파일을 업로드하여 얻은 결과는 아래와 같습니다.

처음에 테스트 했던 모습과 같습니다. img 태그도 적용되지 않습니다. 추가로 html 파일 뿐만 아니라 이미지 파일과 함께 업로드 하려 하면 아래와 같은 오류가 뜹니다.

테스트4 - 다양한 태그 테스트

어디까지 마크다운으로 변경이 가능한지 알아보기 위해 여러가지 태그를 사용하여 테스트해보았습니다.


<!DOCTYPE html>
<html>
<head>
  <title>test</title>
</head>
<body>
  <h1>hello world</h1>
  <h2>hello world</h2>
  <h3>hello world</h3>
  <h4>hello world</h4>
  <h5>hello world</h5>
  <h6>hello world</h6>
  <p>hello world</p>
  <p>Lorem <br>ipsum dolor<hr> sit amet, <b>consectetur</b> <strong>adipisicing</strong> elit, <i>sed</i> <em>do</em> eiusmod <mark>tempor</mark> incididunt <sub>ut<sub> labore et <sup>dolore</sup> magna aliqua. <a href="www.paullab.co.kr">Ut</a> enim
  <ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
  </ul>
  <ol>
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
  </ol>
  <table>
    <tr>
      <td>test</td>
      <td>test</td>
      <td>test</td>
    </tr>
    <tr>
      <td>test</td>
      <td>test</td>
      <td>test</td>
    </tr>
  </table>
  </p>
</body>
</html>

해당 파일을 업로드하여 얻은 결과는 아래와 같습니다.

전부는 아니지만 대부분의 태그를 반영하는 것을 볼 수 있습니다.

5. Word & Google Docs

다음에는 워드와 구글 독스를 확인해 보도록 하겠습니다. 현재 구글 독스를 지원한다고 되어 있지만 구글 드라이브에 저장된 파일이 아닌 내 PC에 다운로드한 docx 파일을 import하는 것만 지원하고 있습니다. Word 문서와 구글 독스 문서는 모두 docx 형식으로 되어 있으므로 docx문서가 import 가능한가에 대해 알아보도록 하겠습니다.