︎

맨땅에서 테이블 페이지 구현하기


Soohyun Jeong, Dec 09, 2018






︎앞서


그동안 p5.js(JavaScript기반 processing)만 공부하다 보니 JavaScript나 html에 대한 이해가 부족해 공부를 하고 싶었다. 책이나 교재를 보며 하나씩 공부하기는 지루하고 꼭 개론 부분은 (착각이지만) 이미 다 알고 있는 것만 같아 일단 한번 만들고 보자라는 생각으로 시작해서 필요한 기능 위주로 검색을 하거나 주변에 도움을 요청하는 방식으로 하나씩 만들어나갔다. 결과적으로 코드 자체는 길지 않고 간단한 기능임에도 돌아가느라 시행착오가 많았다. 물론 내가 구현한 것보다 더 간단하고 효율적인 방법이 있겠지만, 하나의 페이지를 만드는 과정 속에서 실패하고 다시 도전하며 '뭔가를 배우는' 게 목적이었으니 나로서는 목적을 달성했다고 할 수 있다.


︎만들게 된 이유


책 <이미지의 운명> (자크 랑시에르, 현실문화)을 보면서 찾아보고 싶은 작품이 많았다. 본문에 언급되지만 볼 수 없는 작품들, 주석에 소개되어있지만 직접 키보드를 쳐서 들어가야 하는 인터넷 페이지, 흑백으로밖에 볼 수 없는 작품사진 등. 책을 여러 번 읽으면서 그때마다 매번 작품을 찾아보려니 너무나 번거로웠다. 이것들이 모두 한 곳에 저장되어있으면 좋겠다고 그전부터 생각해왔고, '하나의 페이지 만들기' 프로젝트에 적합한 주제라는 생각이 들었다.


︎html과 css를 이용한 구현과정


  1. 기초를 위해 생활코딩에서 페이지 만들기 튜토리얼을 훑어봤다. 분명 아무것도 모르는 상태에서 접근하기 쉽게 설명되어있지만 내가 원하는 기능을 구현하기에는 턱없이 부족했다.

  2. 구현 방향을 설정하기 위해 리스트 페이지를 어떻게 보여줄지 디자인을 먼저 고민했다. 이미지가 통일성이 없고 이미지 자체의 정보 값이 없는 만큼(이미지 자체보다는 이 책에 어떤 부분에서 설명한 이미지인지가 중요하니) 갤러리 형태보다 텍스트 위주의 테이블이 좋겠다고 결정했다.



  3. 텍스트 위주라 하더라도 이미지를 보는 것이 목적이니만큼, 이미지 로드가 필요하다. 테이블을 클릭하면 이미지를 보였다 숨겼다 하는 기능을 어떻게 구현할 수 있는지 소스를 검색했다. hover 사용 예제에서 어떤 원리로 테이블을 구성하는지,  slide 예제에서 어떻게 css 효과를 주었는지 참고했다.



  4. 텍스트가 중요한 만큼, 정렬 sort() 기능이 필수적이다. sort기능을 구현해놓은 소스에 클릭 이벤트를 추가해서 둘의 기능을 합쳤다.


︎Javascript를 이용한 구현 과정


  1. 틀은 완성됐고 데이터만 기입하면 끝나는 단계에서 갑자기 의문이 들었다.
    매번 이렇게 많은 줄을 덧붙여야하는걸까? <div class="table-data"></div>가 5개씩 반복해서 하나의 작품인데, 들어가야하는 작품은 총 45작품. 그럼 45 * 5 즉 225개의 <div class="table-data"></div>줄이 반복되어야 한다. 너무 비효율적인 방식이라는 생각이 들었다.

  2. 데이터를 자바스크립트에서 array 형식으로 넣으면 어떨까? 데이터 관리하기에 훨씬 쉬워진다. → array 보다 object가 데이터 관리하는데 적합해서 object의 value를 가져오는 방식으로 바꿨다.//array는 단순 데이터 나열인 반면,
    ['13p', '로베르 브레송', '당나귀 발타자르', '1966', '영화']

    //object는 key와 value로 구성된다.
    {page: '14', author: '로베르 브레송', title: '당나귀 발타자르', year: '1966', genre: '영화'}
    3. 2-1. 내가 힘껏 돌아가고 있으니 이렇게 해보라며 개발자 선배가 보내준 개요. 똑같이 하지는 않았지만 큰 틀에서는 비슷하게 구현했다.
    (좌) 선배가 보내준 개요   (우) 완성된 결과물의 개요

  3. 우선 JavaScript에서 html을 생성하는 코드를 만들어야 한다. createElement(), setAttribute(), append() 등의 명령어를 이용했다. 이 블로그에 DOM 명령어들이 잘 정리되어있어 백지상태에서 접근하는데 많은 도움이 되었다. 전체를 꼼꼼히 읽기보단 필요한 부분 위주로 검색해가면서 참고했다.

  4. 또 한 번 틀은 완성 했지만 테이블 생성과 그리기를 하나의 function에서 실행하니 정렬 기능 구현이 힘들었다. 테이블(div) 생성, 이미지 그리기, 데이터 그리기로 총 세 개의 function으로 분리했다. (위의 개요는 최종 완성 결과물이고 이전엔 createTable(), drawImg(), drawTable() 모두 하나의 function에 들어있었다.)

  5. 마지막으로 css를 이용해 페이지를 보기 좋게 디자인하고, 웹에 업로드했다.


︎결과물



페이지 바로가기   /   소스 코드 보기

︎배운 것들

이 프로젝트를 진행하면서 html 기초, 자바스크립트로 동적 생성/로드/수정, 제이쿼리의 선택자와 루프 등 페이지를 만들 때 필요한 요소들에 대해 전반적으로 공부할 수 있었다. 15일 전까지만 해도 html, 자바스크립트, 제이쿼리에 대해 기초도 없는 상태였다는 것을 생각해보면 큰 발전!

︎앞으로 해보고 싶은 것


책에 나오는 작품이 아닌 내가 좋아하는 작품을 모아놓은 페이지를 만들어보고 싶다. 테이블보다 이미지 갤러리 타입이 더 적합할 테고, 이미지를 정렬하는 법 즉 css float이나 jQuery masonry에 대해서 공부할 수 있을 것이다.