먼저 만들고 싶은건 갤러리 형식의 반려 동물의 사진을 공유 하는 곳이다. 대략 아래와 같은 형태가 될 것 같다. 사진과 간단을 소개를 등록하는 화면과 사진의 목록과 소개 내용을 살펴보는 곳 이렇게 두 가지 정도의 기능을 제공하면 될 것 같다.
조금 더 구조화 해서 표현을 하면 대략 이런 모습 이겠다.
- 로그인
- 구글 계정으로 로그인하기
- 사진 목록
- 목록 표시
- 정렬
- 사진/글 등록 (로그인 필수)
- 등록하기
- 파일 업로드 (사진 유형, 필수 등록)
- 반려 동물 이름과 간략한 사진 소개 글
- 수정하기
- 업로드된 사진은 수정 불가
- 반려 동물 이름과 사진 소개를 수정할 수 있음
- 삭제하기
- 등록된 사진을 제거
- 등록하기
일단 구현을 하려면 백엔드가 갖춰져야 할거 같으니 일단 UI 수준에서만 대략 구성하는 것을 먼저 해야겠다. 그리고 백엔드는 현재 GCP(Google Cloud Platform) 를 기반으로 되어있는 firebase를 사용하여 구성해보려고 한다. 이건 좀 나중 이야기이고 일단 Vue 를 통해서 UI 구성하고 만드는 것부터 해보자.
먼저 반응형 웹을 위해서 Bootstrap 으로 시작하고 싶은데 이왕이면 최근에 나온 버전 4로 진행하고 싶다. 이전에는 3버전을 사용하였는데 4버전에서 지원하는 기능들에 비해서 더 많은 UI 컴포넌트들을 지원하고 있기 때문이다. 디자이너가 아니니까 잘 만들어진 UI 컴포넌트는 많으면 많을수록 좋은 것 같다.
그러다가 처음에 개발 환경 설정을 하고 처음 만난 Vue 페이지가 떠올라서 살펴보았다.
앗 아아.. 이런게 있었구나.. 여기는 Vue 로 만든 여러 형태의 오픈소스들과.. 샘플 코드 등 처음 시작하는 사람에게 굉장히 도움이 될만한 것들이 많이 있었다. 그중에 vue-bootstrap 이라는 것이 있고 링크를 또 타고 방문해 보면 문서화가 잘 되어있다. (bootstrap 처럼) 이거 보면서 조금씩 해보면 되긋다.
