BBuzzArt에서 전시회와 서비스에서 사용될 작품 슬라이드쇼를 만들게 되었다.

처음부터 모두 만들 시간이 없기 때문에 이미지 롤링 기능을 가진 컴포넌트에서 환경설정과 여러가지 슬라이드셋을 선택할 수 있는 기능을 덧붙이는 목표를 가졌다.

Redgoose bookmark : https://www.bbuzzart.com/show/?action=bookmarks&id=80516

Planing

처음에는 단순히 작품이 돌아가고 오토플레이가 가능한 수준으로 생각하고 구상을 시작했지만 이런저런 기능들을 넣어보면 재미있겠다는 생각에 만들어볼만한 요소들은 많아지고 상상의 나래는 점점 커지는듯하다.

하지만 시간은 무한대로 주어지지 않아서 꼭 필요하고 기초적인 부분을 v1.0으로 넣고 추가적인 요소는 애드온이나 플러그인 형식으로 덧붙여서 사용할 수 있는 방식으로 활용할 수 있도록 구상했다.
필수적인 기능을 전부 집어넣어버리면 프로그램이 비대해지고 보여지는 부분들의 복잡도는 엄청나게 증가하는것을 경계하고 싶었다.

아무리 생각해도 나온 결론은 순수한 기본 기능을 최대한 보존하고 추가적인 기능은 따로 만들어서 조립하는 방식을 추구하고 싶었다.

아이디어가 나왔던것 중에 하나가 환경설정 이라는 것이다.
슬라이드 쇼에서 트랜지션 속도, 자동플레이에서의 대기시간, 화면 주변에 표시되는 요소들을 사용자가 직접 컨트롤하여 자기 입맛에 맞는 슬라이드쇼를 감상할 수 있다는것이 좋아 보여서 구현에 고생스럽겠지만 꼭 들어갔으면 좋아 보이는 요소다.

이미지 롤링 - 환경설정 관계를 가지고 서로 상태를 유지하면서 동작하는 툴에서 리엑트와 리덕스를 사용하여 구축하는것이 가장 적절해 보였다.

기능들을 정의하고나서 옵션 요소들을 쭉 기록했다. 구상하면서 메모나 할 일들이나 기능 요소들은 모두 Trello 서비스가 많은 도움이 되는 도구가 되었다. 브레인스토밍에 대단히 도움이 되는 친구다.
요소들의 목록이 만들어지면서 데이터 구조를 바로 만들어 버리고 디자인 작업에 들어갔다.

Design

구상할때 최대한 기록해두고 넣을 요소들을 침고해서 와이어프레임을 생각해두고 디자인 작업에 들어갔다.
이번에는 스케치앱을 사용할 수 없어 Adobe XD(Experience Design)를 이용하여 만들게 되었다. 툴이 익숙하지 않아 적응하느라 좀 애먹었다.

사진이나 그림을 보는데 좀더 집중을 할 수 있도록 어두운 색을 기본으로 생각하고 있었다.
하지만 밝은 배경도 요구할것같아서 옵션으로 밝은 테마와 어두운 테마를 선택할 수 있도록 준비해두기로 생각해두었다.

슬라이드 화면에서 보여주는 요소가 많이 필요해서 배치하는데 좀 고민이 많이 필요해서 다른 슬라이드 사이트나 프로그램들을 닥치는대로 찾아보고 어떻게 구성되었는지 파악하면서 최대한 작품을 보는데 방해되지 않도록 캡션이나 컨트롤 버튼들을 배치하였다.

환경설정 화면은 여러가지 섹션이 들어가기 때문에 좌측 영역에 섹션을 이동할 수 있는 장치로 네비게이션을 붙여두게 되었다.
폼 디자인을 커스텀 형태로 만들어 버렸더니 마크업에 고생하겠다고 예상은 하지만 창작 의욕이 더 강해져서 디자인대로 만들기로 결심하고 폼 디자인에 신경썼다.

환경설정 디자인 작업을 하면서 Atom툴의 환경설정의 디자인을 많이 참고하면서 만들다보니 결과적으로 비슷하게 만들어진것 같아졌다.
어두운톤으로 만들어져있는 환경설정이 Atom 프로그램이 가장 좋아보여서 이렇게 많이 참고하게 된것이다.

Develop

디자인 작업을 끝내고나서 회사 동료들에게 한번 프리뷰를 하고나서 받은 피드백으로 좀더 수정하고나서 개발작업에 들어갔다.

이 프로젝트를 처음 시작할때에는 jQuery로 간단하게 만들어버릴까 생각했지만 요구들을 받고, 리엑트 웹사이트 프로젝트에 붙인다는 계획도 듣다보니 React로 개발하는 방향으로 돌렸다.
Redux와 같이 사용하면 환경설정에 들어있는 슬라이드의 상태를 계속 유지시킬 수 있을거라는 생각에 Redux는 좋은 선택이 되어 보여서 React X Redux조합으로 개발환경을 구축했다.

기왕에 작은 앱을 만들면 다양한 플랫폼에서 돌아갈 수 있도록 목표를 가지고 있어서 React환경뿐만 아니라 브라우저에서 바로 돌릴 수 있도록 컨트롤하는 API를 구현할 생각이었다.
브라우저 콘솔에서 명령어를 실행하면 슬라이드가 작동이 된다면 외부에서 슬라이드쇼를 더 쉽게 컨트롤 할 수 있다는 기대감을 가지고 있었다.

마지막으로 사용하기 적당한 이미지 롤링 라이브러리를 찾아보았다. React이여야하고 상당히 많이 개발이 되고, 필요한 기능들을 다 갖춘 이미지 롤링 라이브러리가 필요했다.
이리저리 찾아본 결과 react-slick으로 사용하게 되었다. 많은 props가 제공되어 있고, 괜찮은 슬라이더에서 React 컴포넌트로 포팅한것이어서 이정도면 구현하는데 지장이 없을거라 생각되었다.

다음으로 디자인대로 슬라이드 화면과 환경설정 화면을 퍼블리싱 작업을 하게 되었다. 환경설정에서 폼 작업이 가장 지루하고 시간이 오래 걸렸다. 디자인에서 달라질 부분이 없다보니 디자인대로 쭉 마크업을 하고 스타일링을 끝냈다.

퍼블리싱을 1차적으로 마무리짓고 바로 상태에 대한 밑작업을 하면서 컨트롤을 하나씩 붙여 보았다.
상태의 구조를 만들고 Redux store를 만들고나서 그대로 컨트롤을 만들다가 생각을 바꾸어 같이 API를 만들고, 내부 컨트롤에서 API를 같이 사용하는쪽으로 방향을 바꾸었다. 컨트롤을 따로 만들어 중복되는 코드를 만들 필요가 없어 보였다.
기능이 필요하면 API를 만들어서 스토어를 컨트롤하고 상태를 업데이트하는 방향으로 가다보니 작업이 수월하게 풀렸다.
한번씩 골치아프게 막히는 부분이 있다면 슬라이더가 완벽하게 상태 업데이트에 대해서 반응하지 않는다는것이다. 그럴때는 상태를 먼저 업데이트 해놓고, 슬라이드를 별도로 업데이트 해주는 방식으로 작동하게 해주었다. 일부분은 수동으로 작동하게 해주는게 필요했다.

환경설정에서 상태를 바꾸고 적용하면 슬라이드가 바로 적용이 되어야하는데 그렇게 쉽게 풀리지 않는것도 하나의 난관이었다.
상태가 단순히 옵션 하나가 변할수도 있고, 슬라이드 전체에 영향을 줄 수 있을정도로 큰 변화를 줄수도 있기 때문에 환경설정이 열고 닫힐때 슬라이드가 한번씩 안보여지기 때문에 환경설정이 적용되면 슬라이드를 한번 삭제했다가 다시 붙이는 방식으로 풀어나갔다.(unmount and mount)

기초적인 부분에서 개발을 끝내고 디버깅을 하면서 작동에 문제가 있는 부분들을 고쳐나가는데 시간을 꽤 들여서 최대한 작동에 문제 없도록 노력했다.

주변의 요구사항도 적용하면서 초기버전을 완성했다.

Connect service

만들어진 슬라이드쇼에 대해서 회사에서 논의한 결과 전시회에 사용되고, 현재 돌아가고 있는 웹 서비스에 적용하는것으로 정해졌다.

내가 만든 슬라이드쇼 컴포넌트로 웹 서비스에 붙이는 작업은 회사 동료가 맡게 되어서 어떻게 사용하는지만 가르쳐줬더니 금방 서비스에 붙여 버렸다. 먼저 북마크에서 슬라이드쇼가 적용되었다. (Redgoose bookmark)

현재 서비스에서 슬라이드쇼 활용을 더 확대할 예정이다.

End

아직 개발해야 할것들이 남아있지만 기초적인 기능에서 플러그인 형식으로 덧붙여 개발할 생각을 가지고 추가 개발은 나중으로 기약하고 마무리했다.

이번 작업으로 Redux에 대해서 좀더 많은것을 알아낼 수 있었고, 활용법에 대해서도 확신을 가질 수 있는 계기가 되었다. 그전까지는 Redux에 대해서는 복잡하고 어렵게 느껴왔는데 용도에 맞게 적절하게 사용된다면 괜찮은 대안이라고 볼 수 있다.

처음부터 모두 혼자서 회사작업을 한거지는 나름대로 재미있게 만들었던 때인것 같다. 나중에 기회가 된다면 개인적으로 오픈소스용으로 만들어보는것으로 도전해보고 싶다.

디자인 시안작업을 위하여 Mark Jeffrey R. Santos님의 작품과 Jaeyeol Han님의 작품이 사용 되었습니다.
문제가 있다면 scripter@me.com 으로 이메일 보내주세요.