• date: 2021-05
• tool: Sketch, PhpStorm, vue3, Illustrator
• GitHub: https://github.com/redgoose-dev/slideshow
• Demo: https://redgoose-dev.github.io/slideshow/
• Service: https://slideshow.redgoose.me/

사진을 프리뷰하는 슬라이드쇼 프로그램을 만들기까지의 이야기를 풀어보고자 한다.

슬라이드쇼 제작 시작하기

2020년부터 가족 앨범에 있는 사진들을 스캔하고 후반작업을 하고 있었다.
종이 사진을 디지털 이미지로 변환 작업을 하면서 문득 단순히 보관만 하는것보다 이것들을 어떻게 활용할 수 있을까.. 라는 생각이 들었다.

어짜피 기록들을 공개하고 싶기도 하고 사진들을 표현할 수 있는 도구가 필요해 보인다. 그러다 문득 예전에 만들었던 슬라이드쇼 프로그램 을 보게 되었다. 이 프로그램을 앨범 사진들을 넣어서 방문객에게 보여줄 수 있다면 나쁘지 않을거 같아 보였다.

기존에 만든 슬라이드쇼 프로그램은 회사 서비스에서 사용하기 위하여 만들어 졌고, 많은 것들을 개선해야할 필요가 있어 새로 만들어볼 결심을 하게 되었다.

슬라이드쇼 구상

기초적인 모습은 전에 만들었던 슬라이드쇼의 것들을 대부분 차용하여 리메이크 같은 모습을 목표로 구상을 하였다.
생각이 나면 이미지 슬라이드쇼 포스트에다 닥치는대로 기록해 두었다. 떠오르는 생각은 어느순간에도 계속 나타나기 때문에 어디든지 기록하여 한군데에 이렇게 모아두었다.

디자인에 대한 구상은 그다지 고민하지 않았다. 기존에 만들었던 슬라이드쇼의 요소 배치는 크게 잘못되었다고 생각되지 않아서 그다지 더 좋아지는 모습이 떠오르지는 않았다.

슬라이드쇼에서 가장 기초적으로 필요한 기능은 사진을 한장씩 넘기면서 관람 이라고 생각한다.
이것을 기초로 기능들을 추가로 덧붙여져 쓸만하게 사용할 수 있는 도구로 거듭날 것이다.
구상할적에 생각나는 기능들은 다음과 같다.

• 한장씩 넘겨가며 사진을 보기
• 자동재생
• 보여줄 사진들의 관리
• 슬라이드쇼의 테마 디자인
• 키보드 단축키
• 슬라이드 캡션
• 다국어 언어
• 슬라이드의 트랜지션 옵션

이정도 기능을 가진 프로그램을 만들 생각을 하려니 금방 끝날거라는 느낌이 전혀 들지 않는다. 하지만 꼭 필요한 도구이기도 하고 이런거 하나라도 가지고 있으면 사진 감상에 많은 도움이 될 수 있을것이라 확신한다.

지금까지 기록했던것들을 읽어보고 어떻게 진행해야할지에 대하여 정하고 완성에 좀더 구체화 시킬 수 있도록 다음 단계인 디자인 작업으로 넘어갔다.
구상은 구상일뿐.. 디자인과 개발단계까지 진행하다보면 처음에 생각했던 모습과 약간 변해서 결과물이 나오게 되다보니 구체적으로 구상하지 않는 편이다.

디자인

구상 단계에서 와이어프레임 작업은 그다지 신경쓰지 않았다.
기존에 돌아가고 있는 슬라이드쇼와 많이 비슷한 모습으로 UI를 만들기 때문에 사이즈나 간격, 컬러같은 스타일 가이드를 확정짓기 위하여 거치는 디자인 제작은 꼭 필요한 과정이다.

UI 제작에 익숙한 툴인 Sketch를 열어 본격적인 작업을 시작했다.
레이아웃은 전에 만들었던 슬라이드쇼의 모습을 참고하면서 진행했다. 가장 중요한 요소가 슬라이드의 사진이라서 사진 감상에 방해되는 요소들은 최대한 사용하지 않거나 방해하지 않도록 노력했다.
왠만하면 컨트롤 요소들을 전부 가리고 싶지만 조작도 대단히 중요한 요소이기 때문에 꼭 필요한 인터페이스를 남겨두고 단축키나 설정으로 컨트롤이나 상태표시 요소들을 조작할 수 있도록 기능을 만들것들을 따로 기록해 두었다.

슬라이드쇼의 목적은 사진을 감상하는 일이기 때문에 컨트롤이나 상태 요소들은 전부 바깥쪽에다 빼고 최대한 색이없는 모습으로 만들어 보았다.
하지만 나중에 테스트 단계에서 자동재생 상태를 토글하는 버튼을 무채색으로 두니 자동재생이 되고있는지 구분이 되지 않아서 자동재생 하고있을때 강조색으로 변경했다.

전체적인 슬라이드 이미지를 보는 기능이 필요할거 같아 작은 사이즈로 모두 볼 수 있는 화면도 디자인했다.

환경설정 화면 작업하는데 많은 폼들이 필요하다. 그래서 그림과 같이 사용하는 색과 폼들의 디자인을 스타일 가이드 영역에서 작업하고 환경설정 화면에다 폼 요소들을 넣어 조립했다.

처음에는 데스크탑 전용으로 만들 생각이었지만 혹시나 싶어 모바일 사이즈 디자인도 작업해 두었다.
그런데 모바일 사이즈 지원은 조금 잘못 선택한것이 아닌가 싶을 정도로 일이 많아지고 그다지 사용하지 않을거라 느껴진다.

개발환경 구축

디자인 작업을 끝내고 본격적인 개발작업을 하기 앞서 개발 스택을 어떤식으로 잡고갈지 고민을 하게 되었다.
프로젝트는 SPA로 작업할 예정이기 때문에 vue나 react를 사용할 예정이었다. 다시 react로 개발해볼까 생각을 했지만 뭔가 실험을 하는것보다 실질적으로 제작을 해야하는 단계이기 때문에 쉽고 빠르게 만들 수 있다면 UI 제작에 좀 더 집중을 할 수 있을것이다. (개발에 집중할 때가 아니라는 것..)

빠른 제작이 필요하여 vue 3로 제작하게 되었다.
최근에 프로그램을 만들때 vue 3로 만들어보니 상당히 괜찮은 수준으로 코드를 작성할 수 있었다. 그리고 vue 2에서 여러모로 좀 더 나아짐을 느낄 수 있었고, 딱히 작업 진행에 막히지 않을거라 느껴져 일단 vue 3 베이스로 환경을 구축했다.

이번에도 타입스크립트 사용을 도전해볼까 싶어 개발환경에 포함시켰다.
그리하여 개발스택은 다음과 같다.

• vue
• vue-i18n
• vuex
• scss

이렇게 사용하는 디펜더시가 얼마 안되는 이유는 대부분의 코드를 직접 작성했던 것이다.
특히 이미지 캐러셀 부분은 직접 만들겠다고 작정하고 있어서 예측할 수 없는 외부 리소스의 양을 많이 줄일 수 있었다.
외부 라이브러리나 컴포넌트들은 많은 사람들을 위한 기능을 만들기 때문에 덩치가 대단히 큰 편이다. 그리고 퍼포먼스 최적화에 대한 선택지가 좁아져서 제대로 슬라이드쇼를 만드는 이유가 없어지는 느낌이 들어 기초적으로 사용되는 라이브러리 몇개만 설치하고 직접 제작에 들어갔다.

개발을 어느정도 진행하면서 데스크탑 앱으로 빌드하는 Electron을 이용하여 테스트도 해보았는데 개발 영역과 같이 넣어버리니 개발 영역이 복잡해져 버려 데스크탑 앱 빌드영역은 브렌치로 나누어서 진행하도록 환경을 만들었다.

개발

드디어 모든 준비를 끝내고 개발작업에 돌입했다.

vue는 javascript 코드로 작성하지만 여태까지 느껴본 바로는 react에 비해서 html/css 친화적이라고 느낀다. 그래서 뭔가 만들때가 오면 자주 vue를 선택하게 된다. (요즘에는 svelte 프레임워크가 상당히 좋아 보인다.)

아무것도 없는 상태에서 컴포넌트를 하나씩 만들어가면서 처음에는 순조롭게 출발했다.

슬라이드

첫번째 난관은 슬라이드 트랜지션 기능을 만드는 일인데 다른 라이브러리를 이용만 해봤지 직접 만들어본적이 없기 때문에 과연 이 기능을 만들 수 있을까 불안감이 들었지만 작은 기능들을 리스트업을 하여 하나씩 만들어보니 어느새 하나의 트랜지션 기능이 만들어졌다.
하지만 성능 관련해서 처음 겪어보는 문제도 일어난다. 트랜지션 애니메이션이 일어날때의 성능이슈, 이미지를 한번에 불러오는 문제를 해결해야하는 이슈, 손가락으로 밀어당길때의 인터랙션, 자동재생과 연결된 기능 등등.. 겉으로는 단순한 사진전환 기능이지만 작은 기능들이 많이 얽히고, 컨트롤에 관한 이벤트들을 부드럽게 연결시켜 줘야한다.

코드 작성하면서 중간에 다음과 같은 포스팅을 한적도 있었다.

• 슬라이드쇼 개발중..
• 슬라이드쇼 애니메이션 구현 노트
• 집중을 해야할때..

처음에는 단순하게 만들어지나 싶었지만 결국에는 컴포넌트속 코드는 상당히 복잡해져 버린다.
욕심을 버리고 약간 안쓰는 기능들은 다 빼버리면 단순해질 수 있지만 그렇지 못하면 괜히 복잡해져 버리고 오래 유지할 수 있는 코드를 작성할 수 없을 것인데 코드의 설계를 쉽게 풀어나가는 방법은 언제나 어렵다.

제작의 순서는 슬라이드 -> 네비게이션 -> 환경설정 순서대로 화면들을 만드는데 컴포넌트별로 하나씩 만들어가면서 컴포넌트를 만들기 시작할때 UI -> 이벤트,데이터 순서대로 작업을 한다.
이번에는 상태관리를 상당히 많이 이용해야 하기 때문에 vuex를 굉장히 많이 이용한다.

환경설정

슬라이드 컴포넌트를 만들면 반 이상은 끝냈다고 생각하면서 환경설정 컴포넌트 제작으로 넘어갔다. 슬라이드 컴포넌트는 난이도가 어려웠지만 분량이 적었고, 환경설정 부분은 반대였다.
폼 관련 컴포넌트까지 전부 새로 디자인을 해서 컴포넌트까지 전부 새로 만들었다. 언제나 그렇듯이 UI 프레임워크를 사용할만큼 사용빈도가 적어서 직접 만드는게 편했다. 소스 덩치의 부담이 적어지고 커스터마이즈가 자유로워지기 때문에 능력밖의 기능을 만드는것이 아니면 왠만하면 직접 만드는 편이다.

분량이 많은 환경설정의 코드를 작성은 시간이 꽤 걸렸지만 꾸준히 이 프로젝트에 집중을 하면서 차근차근 개발을 진행시켰다.

마지막으로 슬라이드쇼를 시작할때 상태를 계속 유지할 수 있도록 localStorage 기능을 이용하여 상태관리 업데이트 중간지점에서 뭔가 변경되는게 있으면 로컬 스토리지로 저장하도록 준비해두고 꺼내쓸 수 있도록 준비해둔다.
기능을 하나씩 만들수록 설정값과 슬라이드의 데이터의 분량이 많이 늘어남을 체감하면서 기능의 복잡도가 올라감을 느낀다.

타입스크립트

그러고보니 처음에는 typescript로 코드를 작성하다가 중간에 다 지워버렸다.

vuex에서 타입스크립트에 관한 자료를 찾는게 너무 어려웠고 자료를 찾느라 시간을 너무 허비하고 있다는것을 깨달은것이 결정적이었다.
단순히 라이브러리 함수 몇개만 적용하고 점진적으로 사용을 늘리고 싶은데 그게 쉽지가 않았다.
특히 상태관리에서 많은 객체의 구조가 존재하는데 이것들을 인터페이스로 짜는것도 아찔하게 느껴진다. 하나 제대로 만들어두면 객체 검사가 대단히 쉬워지겠지만 그 과정이 많은 시간과 코드를 요구한다. (환경설정과 슬라이드 데이터 검증코드도 직접 만들어야 한다.)

타입스크립트가 가장 어려운 부분은 한글 레퍼런스가 너무 부족하고 기초적인것들 투성이다.
결국에 영어 문서들을 뒤지게 되는데 아무래도 여유를 두고 학습하면서 코드를 작성할 수 있다면 사용에 적응할 수 있지 않을까 생각한다.

이번에도 타입스크립트에 패배 했지만 또다시 도전을 해보겠지.. ㅎㅎ

심볼제작

일렉트론으로 앱을 빌드하려하니 앱 아이콘이 필요하게 되었다.
안그래도 웹페이지 파비콘도 필요하고 나중에 디자인을 하려면 심볼 정도는 꼭 만들어야 하는것을 깨달았다.

프로그램을 다 만들기전에 중간에 꼭 필요한 리소스이기 때문에 다른일을 제쳐놓고 연습장을 꺼내서 슬라이드쇼에 어울리는 심볼을 스케치하게 되었다.
처음에는 사진같은 형상의 사각형을 움직이는 모습을 표현할까 생각해보고, 나중에는 재생을 상징하는 삼각형을 중심으로 그려보게 되었다. 마음이 삼각형 모습으로 끌리고 있었다.

형태에 대하여 고민이 끝나고 나서 일러스트레이터 프로그램을 켜고 실질적으로 사용할 심볼의 형태를 만들어보았다.
삼각형은 재생을 상징한다. 모양의 끝이 날카로워 끝을 부드러운 인상을 줄 수 있도록 둥글게 변형해 보았다.
단순히 삼각형 하나만 붙어 있으니 개성이 약하여 어떻게 해볼까 고민하게 되었다.

이렇게 삼각형을 여러개를 복제하고 겹쳐서 블렌딩모드를 조금씩 바꿔보니 재생을 상징하는 모습을 유지 시키면서 재미있는 형태가 되었다.
두가지 안을 만들고 그중 하나를 선택하였다.

단순 노동으로 모바일과 데스크탑 앱 아이콘, 웹 브라우저 파비콘, 배너에 들어가는 시그니쳐 디자인, 단독 썸네일 이미지.. 등등 여러가지 모습으로 에셋을 만들고 심볼 제작을 끝냈다.

테스트와 추가기능

일차적으로 개발작업을 끝내게 되었다.

만들다보니 기능이 상당히 많아지다보니 테스트해볼 것들이 정말로 많아졌다. A가 오류나서 수정하면 고치다보면 B가 오류나서 고치면 A가 다시 간섭이 일어나 오류나는... 으아아~ 이런 패턴도 간혹 일어나고 코드 관리가 점점 어려워진다.

테스트 하면서 크게 고쳐야겠다 마음먹은 부분은 슬라이드 데이터가 배열로 이루어져 있어 카테고리화 시키기 불가능했는데 아무래도 슬라이드를 그룹화시켜 여러개의 슬라이드 그룹을 한번에 담아 카테고리를 골라서 플레이 할 수 있도록 데이터 구조를 크게 고쳤다.

데이터의 구조가 확장 시키다보니 데이터를 편집할 수 있는 UI가 필요해 보였다. 데이터 편집 UI 개발은 추후에 만드려 했는데 작업을 진행한김에 한번에 끝을내볼까 싶어 곧장 디자인 작업을 하고 프로그램 작업까지 진행시켰다.
큰 부분을 추가로 작업하다보니 생각했던 일정이 늘어났지만 사용할만한 수준으로 만드는게 우선이라고 생각하여 데이터 편집 부분을 만들었다. 더 많이 추가되는 테스트는 덤이다.

테스트 단계는 프로젝트에서 거의 마지막에 해당되는 단계이다보니 굉장히 힘든 편이다.
반복적으로 기능을 작동해보고, 디자인이나 기능이 틀어지고 작동에 오류가 생기면 하나씩 잡아주는 과정이 지치게 만드는 일이다.
아마도 평생 테스트를 할 수 있겠지만 어느선에서 끊고 릴리즈를 하자고 결심해야 할것이다.

마무리

추가적인 작업을 하고 적정한 선에서 테스트까지 끝내고 README.md 문서를 다시 다듬고, GitHub에서 릴리즈하고 NPM 서비스에 퍼블리싱하여 손을 털 수 있었다.

내가 원하는 슬라이드쇼 결과물이 만들어지기까지의 과정은 이제서야 시작일 뿐이다.
처음에 구상했던 모습은 가족 앨범을 웹 서비스에서 이용할 수 있도록 구현해야 하는데 만들어둔 슬라이드쇼를 확장시켜야 하고 커스터마이즈까지 생각하려 하니 머리가 아파지니 당분간 머릿속에 슬라이드쇼는 지워둬야겠다. (사진을 마저 정리해야 하기 때문에..)

어쨋든 하나 만드려고 마음먹었던 것이 끝나고 이렇게 제작후기 포스트를 작성하고 있으니 돌탑에서 돌 하나를 놓은 기분이 든다.