이미지 슬라이드쇼 on redgoose note

이미지 슬라이드쇼

Nest: Concept Category: Service 2021-04-14

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

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

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

bbuzzart slideshow

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

-2021-04-14-1-29-00-.png

bbuzzart 슬라이드쇼의 모습


라이브러리

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

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

메타 데이터 관리

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

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

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

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

데이터 구조

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

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

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

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

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

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

Comments

  • 환경설정 구성

    환경설정 화면에서 사용되는 구성요소들 목록

    General (기본)

    전반적으로 사용되는 설정 요소들

    • 스크린 모드 / 라디오 : dark, light, system
    • 언어 / 셀렉트: english, 한국어
    • HUD 보기 / 스위치
    • 마우스 오버시 HUD 보기 / 스위치
    • 요소들 보기 / 체크박스 : 캡션, 페이지번호, 컨트롤 버튼, 메뉴버튼

    Style (스타일)

    화면에 표시되는 시각적인 요소들을 조정한다.

    • 슬라이드 이미지 외부 간격 / number : 전체 화면에서의 간격
    • 슬라이드 이미지 표시 모드 / 라디오 : default, contain, cover
    • 캡션 사이즈 / number : 사이즈 퍼센트
    • 캡션 여백 / number : 바깥쪽에서 캡션 위치

    Slide (슬라이드)

    슬라이드 시스템에 관한 설정 요소들

    • 트랜지션 타입 / radio : slide, fade
    • 시작되는 슬라이드 번호 / number : 처음 시작할때 표시되는 슬라이드 번호
    • 자동재생 / switch
    • 자동재생 딜레이 시간 / number : ms
    • 오버시 자동재생 정지 / switch : 마우스를 화면에 오버할때 자동재생 중단
    • 애니메이션 속도 / number : 트랜지션 애니메이션 속도
    • 인피니트 플레이 / switch : 마지막 슬라이드에서 다음으로 넘어가면 처음으로 돌아간다.
    • 스와이프 사용 / switch : 터치나 마우스 스와이프 사용

    Data (데이터)

    데이터를 가져오는 부분에 대한 설정 요소들

    Keyboard (키보드)

    키보드 단축키에 대한 설정 요소들

    • 키보드 단축히 활성화 (Enable keyboard shortcut) / 스위치
      Enable to use keyboard shortcut.
    • 단축키 가이드 (Guide for keyboard shortcut)
      (단축키 표)
    Written on 2021-04-17
  • 기술스택

    • vue 3
    • typescript (일부분 사용)
    Written on 2021-04-19