Portfolio

📋 개요 1. 프로젝트 주제 2. 선정 배경 3. 타겟 사용자 4. 주요 기능 5. 기대 효과 🖌️ 로고 및 색상 1. 로고 2. 색상 🧑‍💻 기술 스택 ✔️요구사항 1. 공통 요구사항 2. 페이지 별 요구사항 🏗️ UI 와이어프레임 📄UI 기능 명세서 1. 메인페이지 및 검색 결과 페이지 2. 로그인 페이지 3. 개인 페이지 4. 회원가입 및 개인 정보 수정 페이지 5. 상세 페이지 6. 포스트 작성 페이지

📋 개요

📌

프로젝트 내용을 간략히 요약했습니다.

1. 프로젝트 주제

즐겨찾기와 검색기능을 이용해 짤방의 접근성을 극대화한 SNS 웹 서비스

2. 선정 배경

짤방은 인터넷이 확산된 이래로 커뮤니티에서부터 널리, 그리고 자주 사용되는 이미지 형식인 동시에 일종의 인터넷 밈(MIME)이다. 최근 인터넷 사용량의 증가와 뉴미디어의 발달로 인터넷 밈에 대한 관심이 증가함은 물론 광고의 대상으로 쓰이는 등 경제적 효과 또한 무시할 수는 없는 수준이다.

짤방에 대한 저장 서비스는 그다지 많이 제공되고 있지 않다. 원하는 짤방을 사용하기 위해 구글링으로 키워드를 검색해야만하고, 그렇게 찾은 이미지를 나중에 다시 찾기는 쉽지않아 짤방을 자주 사용하는 이용자들은 개인 컴퓨터 내에서 저장, 관리를 하고 있는 상황이다. 또한 기존에 제공하는 짤방 저장 웹사이트의 경우 즐겨찾기와 같은 기능을 갖고 있지않아 결국은 검색를 다시 해야하는 불편함을 감수해야한다. 따라서 자주 사용하는 짤방에 대한 즐겨찾기기능을 제공하고 편리한 검색기능을 탑재한 웹서비스의 필요성이 대두된다.

짤방은 유행의 변화 속도가 빠르고 트랜디한 짤방이 계속적으로 생성되고 있다. 사용자가 지속적으로 이러한 흐름을 쫓아가기는 쉽지않다. 따라서 짤방의 트랜디함을 지속적으로 관찰하고 사용자에게 추천해주는 서비스에 대한 요구가 존재한다.

3. 타겟 사용자

짤방을 즐겨 사용하는 인터넷 커뮤니티 핵심 이용자 / 주로 10대 ~ 30대 젊은층

트랜디한 짤방을 제작하고 포스팅을 즐기는 인터넷 커뮤니티 헤비 유저

4. 주요 기능

짤방 검색 기능 : 태그 / 제목을 통한 짤방 검색

트렌디 짤방 기능 : 즐겨찾기 수를 기반으로한 인기순 정렬로, 최근 트렌디한 짤방을 추천, 제안

짤방 복사 기능 : 원클릭을 통한 손쉬운 복사, 다른 사이트에 빠르게 짤방을 옮길수 있는 편리함 제공

짤방 담기 기능 : 짤방 좋아요를 통한 개인 아카이빙 기능, 즐겨찾기한 짤방은 검색없이 사용자 페이지를 통해 바로 접근할수 있다.

짤방 업로드 기능 : 짤방을 업로드 함으로서 소지한 짤방을 공유할수 있고, 내 컴퓨터에서 관리할 필요없이 사이트 내에서 손쉽게 접근가능.

유저 팔로우 기능 : 팔로우를 통해 해당 유저가 업로드하는 짤들을 구독하여, 손쉽게 접근할 수 있다.

5. 기대 효과

사용자가 원하는 짤방을 검색하는데 필요한 시간 단축

트렌디한 짤방의 유행에 대한 지속적인 관찰 및 제시

일회성이 높은 짤방의 활용도에 대해 즐겨찾기 기능을 통한 짤방 북마크 기능

🖌️ 로고 및 색상

📌

디자인에 사용된 로고와 색상에 대해 쓰여있습니다.

1. 로고

'짤이몽땅'의 로고는 "키가 몸에 비하여 꽤 작다"라는 의미의 짜리몽땅과 "짤이 모두 모여있다"라는 의미인 "짤이" + "몽땅"의 중의적 의미에서 파생되었다. 짜리몽땅이라는 단어의 의미와 어감이 주는 귀여우면서도 단단한 이미지를 시각화하기 위해 펜의 끝은 둥글면서도 뭉툭한 느낌을 주는 글씨체를 사용하였다.

또한 짤이라는 글자가 주는 거센느낌을 중화시키기 위해 명량한 느낌의 주황색을 사용했고 고급스러운 느낌의 청록색으로 몽땅의 당돌한 느낌을 살리면서도 투박함을 세련됨으로 감싸려했다.

2. 색상

"짤이몽땅"의 색상은 bluegreen 와 orange 계열의 색상을 주요 색상으로 사용한다.

유쾌한 자극을 통해 긍정적이면서도 명량한 효과를 내는 orange는 인터넷 문화의 순기능을 상징한다. 활동감과 호기심을 상징하는 orange색이 '짤'이라는 단어를 표현하기에 적합한 컬러라 생각해 채택했다. 또한 bluegreen 컬러로 orange 컬러의 이미지와 분위기를 강조하면서도 보다 세련미를 더해 준다.

🧑‍💻 기술 스택

📌

프로젝트에서 사용한 기술을 정리해두었습니다.

언어: JavaScript

라이브러리: React

상태관리: Context API

UI 스타일링: emotion

협업툴: git, git-project, Notion

✔️요구사항

1. 공통 요구사항

필수

사용자는 회원가입과 로그인을 할 수 있습니다.

가입, 로그인, 인증 검사

사용자는 채널에 올라온 글을 볼 수 있습니다.

글쓰기, 채널 목록, 채널 내 글 목록
인증된 사용자는 채널에 올라온 글을 볼 수 있습니다.
인증된 사용자는 채널에 포스트를 남길 수 있습니다.

인증된 사용자는 포스트를 즐겨찾기(좋아요)할 수 있습니다.

인증된 사용자는 포스트에 댓글을 남길 수 있습니다.

SPA 형태로 만들어주세요.

엉뚱한 페이지에 접속하면 404 페이지를 보여주세요.

사용자는 채널을 검색할 수 있습니다.

인증된 사용자는 프로필 이미지 변경 및 포스트를 작성할 때 파일 업로드를 이용하여 이미지를 첨부할 수 있습니다.

사용자는 가입자의 정보를 볼 수 있습니다.

선택

사용자는 현재 접속 중인 사용자를 볼 수 있습니다.

사용자는 가입자 목록을 볼 수 있습니다.

사용자는 가입자를 이름으로 검색을 할 수 있습니다.

사용자는 포스트 혹은 가입자를 검색할 수 있습니다.

인증된 사용자는 자신의 정보를 변경할 수 있습니다.

인증된 사용자는 자신의 알림 목록을 확인 할 수 있습니다.

인증된 사용자는 다른 가입자에게 메시지를 보낼 수 있습니다.

인증된 사용자는 자신에게 온 메시지 목록을 확인 할 수 있습니다.

인증된 사용자는 특정 사용자와의 메시지 대화 내역을 확인 할 수 있습니다.

다크 모드를 적용해보세요.

WebSocket을 이용하여 다른 사용자의 메시지를 실시간으로 받아보세요.

WebSocket을 이용하여 알림을 받고 알림을 Context와 localStorage로 관리해보세요.

2. 페이지 별 요구사항

메인페이지, 검색 결과 페이지

사용자는 메인페이지에 접근할 수 있습니다.(로고 클릭, URL 입력)

인증되지 않은 사용자는 로그인 버튼을 클릭하여 로그인 페이지에 접근할 수 있습니다.

인증된 사용자는 프로필 사진을 볼 수 있습니다.

프로필 사진을 등록하지 않은 경우 기본 이미지가 보여집니다.

프로필 사진을 토글하여 메뉴바를 slide down하여 볼 수 있고, slide up하여 숨길 수 있습니다.

'사용자 페이지' 클릭 시 자신의 사용자 페이지로 이동합니다.
'정보수정' 클릭 시 회원 정보 수정 페이지로 이동합니다.
'로그아웃' 클릭 시 사이트에서 로그아웃된 후 메인페이지로 이동합니다.

검색창에서 카테고리(채널) 검색을 통해 해당 카테고리(채널)의 전체 포스트 목록을 조회할 수 있습니다.

검색창에서 포스트 제목 또는 가입자의 닉네임 검색을 통해 관련 포스트 목록을 조회할 수 있습니다.

전체 카테고리(채널) 목록을 가로방향으로 스크롤하면서 볼 수 있습니다.

카테고리(채널) 버튼을 통해 각 채널의 전체 포스트 목록을 조회할 수 있습니다.

사용자는 조회된 포스트 목록을 세로방향으로 무한 스크롤하면서 볼 수 있습니다.

포스트 이미지에 마우스를 hover하면 이미지가 커지거나 움직이는 효과(gif)를 볼 수 있습니다.

포스트 이미지를 클릭하면 포스트 상세 페이지로 이동합니다.

각 포스트 하단에서 즐겨찾기(좋아요) 버튼과 즐겨찾기(좋아요) 개수를 볼 수 있습니다.

인증된 사용자는 각 포스트 하단에서 즐겨찾기(좋아요) 버튼을 토글할 수 있습니다.

해당 포스트를 즐겨찾기(좋아요) 하지 않은 경우 버튼 클릭 시 포스트를 개인 즐겨찾기(좋아요) 목록에 등록합니다.
해당 포스트를 즐겨찾기(좋아요)한 경우 클릭 시 포스트를 개인 즐겨찾기(좋아요) 목록에서 제거합니다.

인증된 사용자는 포스트 작성 버튼을 볼 수 있습니다.

포스트 작성 버튼 클릭 시 작성 페이지로 이동합니다.

사용자 페이지

모든 사용자는 사용자 페이지(본인 혹은 다른 사용자)에 접근할 수 있습니다.

모든 사용자는 해당 페이지 사용자의 정보를 확인할 수 있습니다.

사용자 이름 을 확인 할 수 있습니다.
팔로워 수를 확인 할 수 있습니다.
팔로잉 수를 확인 할 수 있습니다.

인증되지 않은 사용자가 사용자 페이지에 접근한 경우

팔로우 버튼을 클릭 시 로그인 알림 창이 등장합니다.

인증된 사용자가 사용자 페이지에 접근한 경우

팔로우 중 → 언팔로우 버튼이 활성화 됩니다.
언팔로우 중 → 팔로우 버튼이 활성화 됩니다.

사용자는 탭을 클릭해 해당 사용자가 등록한 포스트를 확인 할 수 있습니다.

좋아요 탭에서는 해당 사용자가 즐겨찾기(좋아요)한 짤을 확인할 수 있습니다.
업로드 탭에서는 해당 사용자가 업로드한 짤을 확인할 수 있습니다.

사용자는 포스트를 클릭해 해당 포스트의 상세페이지로 이동할 수 있습니다.

로그인 페이지

사용자는 로고를 확인할 수 있습니다.

로고를 클릭해 메인페이지로 이동할 수 있습니다.

사용자는 아이디를 입력할 수 있습니다.

입력한 아이디가 이메일 형식인지 유효성을 검사합니다.

사용자는 비밀번호를 입력할 수 있습니다.

사용자는 로그인 버튼을 클릭하여 입력한 아이디와 비밀번호로 로그인을 완료할 수 있습니다.

사용자가 로그인을 실패할 경우

"아이디와 비밀번호를 확인하세요"라는 문구를 확인할 수 있고 로그인페이지에서 다시 아이디, 비밀번호를 입력할 수 있습니다.

사용자는 회원가입 버튼을 클릭하여 회원가입 페이지로 이동하여 회원가입을 진행할 수 있습니다.

회원가입 페이지

모든 사용자는 회원가입 페이지에 접근할 수 있습니다.

모든 사용자는 회원가입에 필요한 정보를 입력할 수 있습니다.

email을 입력할 수 있습니다.
password을 입력할 수 있습니다.
name을 입력할 수 있습니다.

필수 정보( email, name, password )를 입력하지 않고 작성완료 버튼을 누를시 알림창을 보여 줍니다.

A 항목을 입력하지 않을시 "A 항목을 입력해주세요"라는 문구를 보여줍니다. (단, A는 필수 정보 중 하나)

작성완료 버튼을 클릭시 중복된 email과 name이 있을때 알림창을 보여줍니다.

중복된 email → "이미 있는 email 입니다."
중복된 name → "이미 존재하는 name 입니다."

사용자는 작성완료버튼을 클릭해 회원가입을 요청할 수 있습니다.

사용자는 취소 버튼을 클릭해 회원가입을 취소할 수 있 습니다.

클릭 시"회원가입을 취소하시겠습니까"라는 문구를 보여줍니다.
"예"를 클릭 시 로그인 페이지로 이동합니다.
"아니오"를 클릭 시 페이지는 유지됩니다.

회원가입이 완료되면 로그인페이지로 이동합니다.

포스트 상세 페이지

사용자는 자신이 작성한 게시글일 경우 더보기 버튼(...)을 클릭하여 수정, 삭제 버튼을 확인할 수 있습니다.

사용자는 수정버튼을 클릭하여 게시글 작성 페이지에서 게시글을 수정할 수 있습니다.
사용자는 삭제 버튼을 클릭하여 "정말로 삭제하시겠습니까?"에 대한 질문을 받아 예 혹은 아니오로 해당 게시글을 삭제하거나 취소할 수 있습니다.

사용자는 프로필 사진을 토글하여 메뉴바를 slide down하여 볼 수 있고, slide up하여 숨길 수 있습니다.

'사용자 페이지' 클릭 시 자신의 사용자 페이지로 이동합니다.
'정보수정' 클릭 시 회원 정보 수정 페이지로 이동합니다.
'로그아웃' 클릭 시 사이트에서 로그아웃된 후 메인페이지로 이동합니다.

사용자는 복사 버튼을 클릭하여 이미지를 복사할 수 있습니다.

사용자는 즐겨찾기(좋아요) 버튼을 클릭하여 개인 페이지에 이미지를 등록할 수 있습니다.

사용자는 이미지의 제목을 확인할 수 있습니다.

사용자는 로그인한 상태라면 자신의 프로필 사진과 이름, 댓글 작성 요소가 있는 블럭내의 댓글 작성 요소에 댓글을 입력할 수 있습니다.

사용자는 가장 오래된 댓글을 단 사용자의 프로필 사진, 이름, 댓글을 단 시간(혹은 ~시간전 형태 - 추후 수정), 댓글 내용을 확인할 수 있습니다.

사용자는 자신이 단 댓글에서 수정버튼을 클릭하여 댓글 내용을 수정할 수 있습니다.

사용자는 자신이 단 댓글에서 삭제버튼을 클릭하여 해당 댓글을 삭제할 수 있습니다.

사용자는 하단 화살표 버튼을 클릭하여 10개의 댓글을 더 확인할 수 있습니다.

아래로 더 swipe 혹은 휠을 내리면 10개의 댓글을 더 확인할 수 있고 이 과정을 반복할 수 있습니다.

뒤로가기 버튼을 클릭하여 결과 페이지 혹은 개인페이지로 이동합니다.

포스트 작성 및 수정 페이지

인증된 사용자만 작성 및 수정 페이지에 접근 할 수 있습니다.

사용자는 이미지 파일을 포스트에 업로드할 수 있습니다.

사용자는 drag & drop으로 파일을 업로드 할 수 있습니다.

파일을 2개 이상 선택해 drag & drop시 경고문구를 보여줍니다.

사용자는 파일 선택 버튼을 클릭해 파일을 업로드할 수 있습니다.

파일을 2개 이상 선택시 경고 문구를 보여줍니다.

사용자는 업로드한 이미지 파일을 제거할수 있습니다.

사용자는 이미지 파일 업로드 도중에 취소할 수 있습니다.

사용자는 포스트의 제목을 입력할 수 있습니다.

사용자는 포스트의 제목을 수정할 수 있습니다.

사용자는 카테고리를 1개 이상 선택하야만 합니다.

사용자는 선택한 카테고리를 한번 더 클릭하여 선택을 해제 할수 있습니다.

작성 완료 버튼을 클릭하면 포스트가 선택한 카테고리에 포스팅됩니다.

필수 작성요소를 미완료 상태로 작성완료 버튼을 클릭할 시 경고 문구가 등장합니다.

카테고리를 선택하지 않을 시 "카테고리를 선택해주세요" 경고 문구가 등장합니다
제목을 입력하지 않을 시 "제목을 입력해 주세요" 경고 문구가 등장합니다.
이미지를 업로드 하지않을 시 "업로드할 이미지가 없습니다." 경고 문구가 등장합니다.

🏗️ UI 와이어프레임

📄UI 기능 명세서

1. 메인페이지 및 검색 결과 페이지

열기

a. 와이어 프레임

2. 로그인 페이지

열기

3. 개인 페이지

열기

4. 회원가입 및 개인 정보 수정 페이지

열기

5. 상세 페이지

열기

6. 포스트 작성 페이지

열기

프로젝트 기획서