1. 서비스 소개 (선정배경, 주제 )2. 주요 기능3. 기술 스택백엔드프론트엔드4. 시연 영상 (회원 전용 기능 먼저하고 비회원으로 넘어갈 것)(1) 메인페이지(2) 로그인 및 회원가입술장고 추천 페이지술장고 재료 추가 모달칵테일 상세 모달네이버 쇼핑 창리뷰작성모달즐겨찾기마이페이지테마별 추천 페이지검색봇 호버 , 클릭5. 팀원 소개 및 역할 소개이것으로
(1) “홈텐더님! 냉장고 재료부터 살펴볼까요?”
안녕하세요, 프로그래머스 웹 데브코스 1기 15조 알코미스트 팀의 Shake N Match 프로젝트, 발표 시작하겠습니다
(2) 발표의 목차를 간단히 설명하겠습니다. 프로젝트의 개요와 주요 기능 그리고 기술 스택과 프로그램 시연을 하고, 마지막으로 팀원 소개의 순서로 진행하겠습니다.
1. 서비스 소개 (선정배경, 주제 )
(3) 첫 번째 서비스 소개입니다.
(4) 평소에 칵테일 바에서 칵테일을 즐기는 27세 황상혁씨 (쉬고)
코로나 19로 인해 칵테일 바를 직접 방문하기가 부담스럽습니다.
집에서 보내는 시간이 늘어난 김에, 요즘 유행한다는 ‘집에서 칵테일 만들기’를 시도해보려 합니다.
그러다 쿠바 샌드위치를 만들고 남은 라임 주스와, 언젠가 선물 받은 화이트 럼이 있는 것을 떠올렸습니다. 이 재료들을 사용하여 만들 수 있는 칵테일이 분명히 있었던 것 같은데, 어떤 칵테일이었는지 기억이 잘 안 납니다.
(5) 그래서 인터넷을 뒤져본 결과,
Illegal이라는 칵테일을 찾았습니다. 정말 마음에 들어서 만들어 보려고 하니깐 레시피에 추가 재료 ‘팔레넘이’ 요구되는 것이었어요. 그래서 상혁씨는 재료를 구매하려 여러 쇼핑 사이트를 탐색합니다. 그러나 칵테일을 본격적으로 만들기도 전에 지쳐버린 상혁씨. 결국 모든 걸 포기하고 냉장고 한 켠에 있던 맥주 한 캔으로 아쉬운 마음을 대신합니다.
(6) 저희는 상혁님이 겪은 문제의 근본적인 원인이 재료 기반 칵테일 검색이 어렵고, 칵테일 재료 구매 경로가 파편화 되어있기 때문으로 분석했습니다.
(7) 그렇다면 내가 가지고 있는 재료로 칵테일을 검색할 수 있고, 필요한 재료 구매 정보를 함께 제공해주면 어떨까요? 이 문제에 대한 해답을 Shake N Match로 답하겠습니다.
2. 주요 기능
(8) 그렇다면 이제부터 Shake Natch 의 주요 기능을 살펴보도록 하겠습니다.
(9) 먼저 첫 번째, 재료기반 칵테일 검색 기능입니다. 사용자는 현재 보유하고 있는 재료로 만들 수 있는 칵테일을 제안받을 수 있습니다. 물론 본인의 재료는 수정이 가능합니다.
(10) 두 번째, 칵테일 상세 정보를 제공합니다. 이를 통해 제안받은 칵테일 클릭 시 사용자는 필요한 재료와 구체적인 조제법에 관한 정보를 확인할 수 있습니다.
(11) 세 번째, 칵테일의 즐겨찾기 기능이 가능합니다. 만약 칵테일이 마음에 들었다면, 즐겨찾기 버튼을 눌러 저장할 수도 있습니다.
(12) 네 번째, 네이버 쇼핑 API 연동을 통해 재료 구매 중개 서비스를 제공합니다. 그래서 레시피에서 부족한 재료의 구매하기 버튼을 클릭하면, 해당 재료를 구매할 수 있는 링크를 제공해 줍니다.
(13) 아직 이렇다할 재료가 없는 사용자들은 테마별 칵테일 추천 기능을 통해서 자신에게 맞는 칵테일을 추천받을 수 있습니다. 이는 비회원과 회원 모두 사용할 수 있습니다.
3. 기술 스택
백엔드
(14) 다음은 shakeNmatch에 대한 기술 스택입니다.
(15) 전체 프로젝트 환경은 다음과 같이 프론트와 백엔드의 대표적인 환경을 나열한 것으로 다음 슬라이드에서 자세하게 설명하도록 하겠습니다
(16) 원활한 프로젝트 협업을 위해 이슈 관리는 지라, 문서화는 노션, 소통을 위해서 개더타운과 슬랙을 이용했습니다.
(17) 백엔드는 개발에서는 Cocktail, Ingredient, Review, Theme, User 도메인을 나누어서 개발을 진행했습니다.
(18) Junit을 통해 단위 테스트 코드를 작성하면서 이번 프로젝트에서 TDD 개념을 간단하게 접목시켜봤습니다. 특히 given-when-then의 과정을 통해 좀더 명확한 인과관계를 테스트할 수 있었습니다.
코드로 보자면 given은 review1이라는 객체를 빌더를 통해 생성하는 상태, when은 review1 객체를 reviewRepository에 저장했을 때, 그리고 then은 앞서 생성한 review1 이라는 객체가 제대로 저장되었는지 mock으로 조회하는 단계입니다.
이런 TDD를 통해 재설계 및 디버깅 시간의 단축과 의존성이 낮은 모듈로 보다 객체지향적인 코드를 사용할 수 있었습니다.
(19) 다음은 데이터 수집을 위한 과정입니다. 첫번째는 IBA-WORLD.COM에서 가공되지 않은 raw 데이터를 수집합니다. 2번째로 각 칵테일과 재료, 단위, 레시피 별로 데이터를 DB에 적합한 데이터로 전처리합니다. 세번째, 가공한 데이터를 DB에 삽입하고 마지막으로 shakeNmatch의 서비스를 위한 데이터 세트를 구성합니다.
(20) 다음은 ShakeNmatch의 ERD이고,
(21) ERD를 바탕으로 실제 구성된 DB 테이블 구조입니다.
(22) CI/CD는 프론트의 경우 깃헙 액션과 VERCEL, 백엔드의 경우에도 동일하게 깃헙액션을 사용하지만 도커허브를 이용해서 EC2와 연동후 배포했습니다.
(23)다음은 사용자 요청 흐름도입니다. 간략하게 말해보자면 사용자는 각자의 PC에서 shakeNmatch 주소를 통해 웹 서비스에 접근해서 docker 환경의 db에 저장된 재료, 칵테일, 사진 등을 불러오고 이를 api 호출을 통해 프론트 영역에서 조회할 수 있게 됩니다. 다음 프론트엔드 기술에 대한 설명은 윤승록님이 이어서 하겠습니다. 감사합니다.
====== 여기까지 5분 30초 =========
프론트엔드
24)안녕하세요, 프론트엔드 기술 스택 설명과 서비스 시연을 맡은 윤승록입니다.
저희는 아토믹 디자인을 벤치마킹하였고, 적극적으로 Storybook을 활용하였습니다.
이를 통해 컴포넌트의 재사용성을 높일 수 있었고, 원활한 협업이 가능했습니다.
특히, 재사용성을 기준으로 Base/Compound/Domian/Page 네 분류의 컴포넌트를 설계하여 차례로 개발했습니다.
Top-down 이 아닌 바텀 탑 방식을 채택한 이유는 기획과 와이어 프레임 작성 단계에서 중복되는 기능과 화면 구성 요소들이 많아 바텀 탑 방식이 더 효율적이라 때문입니다.
25)저희는 스토리북을 활용하여 컴포넌트 관리를 진행했습니다. 이를 통해 다른 팀원들이 개발한 컴포넌트를 시각적으로, 기능적으로 쉽게 확인할 수 있었습니다.
26) 저희는 하나의 컴포넌트를 로직과 스타일드 컴포넌트와 타입을 분리하여 관리하였습니다. 이러한 컨벤션에 더해 저희는 타입스크립트를 도입하여 코드의 가독성과 정확성을 높여 보다 효율적인 개발을 할 수 있었습니다.
여러 페이지에서 하나의 유저 데이터를 공유하여 쓰고 있기 때문에, 컨텍스트 API를 통해 상태관리를 하였습니다.
4. 시연 영상 (회원 전용 기능 먼저하고 비회원으로 넘어갈 것)
그렇다면 이제 실제로 우리 Shake N Match 서비스를 한 번 이용해 보도록 할까요?
(Illegal ‘팔레넘이’)
(1) 메인페이지
사용자가 우리 Shake N Match 서비스에 최초로 접속을 하게 되면, 두 가지 진입점을 마주하게 됩니다.
좌측 진입점을 통해서는 테마별 칵테일 추천 페이지로 이동할 수 있고,
우측을 통해서는 재료 기반의 칵테일 검색 페이지로 이동할 수 있죠.
먼저 우리의 메인 서비스인 재료 기반 칵테일 검색 기능을 이용해 보도록 하겠습니다.
(2) 로그인 및 회원가입
그렇다면 회원 가입을 먼저 진행해야겠네요.
- 카카오톡 OAuth를 이용하여 사용자의 인증처리를 수행합니다.
- 인증이 완료되었다면, 우리 서비스에서 활용할 추가 데이터를 사용자로부터 입력 받는데요,
먼저 닉네임을 입력해 보도록 할게요. ‘상혁’ 닉네임 중복 체크도 해야겠죠?
(물줄기 인터랙션) 와, 이렇게 칵테일 잔이 차오르네요, 재미있는 소리도 나구요.(마우스 호버)
이어서 나머지 값들도 입력을 하도록 합니다.
- 닉네임 황상혁
- 성별 남자
- 나이 27
- MBTI INFP
술장고 추천 페이지
회원가입이 끝나고 술장고 페이지로 넘어왔습니다.
아직 가지고 있는 재료를 등록하지 않았기 때문에, 상혁님의 냉장고에 있던 재료를 등록해보겠습니다.
- 화이트 럼과
- 라임주스를
술장고에 추가해 보도록 하겠습니다.
술장고 재료 추가 모달
(화이트 럼과 라임주스 추가)
재료를 추가하고 나니 이렇게 화이트럼, 라임주스를 재료로 하는 다양한 칵테일들을 확인할 수 있네요. 아까 상혁님께서 힘들게 검색한 Illegal 도 포함되어 있군요.
그렇다면 결과 목록에서 하나를 클릭해 보도록 하죠. 저는 Illegal 을 클릭하겠습니다.
칵테일 상세 모달
클릭 후에는 칵테일 만드는데 필요한 재료들과 만드는 방법을 확인할 수 있는 팝업창이 나타납니다.
역시 팔레넘이 부족하군요. 저희는 네이버 쇼핑 API를 활용하여, 재료 구매 정보까지 함께 제공하고 있습니다. 그렇다면 팔레넘을 구매해볼까요?
네이버 쇼핑 창
이렇게 최저가 순으로 네이버 쇼핑에 등록되어 있는 팔레넘 판매정보가 나타나게됩니다. 그 중 하나를 클릭해 보도록 하죠.
그랬더니 오우야 바로 구매할 수가 있네요.
이제 상혁님은 가지고 있는 재료로 어떤 칵테일을 만들 수 있을지 발품을 팔지 않아도 되고,
또 부족한 재료를 어떻게 구매할지 걱정하지 않아도 되겠습니다.
리뷰작성모달
우리 서비스를 통해 Illegal을 성공적으로 만들게 된 상혁님은 리뷰탭에서 리뷰도 작성할 수 있어요.
리뷰에는 상혁님이 직접 찍은 칵테일 사진을 업로드 할 수 있고, 레시피에 대한 별점과 짧은 코멘트를 작성할 수 있습니다.
- 사진
- 별점 5
- 코멘트: 정말 만족스러운 한 잔 이었습니다!
한 번 작성 버튼을 눌러볼게요.
즐겨찾기
Illegal 말고도 다른 칵테일들이 눈에 들어오는 상혁님은 다른 칵테일을 나중에 도전해 보기 위해 즐겨찾기 버튼을 누릅니다.
이렇게 즐겨찾기된 칵테일은 마이페이지에서 확인이 가능하죠. 물론 즐겨찾기 해제도 가능합니다.
마이페이지
마이페이지에서는 회원가입시에 입력했던 사용자 정보를 수정할 수 있습니다.
이렇게 회원만이 이용할 수 있는 술장고 기반 검색이 마무리가 되었네요.
그렇다면 사용자의 냉장고에 칵테일 재료가 하나도 없다면 어떻게 할까요?
바로 테마별 추천 기능을 이용하면 됩니다
테마별 추천 페이지
- 테마별 칵테일 추천 페이지에서 사용자는,기분, 날씨, 선호 색상, 음악 장르, MBTI 관련 카드를 마우스 클릭, 또는 마우스 스크롤을 통해 변경하여 취향에 맞는 카드를 선택할 수 있습니다.
- 한 번 로맨틱한 분위기에 맞는 칵테일을 한 잔 추천받아 보도록 하겠습니다.
- 칵테일을 처음 접하는 사용자도 우리 서비스를 통해 집에서 칵테일을 만드는 홈텐딩에 도전해 볼 수 있겠네요.
검색봇 호버 , 클릭
마지막으로 우리에게 끊임없이 말을 걸고 있는 유쾌한 미중년 바텐더에게 관심을 주도록 해보죠
사실
한 번 원하는 칵테일 이름을 입력해 보도록 하죠.
Espresso Martini 한 잔 부탁드려보도록 하죠.
이렇게 검색도 잘 되는 모습을 확인할 수 잇습니다.
이제 로그아웃을 해서 서비스 시연을 마치도록 하겠습니다.
마지막으로 오늘까지 쉬지 않고 달려온 팀원들을 잠시 소개하겠습니다.
5. 팀원 소개 및 역할 소개
저희 alchomist 팀은 총 7명으로 프론트 팀 4명, 백엔드 팀 3명으로 구성되어 있습니다.
모두가 한 마음 한 뜻으로 업무를 분담하여 진행하였기에, 정말 의미 있는 경험이었습니다.
이것으로
15조 Team Alchomist 의 발표를 마치도록 하겠습니다.
저희 Shake N Match 가 앞으로도 여러분들의 냉장고와 함께할게요. 메리 크리스마스!