1. 프로덕트 선정 : 북적북적
오늘 분석해볼 프로덕트는 북적북적입니다. Book 적(積, 쌓을 적) 이라는 의미가 아닐까 싶은데요, 완독한 도서를 귀여운 캐릭터를 활용해 한 눈에 볼 수 있는 뽀짝한 서비스입니다. 북적북적을 활용해 한 달 간 얼마나 많은 책을 읽었는지 기록할 수 있고, 독서가 진행중인 책을 추가해 독서 진행 정도를 파악할 수도 있습니다. 읽고싶은 책을 미리 추가해 둘 수도 있어요.
처음 북적북적을 사용했을 때는 별다른 수익모델이 없었는데, 오랜만에 들어가 살펴보니 캐릭터를 구매할 수 있는 스토어가 생겼더라구요..? 역시 귀여운 건 지갑을 엽니다.. 얼른 책을 읽어서 무료 캐릭터를 다 얻은 다음 유료 캐릭터를 구매해봐야겠습니다.
2. 북적북적의 주요 기능과 플로우차트
북적북적의 주요 기능은 아래와 같습니다.
- 도서 검색 기능
- 도서 검색 후 완독 / 읽는 중 / 읽고 싶은 책 표시 기능
- 지금까지의 독서 목록을 이미지로 확인할 수 있는 기능
고객이 로그인 한 후 북적북적에 책을 추가하는 과정을 아래 플로우차트로 나타내 보았는데요, 이미지가 크기 때문에 클릭해서 보는 것을 추천드립니다. 모든 고객은 공통적으로 로그인 한 후 검색창을 이용해 책을 검색하고, 결과 목록에 찾는 책이 있는 경우 해당 책을 읽었는지 / 읽는 중인지 / 읽을 것인지 선택하게 됩니다.
- 완독한 경우 다 독서 기간과 평점을 입력한 후 책을 저장합니다.
- 읽는 중인 경우 독서량(페이지 수)과 독서 시작일을 기입한 후 책을 저장합니다.
- 읽고 싶은 경우 기대지수와 기대평을 기입하고 책을 저장합니다.
만약 책 제목으로 검색했을 때 목록에서 찾는 도서를 발견하지 못하는 경우, 사용자가 직접 책의 이미지와 제목, 지은이, 출판사, 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를 살펴보면 아래와 같습니다.
- 요청 쿼리를 받은 알라딘 서버는 '일본어'라는 요청 쿼리에 대한 결과로 '일본어' 검색 결과에 해당하는 (도서 목록) 데이터를 보내줍니다. (응답)
- 해당 데이터를 파싱(parsing)해 화면에 출력합니다.
- 해당 페이지에서 원하는 도서를 선택하면(요청), 또 해당 도서에 해당하는 정보를 보내줍니다(응답) 북적북적은 API를 커스텀해 알라딘 서버에서 응답으로 보내줄 수 있는 책의 상세 내용 중, 북적북적 서비스에 노출시키고 싶은 항목만 받아 화면에 노출시킵니다.
직접 알라딘 API의 예제를 살펴보며 위의 과정을 하나씩 짚어봅시다.
1. '일본어'라는 단어를 입력 후 검색 버튼을 클릭하면 검색어가 parameter가 되어 서버에 검색요청(request)을 보냅니다.
알라딘 API의 요청 URL예시를 살펴보면 아래와 같습니다.
ttbkey=[TTBkey]
&Query=aladdin&QueryType=Title&MaxResults=10&start=1&SearchTarget=Book&output=xml&Version=20131101
각 변수가 뜻하는 바는 아래와 같습니다.
- ttbkey : 알라딘 API를 사용하기 위해 발급받아야 하는 key
- Query : 검색어
- QueryType : Keyword/Title/Author/Publisher 중 선택 가능(검색어의 속성)
- MaxResults : 검색 결과 한 페이지 당 최대 출력 개수
- start : 검색 결과의 시작 페이지
- SearchTarget : 검색 대상 사이트(도서 : Book, 외서 : Foreign, 음반: Music, DVD : DVD, 중고샵 : Used, 전자책 : eBook, 통합 : All)
- output : 응답 결과를 받는 방식(xml, js)
- Version : 최신 버전
만약 일본어라는 검색어를 입력한 후 검색 버튼을 누른다면, 아래와 같은 요청이 서버로 발송되겠죠. 북적북적에서는 검색결과를 무한스크롤로 노출시키기 때문에 MaxResults 값은 개발자 마음대로 설정해 주어도 좋을 것 같습니다.
ttbkey=[TTBkey]
&Query=일본어&QueryType=Title&MaxResults=10&start=1&SearchTarget=Book&output=xml(혹은 js)&Version=최신버전
'일본어'의 도서명 검색결과를 받고싶다는 요청을 받았다면, 서버는 위의 요청에 해당하는 데이터를 응답값으로 돌려줍니다. 알라딘 API 문서에는 예시 응답(Response)결과도 함께 나와 있는데요, 이것을 함께 살펴봅시다.
코드를 해석하기 위해 API 문서에서 응답 페이지(xml)의 태그명들을 살펴보면 아래와 같습니다.
1. version : API의 버전
2. title : API 결과의 제목
3. link : API 결과와 연관된 URL
4. pubDate : 결과 페이지 출력일
5. totalResults : 총 검색 결과 수
6. startIndex : Page 수
7. itemsPerPage : 한 페이지에 출력될 상품 수
8. query : API로 조회한 쿼리(검색어)
9. searchCategoryId : 분야로 조회한 경우 해당 분야의 ID
10 : searchCategoryName : 분야로 조회한 경우 해당 분야의 분야명
즉, 위의 코드에서는 기술된 태그명에 해당하는 정보들을 파악할 수 있습니다. 해당 코드를 이어 살펴보면, 아래와 같이 도서목록의 정보를 파악할 수 있습니다.
목록을 하나하나 세어보지 않아도, 처음 보았던 코드를 통해 총 '202건의 책이 있겠구나'라고 짐작해볼 수 있습니다.
왼쪽의 북적북적 검색화면, 오른쪽의 알라딘 검색화면에서 출력되는 결과가 같음을 확인할 수 있습니다. 정리하자면, 북적북적은 알라딘의 도서 검색 API를 활용해 '일본어'라는 검색어를 파라미터로 요청(Request)을 보냈고, 검색되는 결과값인 도서 목록들을 응답(Response)으로 받아왔고, 해당 결과값을 parsing해 보여주고 싶은 정보만 왼쪽과 같은 리스트 형태로 출력한 것입니다.
이후 프로세스는 어떨까요?
사용자는 이제 이 책을 얼마나 읽었는지, 평은 어땠는지에 대한 정보를 입력하고, 저장합니다. 이 때 책의 정보와 사용자가 추가한 정보는 알라딘 DB가 아닌 북적북적 서버 DB에 저장됩니다. (알라딘 DB에 저장되면 큰일나겠죠...? 애초에 삽입/수정 권한이 없긴 하겠지만요) 마찬가지로 추가 정보 입력에서 저장 버튼을 누르면, 화면에 표현되어 있지는 않지만 책의 정보와 추가로 입력한 이 정보를 사용자 ID에 해당하는 공간에 삽입해줘! 라는 명령이 전달됩니다.
사용자별로 책을 얼마나 읽었는지 저장해야 하니까, 기준은 사용자 고유 ID가 됩니다. 사용자 ID별로 책장을 하나씩 부여받고, 알라딘에서 검색해서 찾은 책을 그곳에 하나씩 꽂는다고 생각하면 될까요? 이렇게 사용자의 책장에 완독한 도서를 저장하는 프로세스가 완료되었다면, 서버 DB에 저장된 이 정보를 화면에 출력합니다. 캐릭터가 책 위에 앉아있는 모양으로요..!
* 검색했을 때 책을 찾을 수 없는 경우는 어떨까요?
위의 검색 결과 화면 하단에 '직접 책 추가하기' 버튼을 누르면 사용자가 직접 이미지와 저자, 출판사 등의 정보를 추가할 수 있는데 이는 북적북적의 DB에 저장됩니다. 알라딘에서 책을 찾아 내 책장에 꽂을 수 없어서, 내가 직접 만들어 꽂은 것이니까요. 직접 만든 걸 알라딘 매장에 냅다 꽂는다면 그건 좀 이상하겠죠..?
마치며..
오랜만에 개발 요소를 뜯어보며 즐거운 시간을 보냈습니다.. PM이 되면 직접 개발을 할 일은 없을테지만 데이터베이스에서 어떤 데이터가 필요한지, 왜 그 데이터가 필요한지 설득해야 하고, 시작하면 낙장불입인 자체 DB스키마를 설계하는 데 막중한 책임을 진다는 측면에서 개발자분들과는 다른 고통을 느끼게 될 것 같습니다... 역시 세상에 쉬운 일은 없는 것 같아요.. 🥲 세상 모든 PM분들과 개발자분들 디자이너분들 존경합니다..!
'Product Manager > 코드스테이츠 PMB14' 카테고리의 다른 글
| PM은 어떤 이해관계자들과 커뮤니케이션 할까? (1) | 2022.10.18 |
|---|---|
| 스프린트 실행 과정에서 PO/PM의 역할은 무엇일까? (1) | 2022.10.18 |
| 알라딘 도서 검색 API의 활용사례(feat. 북적북적) (0) | 2022.10.11 |
| 비즈니스에 따라 적합한 앱 유형은 무엇일까?(feat. 네이티브, 하이브리드, 모바일 웹, 웹앱) (0) | 2022.10.07 |
| 랜딩페이지의 뼈와 살을 분류해보자(feat. html, css, js, react) (0) | 2022.10.06 |
