Portfolio

러북 슬로건

안녕하세요, 지금 당신에게 필요한 책, <러북>의 발표를 맡은 지은팀 용상윤입니다.

팀원 소개

저희 팀은 황수경, 김태욱, 김다은, 용상윤으로 구성되어 있습니다.

러북 주제

<러북>은 여러 책의 인상 깊은 문구를 보고 취향에 맞는 책을 고를 수 있습니다.

러북 타켓 사용자

즉, 평소 책에 관심이 있는 사용자, 자신이 읽은 책을 공유하고 싶은 사람 등 책을 좋아하는 누구나 사용할 수 있습니다.

러북 주요 기능

러북의 주요 기능은 크게 책 검색, 책 소개 게시글 검색, 게시글 포스팅, 게시글 문구 추천 기능이 있습니다.

기술 스택

저희는 다음과 같은 기술 스택을 사용하였습니다.

개발은 자바스크립트를 기반으로 React 라이브러리를 사용하였고, 상태 관리로는 context api, 컴포넌트 스타일링은 emotion을, 컴포넌트 개발 도구로는 storybook을 사용하였습니다. 또한 ESLint와 Prettier을 이용하여 코딩 컨벤션 및 정해진 규칙에 따라 코드 스타일을 통일하였습니다.

커뮤니케이션 툴로 Git, Notionm, Slack을 이용하고 디자인은 Figma를 이용하였습니다.

협업

저희는 원활한 협업 진행을 위해 깃 브랜치 전략과 깃 커밋 컨벤션, pr과 이슈를 다음과 같이 진행하였습니다.

깃 브랜치 전략

저희는 git-flow에 맞춰서 협업을 진행하고 있습니다. 배포용 main 브랜치와 개발용 develop 브랜치를 만들어 사용하였습니다. develop에서 각자 맡은 기능을 개발하기 위해 feature 브랜치를 만들어서 작업하였습니다.

깃 커밋 컨벤션

컨벤션은 다음과 같이 사용하였고 작은 단위로 커밋 유형을 분리해서 사용하였습니다.

PR과 이슈

저희는 기능 구현전에 다음과 같은 규칙을 정했습니다. (ppt 보여주기)

첫번째, 먼저 이슈를 작성하고 이슈번호로 브랜치를 생성한 후 작업하기

두번쨰, 작업을 완료하고 PR을 올릴 때는 이슈 번호를 연결하기

마지막으로, PR은 코드리뷰를 거친 후 머지

하는 형식으로 작업하였습니다.

지은팀 문화

다음으로 지은팀 문화입니다.

저희는 약 보름이라는 짧은 기간동안 프로젝트를 완성하기 위해 모든 진행 사항을 노션에 문서화 하였습니다.

매일 시작/종료 스크럼, 2~3일의 스프린트와 노션의 칸반보드(첨부)를 이용하여 디테일한 작업 진행 상황을 공유하였습니다.

러북의 디자인에 대해 소개해 드리겠습니다.

디자인 및 와이어프레임

저희는 도서라는 컨셉에 맞게 가을 느낌의 색을 채택하였습니다. (사진 보여주기)

다음은 피그마로 작업한 저희 러북의 주요 페이지 시안입니다.

개발 진행 순서

1. 스토리북 주도로 베이스 컴포넌트를 먼저 개발하였고

베이스 컴포넌트를 활용해서 페이지를 마크업한 뒤

API를 연동하였습니다.

배포 전 테스트와 버그 수정을 거쳐

배포하는 순서로 개발을 진행하였습니다.

이제 저희 러북 프로젝트를 보러 가보겠습니다.

최종 결과물(시연)

안녕하세요 <러북> 시연영상을 보여드릴 지은팀 용상윤이라고 합니다.

이제 저희 <러북>의 시연 영상을 보여드리겠습니다.

(영상 시작)

(메인 화면을 보여준다 - 현재 로그인 되어 있지 않은 상태)

저는 최근에 인상깊은 책을 읽고 이 책을 다른 사람들과 공유하고 싶어져 <러북>을 찾았습니다.

(슬라이더를 넘기며) 이미 많은 유저들이 <러북>에서 책을 공유하고 있네요.

카테고리를 둘러보겠습니다. (메인페이지로 가서 카테고리를 눌러본다)

<러북>은 이렇게 다양한 카테고리 별로 책을 공유할 수 있습니다. 또한 검색 기능을 제공하여 원하는 제목, 내용의 책을 검색할 수도 있습니다. (All로 가서 검색해본다)

(’글 작성’버튼을 누르면서 로그인을 해달라는 메세지가 뜬다)

회원이 아니라면 글을 작성할 수 없기 때문에, 로그인을 해보겠습니다.

(메인화면의 헤더 - 로그인 버튼을 눌러서 로그인 화면으로 이동한다.)

계정이 있다면 로그인을 하고, 계정이 없다면 회원가입을 할 수 있습니다. 회원가입을 진행해보겠습니다.

(”아이디가 없으신가요? 지금 가입하기” 버튼을 눌러서 회원가입을 진행한다)

(회원가입 버튼을 누르니 문구를 입력하는 창이 뜬다)

회원가입 페이지에서는 처음에 자신이 좋아하는 문구를 입력할 수 있습니다. 입력하지 않는다면 placeholder에 보이는 문구가 default 값으로 들어갑니다. “일단 구경할래요” 라는 버튼을 통해 메인화면으로 가서 일단 <러북>컨텐츠를 볼 수도 있습니다. 지금은 문구를 입력하지 않고 다음으로 넘어가겠습니다. 엔터키를 누르거나 스크롤을 내리거나, 아래 보이는 버튼을 이용하여 다음으로 넘어갈 수 있습니다.

(다음으로 넘어간다)

회원가입 폼에서는 이메일, 닉네임, 비밀번호를 입력하여 가입을 할 수 있습니다.

이메일은 이메일 형식을 준수해야하고 비밀번호에는 자릿수 제한이 있으며 비밀번호 확인은 비밀번호와 동일해야합니다. 만약 유효하지 않다면 붉은 글씨로 유효하지 않다는 메세지를 보여줍니다.

올바르게 폼을 작성하고 “회원가입” 버튼을 눌러 가입이 완료되면 자동으로 로그인이 되면서 메인페이지로 넘어갈 것입니다. 회원가입을 한번 진행해보겠습니다.

(회원가입을 하니 자동으로 메인페이지로 넘어가진다.)

회원가입을 완료하니 메인페이지로 넘어와졌습니다. 헤더의 아바타를 보니 자동으로 로그인이 된 것 같네요. 아바타를 눌러보겠습니다.

(헤더의 아바타를 누른다)

아바타를 누르니 마이페이지, 로그아웃 할 수 있는 버튼이 생겼습니다. 마이페이지로 넘어가보겠습니다.

(마이페이지로 넘어간다)

방금 생성한 계정에 해당하는 페이지로 넘어와졌습니다. 이곳에서 유저의 닉네임, 가입할 때 기입한 문구를 수정할 수 있습니다. 처음에 문구를 입력하지 않아서 default 값이 들어있는 것을 확인할 수 있네요. 간단히 닉네임과 문구를 수정해보겠습니다.

(닉네임과 문구를 수정한다)

수정이 잘 된 것을 확인할 수 있습니다. 다시 메인페이지로 이동해보겠습니다. 헤더의 로고를 누르면 메인페이지로 이동할 수 있습니다.

(헤더의 로고를 누르니 메인페이지로 이동한다)

이제 “새 글 작성”을 눌러서 저도 책을 하나 공유해보겠습니다.

(”새 글 작성” 버튼을 누른다)

이 모달페이지에서 새 글을 작성할 수 있습니다. 모달 우측 상단의 “X 버튼”이나 “취소” 버튼을 누르면 글 작성을 취소할 수 있습니다. 한번 눌러볼까요?

(X 버튼을 누르니 confirm 이 뜬다)

유저가 잘 못 눌렀을 수도 있으니 한번 더 확인하고 있습니다. 취소를 누르고 다시 글을 작성해보겠습니다.

(취소를 누르고 다시 글을 작성한다)

(함께 자라기를 검색하고 리스트 몇 개를 눌러본다)

저는 “함께 자라기”라는 책을 공유해보고 싶습니다. 함께 자라기를 검색한 후 찾기 버튼을 누르면 키워드에 맞는 책들이 검색되고 그 중 하나를 선택할 수 있습니다.

(함께 자라기를 선택한다)

책을 선택하니 초록색으로 체크되었다는 표시로 바뀌었습니다. 새로운 글을 작성할 때는 모든 폼이 입력되어야 하기 때문에 폼이 비어있는 상태에서 “글 작성하기 버튼”을 누르면 (글 작성하기 버튼을 누른다 → 다시 확인을 누르면서) 작성이 되지 않습니다.

이어서 글을 작성해보겠습니다.

(장르 → 문구 → 내용을 입력한다)

모든 내용을 입력하니 모두 체크 표시로 바뀌었습니다. 이제 새로운 글을 작성해보겠습니다.

(글 작성 버튼 클릭 → 메인페이지로 이동한다)

성공적으로 글이 작성되었고 메인페이지에 추가되었습니다.

(추가된 게시물을 눌러본다)

이 곳에서 게시물을 읽고, 댓글을 달거나 북마크를 할 수도 있습니다. 다른 유저가 올린 게시물을 보러 가보겠습니다. 또 본인이 올린 게시물은 삭제할 수 있습니다. 이 게시물을 삭제하고 다른 게시물을 구경하러 가보겠습니다. (올린 게시물을 삭제한다)

(다른 게시물로 이동해서 북마크를 찍고 북마크가 업데이트 된 것을 보여준다)

여기는 아무 댓글이 없네요. 댓글이 있는 게시물을 찾아보겠습니다.

(모달을 닫고 “댓글이 있는” 다른 게시물로 이동해서 댓글을 달아본다)

본인이 올린 댓글이라면 삭제할 수 있습니다. (댓글을 하나 달아보고 달았던 댓글을 다시 삭제한다)

이 책이 마음에 드네요. 어떤 유저인지 궁금합니다. 유저 아바타를 누르면 유저 페이지로 이동할 수 있습니다. (유저 아바타를 눌러서 유저페이지로 이동한다)

이 유저에 대한 정보가 보입니다. 이 유저가 좋아요한 게시물, 작성한 게시물도 확인할 수 있네요. 북마크 하나 누르고 가겠습니다.

(로고를 눌러서 다시 메인페이지로 넘어와서)

다른 유저들도 한번 보고 싶기 때문에 헤더에서 유저 검색을 해보겠습니다. ‘김’으로 검색을 해볼까요?

(검색어를 계속 바꿔서 입력해본다) 디바운스가 적용되서 자동으로 검색이 되고 있습니다.

이 유저가 궁금하네요 (검색된 유저를 눌러서 유저페이지로 이동해본다)

이제 <러북> 창을 끄고, 다시 켜보도록 하겠습니다. 헤더를 보니 로그인이 여전히 유지된 것을 확인할 수 있습니다. (마이페이지로 갔다가 로그아웃을 누른다)

마지막으로 만약 유저가 의도적으로 올바르지 않은 페이지로 이동한다면 어떻게될까요?

(올바르지 않은 url을 입력하니 404페이지가 나온다)

올바르지 않은 페이지에 진입하니 404페이지가 나온 것을 확인할 수 있습니다.

(404페이지의 메인으로 이동하는 버튼을 누르며)

감사합니다. 이상으로 <러북> 시연을 마치겠습니다.

수경

시연 시나리오

그럼 시연 시작하겠습니다.

홈페이지에 들어오자마자 가장 먼저 보이는 화면은 다음과 같습니다.

“문구”를 보고 도서를 공유하자는 목적에 맞게 여러 문구를 보여주고 있습니다. 그리고 한 눈에 보이듯이 여러 게시물들이 보이는데요, 저는”주어진 행복에 만족하는 것은 위험하다” 라는 문구가 마음에 들어 이 게시물을 클릭해보겠습니다.

게시물에서는 실제 책의 문구, 책 표지, 제목, 게시물의 내용을 보여주고 있는데

게시물을 쓴 작성자와 취향이 비스산 것 같아 글을 쓴 사용자가 궁금해졌습니다.

태욱님은 『행동할 것인가, 인내할 것인가? 좌절은 이 두가지 방법을 통해 타개할 수 있다. - 괴테』와 같은 문구를 좋아하시는 군요!

또한, 태욱님은 (게시글 클릭하면서) 퇴사와 괴테라는 게시글을 작성하였고 (슬라이드 넘기며)다음과 같은 글들을 북마크 한 것을 볼 수 있습니다!

이 글이 마음에 들어 저장하고 싶어졌습니다.

아차! 제가 로그인을 안했네요! 로그인을 하지 않아도 이런 서비스들을 제공하고 있습니다.

하지만 더 많은 기능을 이용하기 위해 로그인 먼저 해보도록 하겠습니다.

로그인 후에 아까 마음에 들었던 게시물을 다시 북마크 해보겠습니다. 그리고 책을 추천해준 분께 감사인사를 댓글로 남겨보겠습니다. “좋은 책을 추천해주셔서 감사합니다!”

이제 저도 글을 한 번 올려보려고 합니다. 저희는 도서 API를 사용해서 실제 도서를 가져오도록 구현하였습니다.

저는 카카오 춘식이를 좋아하기 때문에 카카오를 검색해보겠습니다.

한국사 책이 있네요!!

선택을 하고 책의 장르, 문구, 내용을 임력해보겠습니다.

(미리 적어 놓은 문구 복사하기)

작성 버튼을 눌러 글을 작성해보겠습니다. 글을 작성을 하면 이제 가장 최근에 작성된 게시물로 화면에 보이게 됩니다.

제가 작성했기 때문에 삭제 버튼이 생기고 작성된 게시물을 확인할 수 있게 되었습니다.

아까 이 카카오는 역사 장르로 추가했기 때문에 역사 카테고리를 가보겠습니다.

역사 카테고리에 제대로 게시물이 보이는 것을 확인할 수 있습니다.

또한 역사 카테고리에서 “역사”라는 키워드로 다른 책의 문구로 검색해보겟습니다.

책+내용, 구절, 내용으로 검색해볼 수 있지만 저는 구절로 검색해보겠습니다.

그럼 역사라는 구절을 가진 책들으 보여주네요!!

아까 좋은 글을 작성했던 유저의 이름이 뭐였죠..? 김씨인 것은 기억이 나는데,,

한번 검색해보겠습니다. 김= > 김 노벨 들어가기

다음처럼 사용자를 검색해서 그 사용자의 프로필을 확인할 수 있씁니다.

저는 이제 새로운 아이디로 러북을 이용하고 싶어졌습니다.

로그아웃하고 새로 회원가입을 해보겠습니다.

(일부러 오타내어 문구를 넣기) 회원가입을 하면 자동으로 로그인되어 메인 페이지를 보여줍니다. 그리고 프로필을 가면 아까 회원가입 때 입력했던 문구를 볼 수 있습니다.

오머,, 여기 오타가 있넨요! 수정해보겠습니다.

이제 본격적으로 러북을 이용해 볼까요?

발표 대본 준비