slideshow
가족앨범 사진들을 디스플레잉을 어떻게 할 수 있을까 고민하다가 슬라이드쇼 프로젝트를 시작하게 되었습니다.
예전에 만든 슬라이드쇼를 제대로 만들어본 경험으로 더 좋은 모습으로 만들고 했습니다.
슬라이드쇼의 목적은 브라우저 전체화면으로 사진을 한장씩 넘겨보는것입니다.
이 프로그램의 특징을 요약하자면 다음과 같습니다.
- 슬라이드와 이미지 스타일에 관한 설정
- 자동재생
- 터치 디바이스 지원
- 다국어
- 슬라이드, 설정 데이터 백업 및 복원
- 트랜지션 타입 설정
- 슬라이드 캡션
- 다크모드
- json 형태의 슬라이드 데이터 지원
- 키보드 단축키
Usage
깃허브에서 제공하는 데모는 다음 주소와 같습니다.
https://redgoose-dev.github.io/slideshow/
접속하면 다음과 같은 화면을 볼 수 있습니다.
슬라이드 이미지를 중심으로 캡션, 이전|다음으로 이동하는 컨트롤 버튼, 썸네일 목록과 환경설정 화면을 여는 버튼들로 화면이 구성되어 있습니다.
Preference
환경설정은 슬라이드쇼에서 많은 기능들을 직접 조정할 수 있도록 도와줍니다.
우측 위 버튼에서 Menu > Preference에서 환경설정을 열 수 있습니다. 각 탭에따라 역할을 가지고 있으며 그에대한 설명은 다음과 같습니다.
- General: 슬라이드쇼 기초적인 항목들에 대하여 다룹니다.
- Slides: 슬라이드 기능에 관한 항목
- Style: 이미지 표현과 색표현에 관한 항목
- Data: 슬라이드 데이터 편집
- Keyboard: 키보드 단축키에 관한 항목
Management tree data
슬라이드 데이터는 Preference > Data 탭에서 편집할 수 있습니다. 이리 만들어져 있는 예제파일 tree.json 을 열어보면 객체로 슬라이드들의 정보가 입력되어있다는것을 볼 수 있습니다.
슬라이드 그룹 하나의 모습은 다음과 같습니다.
{
"foo": {
"name": "slide title",
"description": "description text",
"slides": [
{
"src": "filename.jpg",
"thumbnail": "filename.jpg",
"title": "title text",
"description": "description text"
}
]
}
}
슬라이드 데이터는 json파일로 만들어서 가져오거나 외부 서버에서 가져올 수 있습니다.
외부 서버에서 슬라이드를 가져올때의 데이터는 다음과 같습니다.
{
"foo": {
"name": "title",
"description": "description text",
"slides": "https://domain.com/example.json"
}
}
Keyboard shortcut
키보드 단축키는 다음과 같습니다.
방향키(왼쪽): 이전 슬라이드로 이동하기방향키(오른쪽): 다음 슬라이드로 이동하기A: 자동재생S: 환경설정 열기T: 썸네일 이미지 목록화면을 엽니다.R: 슬라이드쇼 재실행H: 조작과 상태요소들을 보여줍니다.G: 슬라이드 그룹 선택창을 엽니다.
Develop Usage
개발환경 구축에 앞서 다음과 같이 저장소를 클론하고 디펜던시를 인스톨합니다.
git clone https://github.com/redgoose-dev/slideshow.git
cd slideshow
yarn install
Web environment
프로젝트를 개발할때 다음과 같이 실행하여 개발서버를 띄웁니다.
yarn run dev
서버를 띄웠으면 브라우저에서 http://localhost:3000으로 접속하여 프리뷰할 수 있습니다.
프로젝트의 본 소스는 src/에 있으며 코드는 vue3로 작성되었습니다.
개발을 완료했으면 다음과 같이 프로젝트를 빌드합니다.
yarn run build
빌드가 완료되면 docs/경로에 파일들이 업데이트 됩니다.
macOS and Windows app
일렉트론을 통하여 앱 빌드작업하기에 앞서 먼저 다음과 같이 웹 프로젝트를 빌드합니다.
yarn run build
다음 명령과 같이 개발모드로 실행하거나 프로덕션으로 빌드할 수 있습니다.
# development app
yarn run electron-dev
# build app
yarn run electron-build
Using component
다른 프로젝트에서 슬라이드쇼를 사용하려면 npm을 이용하여 컴포넌트를 직접 추가할 수 있습니다.
yarn add @redgoose/slideshow
디펜던시를 추가하고 for external project 페이지의 내용과 소스를 참고하여 개발할 수 있습니다.
Support browser
개발할때 다음과 같은 브라우저로 작업하면서 테스트했습니다.
- macOS, iOS safari
- Google Chrome
- Microsoft Edge
thanks
- vue3: https://v3.vuejs.org
- electron: https://www.electronjs.org
- example images: https://unsplash.com
3 Oct 21, 2022
2 Jun 27, 2022
514 Jan 4, 2023
4.1k Dec 28, 2022
193 Nov 24, 2022
78 Nov 27, 2022
158 Dec 30, 2022
57 Dec 1, 2022
60 Dec 7, 2022
8 Jul 29, 2020
292 Jan 2, 2023
21 Aug 13, 2022
92 Dec 9, 2022
0 Feb 1, 2020
1 Oct 15, 2019
2 Aug 13, 2018
1 Nov 20, 2021
4.1k Dec 28, 2022
270 Jan 6, 2023
4 Aug 22, 2022
468 Jan 4, 2023
0 Jun 12, 2019
0 Sep 25, 2021
17 Dec 26, 2022
2 Feb 23, 2022
39 Jan 2, 2023
1 Oct 30, 2022