시작하면서..
앞선 글에서 파이어베이스의 스토리지와 호스팅 기능을 위주로 사용하여, 반려견 콩이와의 추억이 담긴 사진과 비디오를 오랫동안 돌아볼 수 있도록, 그리고 가족들과 공유할 수 있도록 웹에 앨범을 만든 것을 코드와 함께 소개한 바 있었다.
그런데 이렇게 반려견에 대한 추억 앨범을 만들고 생각이 난 것은 나이가 이미 85-90세에 도달한 부모였다.
부모 관련 사진을 한번 정리해 두는 게 좋겠다는 생각이 들었다. 더구나, 이미 만들었던 반려견 앨범 코드를 활용하면 비교적 쉽게 만들 수 있다는 생각도 들었다, 기존에 만들어 둔 코드를 최대한 활용하기로 했다.
만드는 과정과 구성
기존 코드를 가져와,
우선 index.html에서 참조하는 배경사진을 두 분이 함께 찍었던 사진으로 설정하는 방식으로 기본 화면을 위와 같이 변경해 주었다.
나의 경우에는 4남매이므로, 다른 형제들도 사진이나 동영상을 등록할 수 있도록, 앨범 등록 메뉴를 유지하고, 원하는 경우 각자가 사진 등록 시 이름을 기입할 수도 있도록 유지했다. 또한 불필요한 삭제를 방지하기 위해, 등록자가 원하는 경우 사진이나 동영상 등록 시 편집/삭제에 확인을 위한 비밀번호를 각 사진 또는 동영상마다 넣을 수도 있도록 했다.
또한 각자가 등록하면서, 사진이나 동영상에 간단한 번호를 부여하는 방식으로 주제 구분을 할 수 있게 했다.
이렇게 각자가 등록한 사진과 동영상은 다음과 같이 사진 및 동영상 보기 방식의 페이지를 유지했다. 모든 사진과 동영상을 볼 수도 있고, 등록 시 부여한 번호별로 특정 주에의 사진과 동영상을 선택하여 볼 수도 있다.
참고로 이렇게 사진과 동영상을 등록하는 것은 기존 반려견 앨범에서 사용하는 방식 그대로이다.
만일 특정 사진을 클릭하면 다음과 같이 모달을 이용하여 확대된 원본 사진을 볼 수도 있도록 했다. 동영상의 경우는 해당 동영상이 재생되는 방식이다.
이런 구조를 만들고 가지고 있던 사진들을 하나씩 등록했다.
사진을 등록해 보면서, 지난 시절들을 생각해 볼 수 있었고, 한 장 한 장 등록되는 사진들 속에서 부모의 젊었던 시절, 아파서 병원에 입원했던 시간들, 같이 식사했던 시간들이 새롭게 느껴졌다. 여러 가지 감회가 몰려왔다.
바로 이점이 내가 부모 관련 앨범을 만들고 잘했다는 생각이 드는 이유이다.
위에서처럼, 사진과 동영상을 등록하는 화면과, 보는 화면을 만든 이후, 이 앨범은 추후 형제들이 또는 자녀들이 사진이나 동영상을 보면서 개인적으로 느낀 여러 생각을 나누고 싶을 수도 있겠다는 생각이 들어 파이어 스토어를 이용해 아주 간단한 게시판 기능을 추가했다.
기본적으로 다음과 같은 게시판 읽기 화면을 가지며,
제목을 클릭하면, 다음과 같은 본문 읽기 및 댓글 달기가 가능하도록 구성했다. 댓글을 최근에 작성된 것부터 표시되도록 했는데, 이 역시 파이어 스토어의 컬렉션 기능을 이용했는데, 게시판의 글번호를 이용하여 해당 글번호를 참조하는 댓글들만 표시되도록 구성했다. 작성자는 게시글 등록 시의 입력한 비밀번호를 이용해 수정하거나 삭제도 가능하게 했다.
한편 게시판의 글쓰기 화면은 다음과 같은데, 앞에서 소개한 것과 같은 Quill 등의 WYSIWIG를 적용하지 않고, textarea 문법으로 text만 입력되도록 간단하게 구성하는 대신, 파일을 첨부 가능하도록 구성했다.
한편 시간이 지나면 형제들 간 경조사나, 특별히 알려야 할 소식이 있을 수도 있다는 생각에 게시판과 별도의 공지사항이란 화면도 만들었다.
실상 이 부분은 위의 댓글 기능 코드만 발췌하여 별도의 페이지로 구현한 것인데,
“신규/수정” 버튼을 이용하여 다음과 같이 등록 화면에 연결되도록 했다.
이 화면에서는 신규 등록 외에 공지사항을 등록한 사람이 비등록 사항을 수정하거나, 삭제할수도 있도록 했다.
Back-End 기능들
그런데, 이러한 부모 관련 앨범은 가족 및 친족들 사이에서만 활용되는 내용이라, 일단 이 웹서비스에 가입을 해야만 사용이 가도록 설정해야 했고, 이 때문에 여러 가지 back-end 기능을 추가할 필요가 있었다.
기본적으로 인증은 파이어베이스의 E-mail 계정을 이용하는 인증 서비스를 이용해서 가입하도록 하되,
아무나 가입하지 못하도록 하기 위하여, 가입자의 적절성 여부를 한번 거를 필요가 있었다.
다음과 같이 간단한 질문을 가입 시에 답하도록 했다. 이 경우에는 적어도 부모의 출생연도는 알아야 가입 절차를 진행할 수 있도록 한 단계 필터를 두었다.
일단 가입이 되면, 가입자는 다음과 같은 로그인을 통과하여 사진 및 동영상에 접근하도록 했다.
이 부분 역시 파이어베이스의 인증 서비스를 이용했다.
또한 로그인 이후 가입자가 희망에 비밀번호를 변경하기 위한 기능과
탈퇴 기능을 추가했다.
로그아웃 시는 다음과 같이 rpompt로 확인 과정을 거치도록 했다.
코드 공유 및 활용
관련 코드를 다음에 공유한다.
그대로 가져다 사용하면 되는데, 사진정보와 몇 가지 제목만 대체하여 그대로 자신의 가족앨범을 만들 수도 있으며, 동호회나 소모임 등의 사진과 앨범 공유용으로 사용해도 좋을듯하다.
다음과 같이 파이어 베이스 포르젝트 Configuration 정보는 각자의 파이어 베이스 콘솔에서 복사해 붙여 넣어주어야 한다.
그리고 한 가지 기억할 것은 가입자 처리 시, 연관되지 않은 사람의 가입을 막기 위해 다음과 같은 방식의 간단한 질문 과정을 거쳤는데, 이 부분은 각자에 맞게 수정할 필요가 있다.
이 부분은 다음 화면을 참조하여 수정하면 된다.
