엑셀 데이터를 복사하여 티스토리에 표로 붙여넣기

차례

개요

티스토리 블로그로 글을 작성하다 보면 표를 만들어야 할 경우가 많이 생긴다.  필자의 경우에는 그래프가 있는 글을 많이 작성하다 보니 표는 필수적으로 작성해야 하는데 표를 만들고 숫자를 일일이 기입해야 하는 일은 고역이었다.   

 

그래프의 경우에는 엑셀에서 입력되어있는 데이터를 이용해서 그린 후 그림으로 저장하면 티스토리에 넣는 것이 문제없이 되는데 막상 데이터는 복사해서 입력하는 것이 되지 않았다.  그렇다고 데이터를 그림파일로 만들어서 티스토리 넣는다는 것도 우스운 일이다.

그래서 몇 번은 엑셀에 있는 데이터를 보고 티스토리 에디터에 일일이 손으로 타이핑해서 숫자를 입력하기도 했다.

표 내용이 많지 않은 것에 한해 몇 번은 숫자를 입력하는 것도 할 만은 했는데 오타가 난다거나 일부 데이터를 수정해야 하는 경우가 생긴다면 글 쓰는 것을 집어 치고 싶은 마음이 들 정도로 귀찮은 생각이 들었다.

 

귀찮고 반복적인 일이라면 무언가 좀 더 간편하고 자동화된 방법을 찾거나 만들려고 노력하는 것이 인간의 속성 아니겠는가.   그래서 나름대로 이것저것 시도해보면서 엑셀에 있는 데이터를 티스토리에 그래도 복사하는 방법을 구현해 보았다.

 

엑셀 표를 직접 티스토리 에디터에 복사하면 안된다

 

<그림 1> 엑셀에서 만든 표

위 그림 1의 엑셀 데이터 정도는 데이터가 그다지 많지 않아서 티스토리 에디터에서 직접 타이핑해도 그다지 무리하지 않은 일이다.  하지만 셀이 몇십 개가 된다면 타이핑하기 귀찮아지면서 조금씩 생각이 달라질 것이다.   그러면 당연히 엑셀에 있는 값을 마우스로 드래그해서 복사하고 티스토리 에디터에 그대로 붙여넣기 하고 싶은 맘이 들게 될거다.

그럼 엑셀에서 데이터를 복사해서 직접 티스토리 에디터에 붙여 넣기 해보자.

 

<복사 시작>

2020년 우리나라 세대원수별 세대수 현황 1인 세대 2인 세대 3인 세대 4인 세대 5인 세대 6인 세대 7인 세대 8인 세대 9인 세대 10인 세대 이상 8,642,826 5,221,787 4,012,289 3,610,567 920,599 191,930 44,654 11,848 3,529 3,211

<복사 끝>

 

결과적으로 엑셀에서 데이터를 복사해서 직접 티스토리 에디터에 붙여 넣기 하면 표가 사라진 그냥 문장이 돼버리는 것을 알 수 있다. 

 

다른 방법을 시도해보자

 

(방법 1) 엑셀 표를 파워포인트에 복사한 후 재복사하여 티스토리에 붙여 넣기

 

엑셀 데이터를 복사해서 파워포인트에 붙여 넣기 한 후 이를 다시 복사하여 티스토리 에디터에 붙여 넣기 하니 아래 표와 같이 나온다.  일단 보기에는 크게 무리 없어 보이는데 셀의 높이가 높아 보이는 것이 그냥 사용하기에는 조금 이상해서 HTML 편집을 해야 할 것 같은 느낌이다.  표는 이 블로그 글의 반응형 태그에 위반될 수도 있어서 그림으로 대체하였다.

<그림 2> 엑셀데이터를 파워포인트에 붙여넣기한 후 재복사하여 티스토리에디터에 붙여넣기한 경우

 

<table style="border-collapse: collapse; width: 100%;" border="1" width="627">
<tbody>
<tr>
<td width="51" height="26">
<p><span>1</span><span>인세대</span><span> </span></p>
</td>
<td width="64">
:
:
:
</td>
<td width="64">
<p><span>10</span><span>인세대이상</span></p>
</td>
</tr>
<tr>
<td width="51" height="22">
<p><span>8,642,826</span></p>
</td>
<td width="64">
<p><span>5,221,787</span></p>
</td>
<td width="64">
:
:
:
</td>
<td width="64">
<p><span>3,211</span></p>
</td>
</tr>
</tbody>
</table>

위의 HTML 코드는 파워포인트에서 복사해 온 표의 HMTL태그이다.  중간에 반복되는 코드들은 생략하였다.

위의 태그에서 본 결과에 따라 엑셀 데이터를 파워포인트에 붙여 넣기 한 후에 재복사하여 티스토리 에디터에 붙여 넣기 하는 방법에 대한 문제점을 아래와 같이 좀 정리해보았다

 

문제 1 표의 폭 문제

<table style="border-collapse: collapse; width: 100%;" border="1" width="627">

위의 태그와 같이 table의 width가 629px로 고정되어 있다.  이렇게 태그를 입력하면 반응형 블로그가 되지 않아서 스마트 폰으로 보게 되면 폭이 잘리거나 왜곡되어 보이게 된다.

 

문제 2 표의 높이 문제

<td width="51" height="26">

셀의 높이가 26px로 고정되었다.  파워포인트에서는 26px가 최적이라고 생각했는지 모르겠지만 보는 사람에 따라 저 셀의 높이가 너무 높다고 생각하는 사람도 있을 수 있다.  필자의 경우가 그런 경우인데, 필자 같은 경우는 주로 셀의 높이를 지정하지 않는다.  그럼 티스토리에서 자동으로 높이를 조절해 주기 때문이다.

 

문제 3 쓰레기 태그 문제

<p><span>1</span><span>인세대</span><span> </span></p>

셀 안에 지저분한 태그가 많다.  span 태그가 왜 그렇게 많이 들어가야 하는지 이유를 모르겠는데 script를 따로 적용하는 것도 아니고 아예 script가 없는데 무의미한 쓰레기 태그가 많이 포함되어있는 것으로 보인다.

 

결론적으로 엑셀 데이터를 파워포인트에 저장했다가 재복사하여 티스트로 에디터에 붙여 넣기 하는 방식은 적합하지 않은 것으로 보인다.

 

(방법 2) 엑셀 표를 워드에 복사한 후 재복사하여 티스토리에 붙여 넣기

 

엑셀 데이터를 복사해서 워드에 붙여 넣기 한 후 이를 다시 복사하여 티스토리 에디터에 붙여 넣기 하니 아래 그림과 같이 나온다.   가로 폭이 티스토리 화면 폭보다 넓어서 가로 스크롤바가 생겨버렸다.  반응형 블로그가 잘 적용될지 의문이지만 글을 보기에 시인성이 좋아 보이지 않는다.   변환된 HTML 태그도 파워포인트의 그것과 크게 다르지 않다.

변환된 표를 그대로 게재하면 이 블로그도 반응형이 되지 않을 소지가 있어서 변환된 표를 그림으로 대체한다.

<그림 3> 엑셀데이터를 워드에 붙여넣기한 후 재복사하여 티스토리 에디터한 붙여넣기한 경우

 

(방법 3) 엑셀 표를 구글 스프레드시트에 복사한 후 재복사하여 티스토리에 붙여 넣기

엑셀 데이터를 복사해서 스프레드시트에 아래 그림과 같이 복사한 후 재복사하여 티스토리 에디터에 복사해보았다.

<그림 4> 엑셀데이터를 복사하여 구글스크립트에 재복사한 경우

 

<복사 시작>

<!--td {border: 1px solid #ccc;}br {mso-data-placement:same-cell;}-->

1인세대	2인세대	3인세대	4인세대	5인세대	6인세대	7인세대	8인세대	9인세대	10인세대이상
8,642,826	5,221,787	4,012,289	3,610,567	920,599	191,930	44,654	11,848	3,529	3,211

<복사 끝>

 

위의 표는 구글 스프레드시트의 데이트를 재복사하여 티스토리에 붙여 넣기 한 것이다.  표 위에 태그 한 줄이 임의로 생긴 것을 제외하면 깔끔하게 보인다.  그럼 HTML 태그도 살펴보도록 하자.

 

<p>&lt;!--td {border: 1px solid #ccc;}br {mso-data-placement:same-cell;}--&gt;</p>
<table style="border-collapse: collapse; width: 100%;" border="1">
<tbody>
<tr>
<td>1인세대</td>
:
:
:
<td>9인세대</td>
<td>
<p>10인세대이상</p>
</td>
</tr>
<tr>
<td>8,642,826</td>
:
:
:
<td>3,211</td>
</tr>
</tbody>
</table>

위의 코드를 보자.  파워포인트에 붙여 넣기 해서 재복사 후 티스토리에 붙여 넣기 한 경우와 비교하여 태그가 너무 깨끗한 것을 알 수 있다.  사실 이 정도면 군더더기가 하나도 없는 태그라고 보아도 될 것 같다.

가로폭도 특정값이 아닌 100%로 지정하여서 반응형 웹사이트에 적합하고, <td>셀 안에도 쓰레기 태그들이 전혀 없이 순수한 값들만 적혀있다.   또한 테이블이나 셀의 높이도 특별히 지정하지 않음으로 티스토리에서 알아서 반응형 태그를 적용하게끔 되어있다.  

다만 구글 스프레드시트를 이용하려면 인터넷이 연결된 상태이어야 하는데 티스토리에 글을 작성한다는 것은 이미 인터넷이 연결된 상태일 것임에 이것은 큰 문제가 되지 않을 것으로 생각된다.

 

맺음말

블로그 글을 쓰다 보면 표를 작성해야 할 경우가 발생하는데 표의 내용이 많게 되면 엑셀에 있는 값을 그대로 티스토리에 복사 붙여 넣기를 하여야 작업이 수월해진다.

그런데 엑셀의 데이터를 티스토리에 직접 붙여 넣기 하는 방법은 가능하지 않고 다른 매개 에디터를 거쳐서 붙여 넣기 하게 되는데 그중에 구글 스프레드시트를 이용하는 방법이 결론적으로 가장 보기도 좋고 HTML 태그도 깨끗하게 변환됨을 본 글을 통해 알 수 있다.