Show GN: UniFandora - 미니 슬라이드쇼 (이미지, 움짤, 동영상)
(github.com/enarche-ahn)제가 필요해서 만든 간단한 슬라이드쇼 앱을 소개합니다.
업무 주에 잠깐 커피 한잔 할때, 모니터 한구석에 아이유 움짤 보는걸 좋아합니다.
주 사용 컴을 맥으로 바꾸고, 마땅한 앱이 없어 고민하다가 GPT 도움으로 간단하게 만들어 봤습니다.
앱의 대략적인 특징입니다.
- 슬라이드쇼 기능
- 이미지(움짤포함), 동영상 재생
- 슬라이드쇼 시간 시간과 별개로 동영상 끝까지 보기 가능
- 이미지 비율에 맞춰 창 세로 길이 조절
- 시간 표시
- 자동 업데이트
저와 비슷한 취향이 있을지 몰라 올려 봅니다.
첨엔 swift로 개발하다가 이왕이면 cross platform으로 만들자 해서
flutter와 electron을 고민하다가, 모바일을 고려하지 않았기에 electron으로 결정했습니다.
이번에 개발하면서 몇가지 새롭게 알게 된것도 있어 소소도 함께 공유합니다.
github : https://github.com/enarche-ahn/unifandora-release
자동 업데이트
electron은 처음 사용해 보는데요,
익히 Visual Code를 electron으로 개발했다는 소문을 들어 호기심은 많았었는데,
막상 사용해 보고 홀딱 반해 버렸습니다.
특히, 자동 업데이트를 무척 간편하게 연결할 수 있어 깜짝 놀랐습니다.
shell로 로그 출력
보통 renderer에서의 디버깅 용으로 로그 메시지를 출력하면 브라우저의 개발 모드에서 밖에 확인이 안되었습니다.
혹시나 하고 GPT에 물어보니 해결책을 똭! 제시해 주더군요.
그 방법이 생각보다 너무 간단하고 효율적이라 소름이 돋았습니다.
(오랜동안 백엔드만 개발해서 제가 잘 몰라서 그렇겠지만요 ^^;)
아래처럼 추가해 주면 [renderer.js]에서 출력한 console.log()가 shell로 잘 출력됩니다.
[main.js]
// Log messages received from renderer
ipcMain.on('renderer-log', (event, message) => {
console.log('Renderer Log:', message);
});
[preload.js]
contextBridge.exposeInMainWorld('electronAPI', {
sendLog: (message) => ipcRenderer.send('renderer-log', message)
});
[renderer.js]
// Override console.log to forward log messages to the main process.
(function() {
const originalConsoleLog = console.log;
console.log = function(...args) {
if (window.electronAPI && typeof window.electronAPI.sendLog === 'function') {
window.electronAPI.sendLog(args.join(' '));
}
originalConsoleLog.apply(console, args);
};
})();
window.addEventListener('DOMContentLoaded', () => {
...
console.log('Slideshow started...');
});