한의원에서 누워있다가 이제 무엇을 할지에 대해서 계속 생각하고 있었다.

최근에 가족 앨범을 스캔하고 데이터베이스 작업을 하고있는 때여서 슬라이드쇼가 있으면 좋겠다는 생각이 들었다.
예전에 버즈아트에서 슬라이드쇼를 작업해본 기억이 떠오르면서 이번에는 모든 부분을 직접 만들면서 최적화에 집중하면 좋겠다는 생각이 들었다.

어떤 라이브러리를 사용하면 좋을까 고민도 하고, 메타 데이터를 어떻게 표현하면 좋을까 고민도 하고, 데이터 구조를 어떻게 짤지와 어떻게 가져와서 사용할지에 대해서 이런저런 생각들이 빙글빙글 돌리면서 시간을 보냈다.

bbuzzart slideshow

https://www.bbuzzart.com/show/?action=works&id=85645

bbuzzart 슬라이드쇼의 모습

---

라이브러리

react, vue, svelte, jquery 같은 라이브러리들을 사용해서 만들 수 있는데 가장 편하게 만들수 있는건 vue고, 리엑트를 연습하면서 만들어보고 싶지만 그다지 끌리진 않는다. 코드가 복잡해지는 이유인데.. 실질적으로 만들 프로그램으로 리엑트는 쓰고싶어지진 않는다.
svelte는 너무 최근 라이브러리라서 모든 부분에서 좋지만 성숙도가 떨어지는감이 느껴진다.
jquery는 설정 데이터 연동에 엄청난 삽질이 필요할 것이다.

일단 vue 가 가장 끌리긴 한데 webpack으로 세팅하기는 싫고, 서비스에서 바로 돌리기 때문에 snowpack을 진짜로 사용할 수 있을것이다.

메타 데이터 관리

사진만 돌아가는것이 아니라 제목, 설명, 날짜 같은것들의 부가적인 표현도 존재 할 것이다.
그냥 코드로 박아넣어 버리면 사용자가 직접 레이아웃을 고칠 수 없을 것이다. 그래서 설정에서 직접 편집할 수 있어야 할것이다.

그래서 떠오른 아이디어는..

{{TITILE}}
Date: {{DATE}}
Tool: {{TOOL}}
{{DESCRIPTION}}

같은 모습으로 환경설정에서 작성하고 키워드 치환으로 내용을 표현하면 자유롭게 레이아웃을 고칠 수 있을것이다.

데이터 구조

json 형태로 데이터를 받아들이겠지만 다양한 형태와 모습으로 데이터를 가져올것이다.
이 부분은 정말 명확하게 해결할 수 없는 부분이지만

슬라이드에 카테고리 형태로 분류로 둘 수 있다. 마치 폴더 개념같이.. 이 부분 작업도 고려해야 할것이다.

데이터를 가져올 수 있는 형태는 다음과 같다.

• rest api 주소
• json 파일
• textarea 영역에서의 json 코드

어짜피 사용하는 데이터 구조는 정해져 있을것이다. 대표적으로 사용되고 있는 데이터는 다음과 같다.

• 환경설정
• 슬라이드 목록