본문 바로가기
Product Manager/코드스테이츠 PMB14

북적북적의 프론트엔드, 백엔드, DB를 살펴보자

by 임다영임다 2022. 9. 28.

6주차의 아침이 밝았습니다..! 이번 주차 부터는 PM에게 필요한 데이터 활용 능력과 개발 지식에 대해 학습하는데요, 첫 날이니만큼 DB가 뭔지, RDBMS와 NoSQL은 뭔지, PM이 왜 데이터를 다뤄야 하는지에 대해 배웠습니다. 결론부터 말씀드리자면 PM이 데이터를 보아야 하는 이유는 때는 '왜?' 라는 질문, 혹은 뾰족한 가설을 확인하고 검증하기 위해서입니다. 데이터 역시 하나의 검증 수단일 뿐 좋은 문제를 찾는 것이 중요하다는 뜻이죠..! 기초 개념을 학습하기에 앞서 PM의 마인드셋에 대해 설명해주신 건, '너무 언어나 툴에 집착하지 말고, 왜 PM에게 데이터가 필요한지에 대해 알고, 그 맥락에서 어느 정도 활용하면 좋을지에 대해 생각해보아라'는 의미였던 것 같습니다. 

 

오늘은 관심 있는 프로덕트를 하나 뽑아 해당 프로덕트에서 고객의 행동을 플로우차트로 표현하고, 고객이 행동할 때 UI, 클라이언트, 서버, DB가 각각 어떻게 보이고 작동할지 예상해보는 과제를 작성해 보고자 합니다. 문제를 정의하고 가설을 세우고 전략을 추측했던 지금까지의 과제와는 다르게 다소 명확하게 답이 떨어지는 과제라 마음이 설렙니다.. 

 

 

 

 

1. 프로덕트 선정 : 북적북적

 

 

오늘 분석해볼 프로덕트는 북적북적입니다. Book 적(, 쌓을 적) 이라는 의미가 아닐까 싶은데요, 완독한 도서를 귀여운 캐릭터를 활용해 한 눈에 볼 수 있는 뽀짝한 서비스입니다. 북적북적을 활용해 한 달 간 얼마나 많은 책을 읽었는지 기록할 수 있고, 독서가 진행중인 책을 추가해 독서 진행 정도를 파악할 수도 있습니다. 읽고싶은 책을 미리 추가해 둘 수도 있어요.

 

처음 북적북적을 사용했을 때는 별다른 수익모델이 없었는데, 오랜만에 들어가 살펴보니 캐릭터를 구매할 수 있는 스토어가 생겼더라구요..? 역시 귀여운 건 지갑을 엽니다.. 얼른 책을 읽어서 무료 캐릭터를 다 얻은 다음 유료 캐릭터를 구매해봐야겠습니다. 

 

 

 

좌. 북적북적 메인, 우. 북적북적 캐릭터스토어

 

 


 

2. 북적북적의 주요 기능과 플로우차트

 

북적북적의 주요 기능은 아래와 같습니다. 

 

  1. 도서 검색 기능
  2. 도서 검색 후 완독 / 읽는 중 / 읽고 싶은 책 표시 기능
  3. 지금까지의 독서 목록을 이미지로 확인할 수 있는 기능

 

고객이 로그인 한 후 북적북적에 책을 추가하는 과정을 아래 플로우차트로 나타내 보았는데요, 이미지가 크기 때문에 클릭해서 보는 것을 추천드립니다. 모든 고객은 공통적으로 로그인 한 후 검색창을 이용해 책을 검색하고, 결과 목록에 찾는 책이 있는 경우 해당 책을 읽었는지 / 읽는 중인지 / 읽을 것인지 선택하게 됩니다. 

 

  • 완독한 경우 다 독서 기간과 평점을 입력한 후 책을 저장합니다.
  • 읽는 중인 경우 독서량(페이지 수)과 독서 시작일을 기입한 후 책을 저장합니다.
  • 읽고 싶은 경우 기대지수와 기대평을 기입하고 책을 저장합니다. 

 

만약 책 제목으로 검색했을 때 목록에서 찾는 도서를 발견하지 못하는 경우, 사용자가 직접 책의 이미지와 제목, 지은이, 출판사, ISBN, 페이지 수와 같은 정보를 등록합니다. 

 

위와 같은 과정을 통해 저장된 책은 북적북적의 메인에서 귀여운 캐릭터가 쌓인 책 위에 앉아있는 형태로 출력됩니다. 메인에서는 캐릭터가 깔고 앉은 책에서 제목을 확인할 수 있고, 서재라는 별도의 메뉴에서 책을 검색한 후 추가했던 정보(독서 기간, 평점, 페이지 수, 등등)를 함께 볼 수 있습니다. 

 

 

 

 


 

3. 북적북적의 서버, DB, API 구조

 

북적북적 서비스의 간략한 동작 구조

 

 

북적북적 서비스를 구성하는 것은

 

  • 북적북적 이용자의 정보가 담기는 북적북적 서버 DB
  • 알라딘 도서 검색 API, (도서 정보를 담고 있는 알라딘 도서DB)
  • 그리고 데이터 연결이 끊어져도 저장 목록을 볼 수 있도록 하는 북적북적의 로컬DB입니다. 

 

사용자가 북적북적에 가입해 로그인을 하게 되면, 고유 ID가 생성됩니다. 고유 ID는 북적북적 서버 DB에 저장되겠죠. 이후 사용자가 완독한 책을 추가하기 위해 도서명을 검색하면, 입력한 도서명이 요청 쿼리가 되고 해당 도서를 검색했을 때의 결과 페이지가 응답 결과가 됩니다. 이 과정에 해당하는 것은 북적북적에서 직접 구현한 것이 아니라 '도서를 검색하고 검색 도서 목록을 출력하는 프로세스'를 알라딘 API를 이용해 앱에 맞게 커스터마이징 한 것입니다. 간단히 설명하자면 북적북적 앱 내에서 도서명을 검색해서 출력되는 결과 페이지와, 알라딘 사이트에서 도서명을 검색했을 때 출력되는 결과 페이지가 같습니다. 같은 걸 끌어다 쓴 것이니까요..! 북적북적 앱 내에서 보이는 모양만 다르게 편집했을 뿐입니다. 

 

이렇게 알라딘 API를 이용해 도서를 검색하고, 목록 중 찾는 도서를 선택했다면 읽었는지, 읽을 것인지, 읽는 중인지에 따라 각각에 해당하는 추가 정보를 기입하게 됩니다. 추가 정보를 기입하게 되면, 알라딘 API를 통해 끌어온 도서 정보 중 북적북적에서 노출시킬 정보(제목, 저자, 상세 내용 등)와 사용자가 추가한 정보(읽는 중인지 읽을건지 읽었다면 얼마나 읽었고 등등..)를 북적북적 서버 DB에 저장하게 됩니다. 각 사용자마다 고유 ID를 부여했으니, 해당 ID를 기준으로 저장하면 되겠지요!

 

그리고 이렇게 서버에 저장된 책 목록은, 로컬 DB에 저장됩니다. 로컬DB란 간단히 말해서 데이터나 와이파이 연결 없이도 앱을 켰을 때 휴대폰 자체의 저장소를 DB로 사용하는 것입니다. 사용자가 데이터를 끄더라도, 북적북적에 저장된 도서 목록은 확인할 수 있습니다. 그렇다면 로컬DB에서 도서를 삭제하고 이후에 네트워크에 연결하면 연동이 되게 구현했나? 하고 시도해봤는데, 삭제는 로컬DB에서 불가능한 것으로 보아 별도로 서버 DB와 로컬 DB를 연동해 업데이트 하는 것이 아니라 서버 DB의 정보를 로컬DB로 내려받는 용도인 것 같습니다. 삽입은 당연히 네트워크를 연결하지 않고는 불가능합니다..! 알라딘에서 책을 검색하는 것을 인터넷 연결 없이 할 수 있나? 생각해 보면 됩니다.

 


 

4. 플로우별 UI로 알아보는 Request/Response 쿼리, 데이터의 흐름

 

읽은 도서 검색 후 서재에 추가하는 프로세스

*참고 : 알라딘 도서검색 Open API readme 링크

 

위에서 설명한 프로세스를 조금 더 알기 쉽게 전달하기 위해 실제 UI 화면을 가져왔습니다. 사용자가 메인 화면에서 완독한 책을 검색하기 위해 검색창을 클릭해 '일본어'를 입력하고 검색 버튼을 누르면, 알라딘 검색 API에 해당하는 프로세스가 시작됩니다. 이를 조금 더 상세하게 살펴보면,

 

  • 화면에는 보이지 않지만, 화면 뒤에는 '검색 버튼이라는 UI가 클릭되었을 때 검색어에 해당하는 단어를 요청 쿼리로 보내라'는 명령이 있습니다. 
  • 이에 사용자가 검색을 클릭하면 검색어인 '일본어'가 요청 쿼리가 됩니다.
  • 요청 쿼리를 받은 알라딘 서버는 '일본어'라는 요청 쿼리에 대한 결과로 '일본어' 검색 결과에 해당하는 (도서 목록) 페이지를 보내줍니다. (응답)
  • 해당 페이지에서 원하는 도서를 선택하면(요청), 또 해당 도서에 해당하는 정보를 보내줍니다(응답) 북적북적은 API를 커스텀해 알라딘 서버에서 응답으로 보내줄 수 있는 책의 상세 내용 중, 북적북적 서비스에 노출시키고 싶은 항목만 받아 화면에 노출시킵니다.

사용자는 이제 이 책을 얼마나 읽었는지, 평은 어땠는지에 대한 정보를 입력하고, 저장합니다. 이 때 책의 정보와 사용자가 추가한 정보는 알라딘 DB가 아닌 북적북적 서버 DB에 저장됩니다. (알라딘 DB에 저장되면 큰일나겠죠...? 애초에 삽입/수정 권한이 없긴 하겠지만요) 마찬가지로 추가 정보 입력에서 저장 버튼을 누르면, 화면에 표현되어 있지는 않지만 책의 정보와 추가로 입력한 이 정보를 사용자 ID에 해당하는 공간에 삽입해줘! 라는 명령이 전달됩니다. 

 

사용자별로 책을 얼마나 읽었는지 저장해야 하니까, 기준은 사용자 고유 ID가 됩니다. 사용자 ID별로 책장을 하나씩 부여받고, 알라딘에서 검색해서 찾은 책을 그곳에 하나씩 꽂는다고 생각하면 될까요? 이렇게 사용자의 책장에 완독한 도서를 저장하는 프로세스가 완료되었다면, 서버 DB에 저장된 이 정보를 화면에 출력합니다. 캐릭터가 책 위에 앉아있는 모양으로요..! 

 

* 검색했을 때 책을 찾을 수 없는 경우는 어떨까요?

위의 검색 결과 화면 하단에 '직접 책 추가하기' 버튼을 누르면 사용자가 직접 이미지와 저자, 출판사 등의 정보를 추가할 수 있는데 이는 북적북적의 DB에 저장됩니다. 알라딘에서 책을 찾아 내 책장에 꽂을 수 없어서, 내가 직접 만들어 꽂은 것이니까요. 직접 만든 걸 알라딘 매장에 냅다 꽂는다면 그건 좀 이상하겠죠..?

 

 

 

 


 

마치며..

 

오랜만에 개발 요소를 뜯어보며 즐거운 시간을 보냈습니다.. PM이 되면 직접 개발을 할 일은 없을테지만 데이터베이스에서 어떤 데이터가 필요한지, 왜 그 데이터가 필요한지 설득해야 하고, 시작하면 낙장불입인 자체 DB스키마를 설계하는 데 막중한 책임을 진다는 측면에서 개발자분들과는 다른 고통을 느끼게 될 것 같습니다... 역시 세상에 쉬운 일은 없는 것 같아요.. 🥲 세상 모든 PM분들과 개발자분들 디자이너분들 존경합니다..!