[졸업작품2021] 라이브러리를 사용해 중복된 코드 줄이기

 사람들이 프로그래밍을 통해 일을 처리함으로써 얻을 수 있는 이득 중에 하나는 여러 번 반복적으로 해야하는 일을 한 번만 해도 되게끔 할 수 있다는 것이다. 프로그래밍을 통해 다른 일을 효율적으로 만들 때뿐만 아니라 프로그래밍 그 자체에서도 중복성을 줄여서 효율적인 작업을 한다면 보기에도 좋고 유지보수도 편리하다. 나 또한 코딩을 하면서 같은 문장을 반복적으로 쓸 때면 이걸 '반복문을 통해 자동화시킬 수는 없을까?'라는 생각을 많이 한다. 그리고 이번 프로젝트에서도 그런 생각을 떠오르게 하는 순간이 있었다.

팀에서 구현하고자 했던 MBTI 질문 페이지

 졸업작품 주제가 'MBTI 성향에 따른 카드 추천 웹 서비스'인데 페이지가 크게 4가지로 나뉜다. 첫번째는 웹 서비스의 대문이라 할 수 있는 메인 페이지, 두번째는 MBTI 성향을 검사하기 위한 질문 페이지, 세번째는 소비 성향을 체크하기 위한 설문 페이지, 마지막이 앞의 데이터를 기반으로 한 결과 페이지이다. 내가 담당한 부분은 두번째 질문 페이지였는데 처음에는 기존에 학과에서 배운 것이 매우 기초적인 수준의 웹 지식이다보니 굉장히 반복적으로 코드를 작성했다. 지금봐도 좀 아찔하긴한데 아래와 같이 파일을 구성했다.

 

질문 하나에 대한 페이지를 하나씩 찍어내다보니 15개나 되는 HTML 파일이 만들어졌다

 현재의 질문에서 다음 질문으로 넘어가기 위해 페이지를 넘나드는 방식으로, 하나의 페이지당 하나씩 질문을 넣은 것이다. 이러면 구조적으로는 되게 단순하긴한데 중복되는 코드 부분이 너무 많았고, 아직 MBTI 질문을 만들지 않은 단계여서 임시 질문을 넣어놨는데 나중에 수정할 때도 이 질문, 저 질문 옮겨다니면서 일일히 같은 부분을 수정해야하는 번거로움이 생겼다. 이게 예시 삼아 페이지 3~5개 만들고 관리할 때는 조금 귀찮은 수준이었는데 10개가 넘어가니까 여간 부담되는 작업이 아닐 수 없었다. 그래서 '어떻게 하면 HTML 파일 하나에 MBTI 질문을 다 담을 수는 없을까?'라는 생각을 하게 되었다.

 

슬릭 라이브러리를 활용하면 한 페이지에 여러 개의 질문을 담을 수 있었다 / https://kenwheeler.github.io/slick

 그래서 해결 방법으로 생각해낸 것이 슬릭 라이브러리이다. 콘텐츠 슬라이더의 한 종류로 자바스크립트로 만들어진 것인데, 한 페이지에 슬라이드 형식으로 여러 컨텐츠를 보여줄 수 있다. 옆으로 넘어가는 애니메이션도 구현할 수 있고 속도나 사용자에게 보여줄 수 있는 콘텐츠의 갯수 등을 커스텀마이징 할 수 있어 굉장히 편리했다. 그래서 슬릭 라이브러리로 한 페이지에 하나의 MBTI 질문만을 담게끔 설정하고 다시 만들었다.

 

슬릭 라이브러리 설정

HTML 한 페이지에서 10개가 넘는 MBTI 질문들을 모두 관리 가능

 HTML 파일 하나로 압축해서 관리할 수 있으니 수정하기에도 용이했고, 나중에 MBTI 질문 결과를 넘겨주는 작업에서도 한 번만 작업하면 되는 부분이어서 굉장히 쉽게 작업을 진행할 수 있었다. 원래는 MBTI 질문에 대한 답변 데이터를 HTMl 페이지가 넘어갈 때마다 작업해주어야 했는데 여기서는 그냥 HTML 파일 내부적으로 MBTI 결과 값을 계산한 다음 결과 페이지로 넘겨주기만 하면 끝이었다.

 

 그리고 작업을 하다가 예기치 못한 문제가 있었는데... 나는 슬릭 슬라이드가 콘텐츠 내 버튼(프로젝트에서는 질문 답변 버튼)을 클릭하면 다음 슬라이드로 넘어가게끔 설정했고 그래야만 넘어가지는 줄 알았는데 아니었다. 스마트폰은 선택과 동시에 화면을 밀어버리면 드래그가 가능한 것이었다. 이렇게 되면 다음 질문을 미리보거나 질문을 넘겨버리는 등의 문제가 발생했다. PC에서는 클릭 한 번으로 답변을 선택하는 것만 집중했지 화면을 밀어버린다는 것은 상상하지 못했는데 모바일이라서 충분히 빈번하게 일어날 수 있는 문제였다.

 

 그래서 슬릭 라이브러리의 설정을 통해 드래그 가능한 부분들을 모조리 false 처리시켰고 해당 이슈를 마무리지을 수 있었다.