우리 집에는 “콩이”라는 나이 든 반려견이 있다. 이미 나이가 15-17세 정도 된 푸들인데, 사람으로 치면 80~90세 정도일 듯한데, 그럼에도 아직도 귀엽기 그지없는 푸들 강이지이다.
콩이와는 여러 가지 추억이 많이 있다.
이미 나이가 무척 많아 남은 시간이 그리 길지가 않다고 생각되지만, 그럼에도 콩이와의 시간들을 오래 기억하고 싶어, 콩이와 관련된 사진들을 모아서, 파이어 베이스를 이용하여 앨범으로 만들어 보게 되었다.
반려견에 대한 비슷한 경험을 가진 사람들이 쉽게 시도해 볼 수 있도록 반려견 앨범을 만들었던 과정과, 거의 대로 가져다 동일하게 만들어볼 수 있도록 코드를 소개한다.
나는 인트로 화면을 다음과 같이 구성했다. 그리고 메뉴도 최대한 간단하게 구성했다.
이 배경화면 사진은 index.html에서 지정하도록 되어있는데, 실제로는 /assets 폴더 내에 저장되어 있다. 자신의 반려견 사진으로 대체하려고 하는 경우, 해당 폴더에 자신의 반려견 사진을 동일한 이름으로 넣어주면 된다. (물론 다른 이름으로 넣어주고, index.html에서 파일 이름을 변경해도 된다.)
실제 사용자 메뉴는 다음과 같이 앨범 보기 단 한 개로 구성했다.
특정한 사진을 선택하면 해당 사진이 확대되어 보거나 인쇄할 수 있게 했다.
JPG 사진 외에, MP4 동영상 파일도 함께 앨범에 저장할 수 있게 했는데, 아래와 같이 동영상 파일에는 삼각형 형태의 플레이 표시가 나타나게 된다.
이러한 동영상들은 해당 클립을 선택하면 다음과 같이 전체 화면으로 해당 동영상이 재생되도록 구성했다. 동영상 재생 중 중단하려면 Esc 버튼을 2회 누르면 중단되면서 원래 상태로 돌아오게 된다.
그런데, 동영상이나, 사진 자료는 어떻게 추가할 수 있을까?
나는 다음과 같이 등록 및 삭제를 위한 페이지를 추가로 만들었는데, 각각의 앨범마다 X 버튼을 두어서, 이것을 누르면 삭제가 가능하도록 구성했다.
다만 이러한 사진 등록 및 기등록한 사진과 동영상 삭제는 로그인을 한 상태에서만 가능하도록 구성했다.
이 때문에 로그인 화면이 필요했는데, 다음과 같이 구성했고,
로그아웃은 다음과 같이 확인을 거쳐 Log-Out이 이루어지도록 구성했다.
한편 로그인을 위해서는 해당 웹서비스에 가입되어야 하므로, 이를 위한 가입 화면을 다음과 같이 만들었다. 물론 처리는 파이어베이스의 인증 기능을 이용했다.
이렇게 가입자 처리를 하다 보니, 자연스레 가입자의 탈퇴를 위한 부분도 필요해서 다음과 같은 화면을 만들었고, 역시 파이어베이스의 인증 기능을 이용해서 처리했다.
이와 함께 비밀번호 수정이 필요한 경우를 함께 고려하여 별도의 페이지를 만들었다.
한편 전체 코드는 다음 Zip 파일에 첨부해두었으므로 해당 파일을 받아 파이어베이스에 등록하고 사용하면 되는데,
단 하나, 파이어베이스 접속을 위한 접속 정보는 각자의 프로젝트별로 생성되므로, 해당 부분만 자신에 맞게 복사하여 붙여 넣은 후 사용하여야 한다.
또한, 나는 파이어베이스 초기화 명령(firebase.initializeApp) 명령 또한 firebaseConfig.js 파일에 넣어두고 사용하는데, 많은 경우에 이 명령은 스크립트에서 직접 기재하는 경우도 있으므로 자신이 원하는 대로 배치하여 사용하면 된다. 단 이중으로 선언되지 않도록 한 곳(firebaseConfig.JS 또는 각각의 HTML 파일)에만 기재해야 한다.
