게임하는 변호사

[코드스테이츠 PMB 6기] 멀티프로필 개선하기

리코리코 — Wed, 16 Jun 2021 16:32:04 +0900

1. 멀티프로필의 화면설계서

2. 멀티프로필 개선안

유저 스토리 : 멀티프로필 사용을 원하는 사용자로서, 개인프로필은 가까운 소수의 사람에게만 보여주고 그 외의 모든 사람에 대해서는 멀티프로필만을 보여주기 위하여, 멀티프로필을 보여줄 친구를 선택할 때 개인프로필을 보여줄 사람을 제외하는 방식으로 선택하고 싶다.

배경 : 알다시피, 카카오톡 프로필은 그 사람의 전화번호나 카카오톡 아이디만 알 수 있으면 누구나 볼 수 있다(심지어 그 사람을 모르는 사람도). 개인프로필을 보여주고 싶지 않은 사람에게 멀티프로필이 보이도록 설정해도, 혹시나 그 사람이 지인의 핸드폰을 통해서 나의 개인프로필을 볼 수 있다.

나의 사적인 콘텐츠가 담긴 개인프로필은 나와 친하고 가까운 소수의 사람에게만 보여주고, 멀티프로필을 그 외의 모든 사람에게 보여주고 싶을 수 있다. 그러나 현재 카카오톡 멀티프로필은 멀티프로필을 보여줄 사람을 지정해야 한다.

물론, 공개용 콘텐츠를 개인프로필에 설정하고, 가까운 사람에게만 보여주고 싶은 콘텐츠를 멀티프로필에 설정하는 방법으로 우회할 수 있으나... 멀티프로필 출시 당시 멀티프로필 홍보기사를 보고 기능을 사용해본 사람들은 기억할 것이다. 카카오톡이 어떠한 방식으로 멀티프로필을 홍보하였는지를. 카카오톡은 회사 사람에게 보여줄 프로필을 멀티프로필로 설정하라는 식으로 홍보한 것으로 기억한다.

[코드스테이츠 PMB 6기] 오픈 API를 활용한 서비스 기획하기

리코리코 — Mon, 14 Jun 2021 16:35:05 +0900

문제 정의

광고주로서 요즘 인기있는 인플루언서의 영향력 추이를 쉽게 확인하여 인기가 빠르게 증가하고 있는 인플루언서에게 광고발주를 하고 싶다.

솔루션 정의

내가 팔로우하고 있는 인플루언서의

- 유튜브 영상별 조회수 추이 그래프

- 인스타그램 게시물별 좋아요, 댓글 추이 그래프를

한 화면에서 확인할 수 있다.

API 활용 방안

구글의 YouTube Reporting API를 통하여 영상별 Video reports의 시계열을 수집한다.

인스타그램의 Graph API를 통하여 게시물별 좋아요수와 댓글수를 시계열로 수집한다.

비즈니스모델

광고주에게 정기구독형태로 정보를 열람할 수 있는 라이선스를 제공하거나, 단건으로 요청하는 정보를 가공하여 제공한다.

기대 효과

인플루언서의 가장 최신의 바이럴 효과를

[코드스테이츠 PMB 6기] 트렌비

리코리코 — Wed, 9 Jun 2021 21:18:18 +0900

트렌비의 MVP

트렌봇. 명품에 관하여 전 세계 셀러의 세일가와 최저가를 검색할 수 있고, 국내에서 물건을 구입하듯이 명품을 최저가로 구입할 수 있는 것이 핵심기능이었다.

앱을 만든 이유

모바일로 확대된 쇼핑몰 구매고객 : 10대, 20대와 같이 웹보다는 모바일에 친숙한 연령대가 구매력이 생겼고, 30대도 모바일로 쇼핑을 하는 비율이 늘어났다.

앱의 마케팅 효율 : 앱이 고객을 모으고 마케팅 효과를 측정하는데 편리하다.

기술 스택 추정

프론트 : 리액트

백엔드 : 자바

DB : MySQL

서버 : AWS

크롤링봇 : C#

조직 추정

○ 사업개발

○ 인사

기존 사업부

○ 서비스 운영

- 물류

○ CS

○ 마케팅

○ 개발

- 프론트

- 백엔드

- 서버

○ 디자인

(중고) 리세일 사업부

○ 감정

○ 포토

○ 개발

○ 디자인

○ 마케팅

○ MD

○ 운영

과연, 개발 스택이 중요한가

중요하지만 매몰되어서는 안 된다.

[코드스테이츠 PMB 6기] 네이티브앱, 모바일 웹, 웹앱과 하이브리드 앱

리코리코 — Wed, 9 Jun 2021 20:32:21 +0900

네이티브 앱

우리가 흔히 애플 스토어, 구글 플레이에서 설치하는 어플리케이션. iOS, Android 같은 특정 플랫폼의 개발언어(네이티브 언어)로 개발된 앱이다.

장점 : 모바일 기기의 하드웨어 사용에 최적화되어 있어 성능이 다른 방식의 앱에 비하여 가장 높다. 플랫폼 API 사용이 편하다.

단점 : 운영체제 별로 제작되어야 한다.

모바일 웹

웹을 모바일 기기의 화면 구성에 맞게 변경한 것.

장점 : 일반적인 웹 기술로 개발이 가능하다.

단점 : 네이티브 앱에 비하여 성능이 느리다.

웹앱

앱처럼 동작하도록 제작된 웹.

장점 : 웹 기술로 개발이 가능하다.

단점 : 모바일 웹과 동일

하이브리드 앱

네이티브 앱처럼 네이티브 언어로 작성된 어플리케이션이지만 어플리케이션 내 일부나 모든 화면이 웹인 어플리케이션.

장점 : 성능이 좋고 플랫폼 API를 사용할 수 있다는 네이티브 앱의 장점과 웹 기술로 빠르게 개발이 가능하다는 웹의 장점이 합쳐져 있다.

단점 : 개발이 복잡하다. 네이티브 앱도 아닌 웹도 아닌 어정쩌함

[코드스테이츠 PMB 6기] Figma로 UX/UI 개선하기

리코리코 — Mon, 7 Jun 2021 17:40:51 +0900

POSTYPE(https://www.postype.com/)

창작자는 콘텐츠를 올리고 콘텐츠 소비자는 자신이 좋아하는 창작자의 콘텐츠를 한 곳에서 모아볼 수 있는 앱/웹 플랫폼 서비스이다. 창작자는 콘텐츠 소비자에게 정구 구독형 멤버십을 판매할 수도 있고, 개별 콘텐츠를 판매할 수도 있다. 콘텐츠 카테고리는 만화, 소설, 지식/정보, 팬창작, 일러스트레이션, 포토그래피, 에세이, 시로 구분되어 있는데, 영상과 게임과 같이 동적인 콘텐츠를 제외한 텍스트, 이미지 파일 같이 정적인 콘텐츠를 올릴 수 있다.

POSTYPE 태스크 : 콘텐츠 소비자가 자신이 구독하는 창작자의 신작 리스트를 한 화면에서 볼 수 있다.

콘텐츠 소비자는 자신이 좋아하는 창작자의 최신 콘텐츠를 한 곳에서 모아볼 수 없는 문제가 있다.

콘텐츠 소비자가 자신이 좋아하는 창작자의 최신 콘텐츠를 보기 위해서는, 1) 콘텐츠가 분산되어 있는 여러 플랫폼에 찾아가서, 2) 플랫폼에서도 작가별, 작품별로 구분되어 있는 콘텐츠를 개별적으로 찾아서 보아야 했다. 포스타입은 이 문제를 해결하고 싶은 듯 하다.

Lo-Fi : 핵심 기능과 Flow

화면 #1 : 구독한 창작자들의 콘텐츠 리스트가 최신순으로 보인다.

화면 #2 : 특정 콘텐츠를 클릭하면 상세 페이지로 이동한다.

- 상세 페이지 헤더에는 대표 썸네일, 창작자 이름, 창작일, 좋아요 수, 조회 수가 표시된다.

- 개별 판매 중인 콘텐츠의 경우 CTA 버튼이 있다. CTA버튼을 클릭하는 경우, 잔여 코인이 있으면 전체 콘텐츠가 보이고, 잔여 코인이 없으면 코인 충전 팝업이 뜬다.

Mid-Fi : 디자인


POSTYPE의 디자인	나의 디자인

가장 큰 차이점은 로그인 후 첫 화면이다.

POSTYPE은 구독한 창작자가 있는 사용자의 경우에도 로그인 후 화면이 랜딩 페이지이다(아래 탭바 왼쪽 첫번째 홈 아이콘). 내가 구독한 창작자들의 창작물만 모아서 보려면 탭바 가운데 아이콘을 한번 클릭해야 한다.

나는 구독한 창작자가 있는 사용자의 경우 첫 화면이 내가 구독하는 창작자의 최신 창작물이라고 생각하여 로그인 후 첫 화면을 구독 페이지로 변경했다.

탭바에서 구독 아이콘 모양과 위치 변경

그리고 탭바에서 구독 탭 아이콘의 모양을 리본으로, 위치를 왼쪽 첫번째로 변경했다.

POSTYPE은 구독탭에 서랍 모양의 아이콘, 저장소 탭에 리본 모양의 아이콘을 사용했는데, 개인적으로 바로 이해가 되지 않았고 최근에 아이콘 사용 트렌드와도 맞지 않는 것 같았기 때문이다.

[코드스테이츠 PMB 6기] 삼성페이 Before & After(라고 쓰고 Before라고 읽는다)

리코리코 — Wed, 2 Jun 2021 21:01:53 +0900

1. 사용자가 갖고 있던 나쁜 UX를 개선한 좋은 UX 디자인 사례 1가지 이상 찾습니다.

갤럭시 핸드폰을 사용한지 3년이 넘었는데 이번에 S21로 바꾸고 이제서야 삼성페이를 쓰기 시작했다. 들었던 것처럼 엄청난 서비스이다.

사용한지 얼마 되지 않아서 경이로운 편리함에 감탄만 하고 있다 구글에 삼성페이 before after를 검색하니 삼성 열혈팬 한 분이 무려 삼성 공식 커뮤니티 페이지에 개선점을 쓰셨더라 (삼성 기본앱 광고가 모두 사라진다면... ).

하지만 보지 말았어야 했다. 글을 읽고 나니 전에는 보이지 않는게 계속 거슬린다. 바로 결제 화면에서의 광고.

2. 나쁜 UX 상태에서 사용자가 겪었을 문제를 구체적으로 예상합니다.

"해당 서비스의 고객인 나는 결제라는 신뢰가 중요한 요소인 금융 서비스에서 광고 배너가 삽입된 화면으로 인해 그냥 어딘가 모르게 신뢰가 1g은 떨어진 느낌을 받는다."

사실 삼성페이가 엄청난 서비스인데다가 무료이기 때문에 "에이 광고 좀 넣을 수 있지"라는 생각이 들었는데 다시 생각해보니 "아니 100만원이나 주고 샀으면 됐잖아?"라는 생각도 갑자기 들고.

3. 서비스 개선 과정에 적용된 구성요소들을 모두 제시한 뒤, 이후 서비스 경험에 대해 설명해주세요.

갤럭시 판매 매출에 비해 광고비가 얼마 되지 않을 것 같은데, 저 위에 삼성 열혈팬분의 의견을 받아들여서 좀 지우시던지, 적어도 게임 광고는 조금 빼고 금융 관련 광고로 채우는게 낫지 않을까?

[코드스테이츠 PMB 6기] 심리학 법칙으로 테사 앱 UX/UI 분석하기

리코리코 — Wed, 2 Jun 2021 20:47:21 +0900

1. 제이콥의 법칙 : 익숙한 제품을 통해 구축한 기대치를 다른 제품에도 투영한다.

메인 화면 밑에 탭 바가 있다. 음악저작권을 구매할 수 있는 뮤직카우와 같은 구조이다.

2. 피츠의 법칙 : 대상에 도달하는 시간은 거리가 가까울수록, 크기가 클 수록 빨라진다.

현재 판매가 진행 중인 대상이 가장 첫 화면 가장 크게 나타난다. 뮤직카우는 캐로셀 화면 아래에 있지만 그래도 첫 화면에 크게 보이는 편이다.

3. 힉의 법칙 : 의사결정에 걸리는 시간은 선택지의 개수와 복잡성과 비례해 늘어난다.

현재 진행 중인 앤디워홀의 작품만 첫 화면에서 볼 수 있는 선택지이다.

4. 포스텔의 법칙 : 자신이 행하는 일은 엄격하게, 남의 것을 받아들일 때는 너그럽게.

앤디 워홀 의 작품을 클릭하면 바로 작품에 대한 설명화면이 나오고 구매하기 버튼이 나온다.

5. 심미적 사용성 효과 : 사용자는 보기 좋은 디자인을 사용성이 더 뛰어난 디자인으로 인식한다.

앤디워홀 작품이 화면 전체에 꽉 차는 것이 아니라 실제 프레임에 담겨 벽에 걸려 있는 것처럼 디스플레이 된다. 그림 자체 색감도 사고 싶게 만드는 것 같다.

6. 본 레스토프 효과 : 비슷한 사물이 여러 개 있으면 그 중에서 가장 차이나는 한 가지만 기억할 가능성이 크다.

선택할 수 있는 버튼 중 구매하기 버튼만 다른 색으로 되어 있다. 그런데 색이 눈에 띄지 않는 것 같다.

9. 테슬러의 법칙 : 복잡성 보존의 법칙이라고 알려진 테슬러의 법칙에 따르면, 모든 시스템에는 더 줄일수 없는 일정 수준의 복잡성이 존재한다.

주문화면까지 합해서 총 6개의 화면. 중간에 로그인을 하면 첫 화면으로 돌아가는 것까지 포함해서 몇가지 화면은 줄일 수 있지만, 랜딩페이지 - > 상세 페이지 -> 주문화면 3단계 미만으로 줄이기는 어렵다.

10. 도허티 임계 컴퓨터와 사용자가 서로를 기다리지 않아도 되는 속도(0.4초 이하)로 인터랙션하면 생산성은 급격히 높아진다.

느리지는 않지만 그렇다고 빠르지도 않다.

[코드스테이츠 PMB 6기] 데이터 분석 포트폴리오

리코리코 — Mon, 31 May 2021 20:50:59 +0900

1. 데이터 학습 사이트에서 제품 분석과 연관이 있는 데이터를 하나 선정합니다.

아래 데이터를 추천해주셨는데 추천한 것으로 진행하겠습니다.

추천 데이터: https://www.kaggle.com/olistbr/brazilian-ecommerce

Brazilian E-Commerce Public Dataset by Olist

100,000 Orders with product, customer and reviews info

www.kaggle.com

2. 설명을 읽고 해당 데이터의 개요, 데이터의 규모, 특성, 구조 등을 파악합니다.

3. 해당 데이터의 DB 스키마를 작성해 보고 전체 데이터의 구조를 정리합니다.

4. 해당 데이터의 CSV 파일을 엑셀로 열어보고 실제 데이터들을 살펴봅니다.

5. (Kaggle, Dacon의 경우) 데이터셋 페이지에 있는 코드, 토론 글들을 탐색해 다른 사람이 분석한 방법과 의견을 살펴봅니다.

6. 다른 사람이 분석한 방법과 의견들을 살펴보고 본인이 해당 데이터를 사용해 어떤 포트폴리오를 만들 수 있을지 정리합니다

살펴봤습니다. 기존에 없었던 분석 위주로 준비하겠습니다.

뾰로롱

[코드스테이츠 PMB 6기] SQL을 사용해 데이터 추출하기

리코리코 — Wed, 26 May 2021 19:55:25 +0900

1. DB 스키마

2. SQL 문장

1) 국가별 Customer 수를 알고 싶다.

SELECT COUNT(CustomerID), Country

FROM Customers

GROUP BY Country

ORDER BY COUNT(CustomerID) DESC;

2) ProductID 11의 전체 판매 갯수를 알고 싶다.

SELECT SUM(Quantity) FROM OrderDetails WHERE ProductID = 11;

3) Customer의 국가별 Product 구매 개수를 알고 싶다.

*w3school 에디터에서 아직 RIGHT JOIN과 FULL OUTER JOIN은 지원하지 않아서 테스트해보지 못했다.

SELECT SUM(OrderDetails.Quantity), Customers.Country

FROM Customers

FULL OUTER JOIN (SELECT * FROM Orders FULL OUTER JOIN OrderDetails ON Orders.OrderID = OrderDetails.OrderID)

ON Customers.CustomerID = Orders.CustomerID

GROUP BY Customers.Country;

[코드스테이츠 PMB 6기] 테사(Tessa) 랜딩페이지 A/B 테스트

리코리코 — Mon, 24 May 2021 11:44:12 +0900

테사(Tessa)는 그림 미술품을 공동구매하고 공동구매가 완료된 미술품의 지분을 거래할 수 있는 서비스이다. 경쟁사와는 다르게 앱 서비스만 제공하고 있다.

앱의 랜딩 페이지를 분석하려고 하였으나, 앱은 아래 5개 페이지가 탭으로 구분되어 있고 첫 화면이 Invest 페이지이기 때문에 웹을 분석하기로 했다.

1) Invest : 공동구매 중인 미술품을 확인하고 지분을 구매할 수 있는 페이지

2) News : 공지사항 등을 확인할 수 있는 페이지

3) Wallet : 보유중인 현금과 미술품 소유권을 확인할 수 있는 페이지

4) Marketplace : 미술품의 지분을 거래할 수 있는 페이지

5) My Page

1. 테사의 랜딩 페이지를 분석하자

테사의 랜딩페이지는 총 8개의 블록으로 이루어져 있다. 테사 앱 다운로드 버튼은 스크롤과 함께 이동하고, 버튼을 클릭하면 애플 앱 스토어와 구글 플레이 버튼이 있는 페이지로 이동한다.

테사 랜딩페이지

1) 네비게이션 바

2) 플랫폼 소개 컨테이너

3) 신규 공동구매 작품을 소개하는 컨테이너 (이번에는 앤디 워홀의 유니크 피스이다)

4) 테사와 서비스를 소개하는 캐로셀

5) 테사 앱의 페이지를 설명하는 컨테이너

6) 현재까지 공동구매를 완료한 작품 캐로셀

7) 공동구매한 미술품(데미안 허스트의 'The Cure' 시리즈)의 언박싱 동영상

8) 푸터해당

특이하게 위 1)부터 7)까지 어떤 블록에서든 아래 CTA 팝업이 뜨는 경우가 있는데, 느낌상으로는 마우스가 브라우저의 뒤로가기 버튼이나 닫기 버튼 쪽으로 이동하는 등 사용자가 랜딩 페이지를 이탈하려고 하면 나타나도록 설정한 것 같다.

CTA 팝업 화면

각 블록 별 카피문구들을 보면 다음을 의도하고 만들어진 것으로 보인다.

테사 앱 다운로드 버튼 : CTA

아무데서나 뜨는 CTA 팝업 : CTA

1) 네비게이션 바

2) 플랫폼 소개 컨테이너 : CTA(애플 앱 스토어와 구글 플레이 버튼이 있다)

대표카피 : 신개념 아트 투자 플랫폼, TESSA 자산의 관점을 바꾸다

마이크로카피 1 : 테사 앱 다운로드하고 미술관에서 보던 블루칩 아트 분할 소유로 안전한 재테크 시작!

3) 신규 공동구매 작품을 소개하는 컨테이너 (이번에는 앤디 워홀의 유니크 피스이다) : 유도

마이크로카피 2: 앤디 워홀의 시그니처 작품 앤디워홀의 유니크 피스(Unique Piece) 분할소유하고 특별한 테템까지 소장하세요.

4) 테사와 서비스를 소개하는 캐로셀 : 유도

마이크로카피 3: 분할 소유권 구매로 부담없는 아트테크 시작!

5) 테사 앱의 페이지를 설명하는 컨테이너 : 설명

6) 현재까지 공동구매를 완료한 작품 캐로셀 : 설명

7) 공동구매한 미술품(데미안 허스트의 'The Cure' 시리즈)의 언박싱 동영상 : 보충

8) 푸터

제품에 대한 설명은 5)에 나와있는데, 앱의 페이지 별 기능을 설명하고 있다.

테사 앱의 페이지를 설명하는 컨테이너

최소 구매금액을 강조하는 경쟁사와는 특이하게 프라이싱에 대한 언급은 커녕 경쟁사에서 흔하게 볼 수 있는 숫자조차 랜딩페이지에서 찾아보기 힘들다. 이 웹 페이지는 철저하게 앱 다운로드를 유도하려는 목적으로 작성되었다는 것을 엿볼 수 있다.

2. 개선해야 할 부분

개인적으로는 테사 웹 페이지가 앱 다운로드 유도라는 목적에 맞게 잘 제작된 것으로 보인다. 앱의 기능과 지나간 공동구매 작품과 같은 설명 블록은 최대한 아래로 미루고, 가장 첫 블록에는 MZ 세대의 눈낄을 끌만한 이미지를 배치한 CTA 화면과 두번째 블록에는 곧 진행될 공동구매에 관한 유도화면을 배치했기 때문이다.

다만, 아래 2가지는 개선하면 좋을 것 같다.

1) 앱 다운로드 버튼 개선

앱 다운로드 버튼이 스크롤을 따라서 화면 하단 오른쪽에 항상 떠 있는데, 버튼의 크기가 생각보다 커서 화면을 가리는 것이 불편했다.

2) Marketplace 기능 강조

투자는 회수를 통해서 결실을 맺는다. 매달 저작권료를 지급받는 음악 저작권과 다르게, 그림 저작권 투자는 정기적인 투자금 회수가 아니라 가치가 상승한 그림을 매각했을 때의 차익이 주요 투자금 회수 방법이다. 그런데 그 기간은 짧게는 1년에서 길게는 2년 이상이 걸린다고 한다. 그렇기 때문에 그림이 매각되기 전 투자금을 회수할 수 있는 방법이 있다는 것은 투자자에 대한 굉장한 투자요인이라고 생각한다.

테사는 공동구매가 완료된 그림의 지분을 거래할 수 있는 서비스를 제공하는데도 불구하고, 랜딩 페이지에서는 그 서비스가 강조되지 않은 것 같다.

3. As is - To be 를 통해 테스트 하고 싶은 가설

1) As is

Marketplace에 대한 설명이 눈에 띄지 않는다.

Marketplace에 대한 설명은 4) 테사와 서비스를 소개하는 캐로셀 내 3번째 화면에 맨 마직막 문구 "작품 매각 이전에도 P2P 마켓플레이스로 거래가 가능합니다."와 5) 테사 앱의 페이지를 설명하는 컨테이너 맨 하단이 전부이다.

2) To Be

5) 테사 앱의 페이지를 설명하는 컨테이너를 Marketplace를 설명하는 컨테이너로 대체한다.

4. 테스트 과정

가설	신규 공동구매 작품 블록 아래에 Marketplace에 관한 블록이 추가되면 앱 다운로드 수가 증가할 것이다.
기간	1달
대상	웹 랜딩 페이지 방문자 1,000명 이상
A 그룹 (대조군)	기존 디자인 랜딩 페이지 방문자
B 그룹 (실험군)	신규 디자인 랜딩 페이지 방문자
측정 지표	방문자의 앱 다운로드 비율
스케줄	1일: 팀 공유, 대상자 분류, 테스트 세팅
	2일: 테스트 릴리즈, 지표 트래킹
	30일차: 데이터 분석, p-value 확인, 테스트 결과 확인, 신규 디자인 적용 결정

5. 테스트 디자인