인스타그램 클론 코딩 - 1주

유정훈·2020년 6월 13일
0

인스타그램

목록 보기
1/5

내용

기능 설계 및 DB 설계

상세 내용

기능 설계

인스타그램의 주 기능은 사진이나 동영상을 올리고 많은 사람들이 볼 수 있도록 한다.
게시물은 본인만이 수정하거나 삭제할 수 있어야 한다.
게시물에 하트 누를 수 있다.
게시물에 댓글 달 수 있다.
태그를 달아 검색에 노출될 수 있도록 한다.

탐색은 친구가 아니라도 나올 수 있도록 한다.
검색은 가장 최근순으로 10개씩 나올 수 있도록 한다.

DB 설계

사용자와 게시물은 1:M 관계
게시물과 태그는 M:N 관계
게시물과 하트는 1:M 관계

다른 테이블이 생성될 지는 아직 모르겠다.

화면 설계

초기 카카오 오븐으로 진행하다가 인스타그램을 실제로 보면서 구현하는 것이 좋겠다는 판단으로 다음과 같이 만들어보았다.






모달을 이용하여 추가적인 메뉴를 구성하였다.


화면은 html과 css, js, jquery, bootstrap을 이용하여 구성하였을 뿐 아직 기능은 구현되지 않았다.

다음 진행 계획

만들어진 UI를 참고로 하여 데이터를 저장하거나 삭제하는 기능을 구현할 계획이다. 기능만 구현하고 Validation 체크는 추후 생각해보자.

결론

핵심 기능인 업로드, 열람, 로그인, 회원가입, 팔로우 게시물 리스트 등은 UI 설계를 했다. 아직 프로필 편집이나 좋아요 한 게시물 보기, 게시물 편집와 같이 부 기능에 대해서는 만들지 않았다. 백엔드를 구현하면서 같이 설계 및 구현할 계획이다. 추가적으로 로그인과 회원가입 시 Validation 체크는 아직 구현되지 않았고 완성했을 때 해도 괜찮을 것 같다. (계속 붙잡으면 의욕이 없어지니까...)

profile
Django

0개의 댓글