코드스테이츠 PMB 18기 W7 프론트엔드/서비스방식/오픈api

이번주는 PM에게 필요한 프로그래밍 지식이란 주제로 프론트엔드, 그리고 각 서비스별(PC 웹, 모바일웹, 모바일 앱 등) 특징과 장단점 그리고 api에 대해 배웠습니다.

이번주에 배운것들을 정리하기 위해 한번 실제 서비스를 분석 해보겠습니다. 

순서로는 1. 랜딩페이지 분석, 2. 각 서비스별 특징과 장단점 분석, 3. api 분석이 되겠습니다.

 

1. 랜딩페이지 분석

먼저 랜딩페이지 분석을 통해 html, css, JS(자바스크립트)등 프론트엔드 요소에 대해 알아보겠습니다.

랜딩페이지 분석을 할 프로덕트로는 몇주간 계속 분석해온 투네이션으로 정했습니다.

일단 분석에 들어가기 전에 한번 사이트를 자세히 둘러보니 단순하면서도 깔끔하게 프로그램을 홍보하면서도 문의나 설정등 실제 사용자들 그중에도 방송인(크리에이터)에게 필요할 법한 메뉴가 더 많다는 점에서 주 고객이 크리에이터라는 정체성을 볼수 있었습니다.

아무래도 도네이터(시청자)는 각 방송에 붙어있는 링크를 통해 로그인, 후원을 하기 때문에 더 그렇다고 볼수 있을것입니다.

https://toon.at/ko/index

투네이션 - 당신을 향한 모두의 마음

일단 프론트엔드 분석을 위해 개발자 도구와 Wappalyzer이라는 크롬 플러그인을 사용했습니다.

f12를 눌러서 개발자 도구를 열수 있습니다.

반응형 웹 사이트로 모바일모드로 실행시 모바일 레이아웃에 맞춰 변화하는것을 확인할수 있었습니다.

html은 일단 문서타입선언(doctype html 부분), 헤드, 바디 로 나뉘는데 첫부분인 문서타입 선언은 이제 html을 이용할것이란 선언이고 헤드는 문서정보, 타이틀설정값, css, JS등 설정에 관련된 파트입니다. 

그리고 바디에 본문(그림, 외부에서 가져오는 정보를 제외한 모든것)들이 담기게 됩니다.

일단 왼쪽 바디와 설정 부분을 보면 한국 웹사이트 답게 접속한 사람의 컴퓨터 설정이 (locale code) 한국어로 되어있는가를 확인할수 있습니다.

중간에 자바스크립트 명령어들이 들어가는걸 보면 자바스크립트 기능으로 로케일이 한국이 아니라면 특정 기능들을 실행하는것 같습니다. 아마 언어 설정 관련된 기능인거 같습니다.

그 뒤에 역시나 한국 사이트 답게 혹시 접속한 브라우져가 윈도우 익스프롤러가 아닌지 확인절차를 걸치네요.

아마 IE에서는 안되는 기능들이 있어서 그들을 배려한거 같습니다.

이러한 확인 절차들을 다 거친 다음에 css로 만들어진 배치를 불러오네요.

그리고 IE10을 사용중일시 브라우저 업데이트 또는 크롬등의 다른 브라우저를 사용하는걸 권하는것 같습니다.

그 뒤로는 각종 버튼과 레이아웃을 구현하기 위한 코드들이 작성되어있습니다.

그리고 위에서 빠트린 헤드부분을 확인해보시면 언어 형식(utf-8)과 각종 호환, 인증 관련된 설정값들과 또 어떤 언어를 선택해 한국어면 한국어버전사이트, 영어면 영어버전 사이트와 연결되도록 해둔것을 확인할수 있었습니다.

또 사용하는 기기가 애플기기일  경우 아이콘이 또 개별형식으로 되있어 다른 모양의 버튼을 불러오는것도 확인할수 있었습니다.

또 css에 관련된 설정, 아이콘, 사진등을 불러오기 위해 클라우드플래어의 cdnjs서비스를 쓴다는것 또한 확인할수 있었습니다.클라우드 플래어의 cdnjs서비스가 뭔지 알아보니 

CDN(Content Delivery Network)은 협력하여 인터넷 콘텐츠를 고속 전송하는 지리적으로 분산된 서버 집단을 의미합니다.

CDN으로 HTML 페이지, javascript 파일, 스타일시트, 이미지, 동영상을 비롯한 인터넷 콘텐츠를 로드하는 데 필요한 자산을 신속하게 전송할 수 있습니다. CDN 서비스이 인기는 나날이 성장하고 있으며 Facebook, Netflix, Amazon을 비롯한 주요 웹사이트의 트래픽을 포함한 오늘날 웹 트래픽 대부분이 CDN을 이용하고 있습니다.

라고 하는데 간단하게 요약하자면 모든것을 자사 서버에 저장할수도 있지만 그러면 디도스 공격등에 취약해기지 때문에 분산저장해뒀다가 불러오는 서비스라고 이해하시면 될것 같습니다. 이 서비스의 최대 장점은 자사 서버에서 먼 지역에서 접속할때(해외에서 접속한다던가 하는 상황 등) 서버와 사용자의 거리를 줄여 로딩시간을 줄여준다고 합니다. 

한국시장뿐만 아니라 해외시장도 공략하고 있는 서비스라면 한번쯤은 사용을 생각해봐야할 서비스라는 인사이트를 얻을수 있었습니다.

 

또 Wappalyzer를 이용해 사용된 플러그인들을 분석해보니 단순해보이고 간단해보이는 사이트에도 상당히 많은양의 플러그인이 사용되었다는것을 알수 있었습니다.

분석파트의 구글 GA는 사용자들이 어떤 단계를 걸쳐 웹페이지를 사용하는지에 대한 데이터를 분석하는데 쓰이는 툴이고 그 외에도 위에서 분석한 cdn등 다양한 플러그인/프레임워크들이 활용되었다는것을 확인할수 있었습니다.

특이한점은 JS에서 어떤 라이브러리를 사용했는지까지 확인이 가능하다는거였는데 리엑트는 아니지만 거의 유사하다는 preact나 어디서 들어본적은 있는 제이쿼리등 다양한 프레임워크/플러그인들을 활용해 이루어졌다는걸 확인할수 있는 기회였습니다.

라이브러리와 프레임워크의 차이는 제작자들이 라이브러리라고 하면 라이브러리고 프레임워크라고 주장하면 프레임워크라고 할 정도로 차이가 크지 않다고 아는데 그래서 인지 Wappalyzer에서는 라이브러리와 프레임워크의 구분을 하지 않는것 같습니다.

이중에 특이하게 결제 처리 관련된 프로그램이 있길래(stripe) 한번 알아봤더니 해외에서 결제를 할때 많이 사용하는 서비스로 페이팔보다 더 단순하고 간단하게 사용할수 있기 때문에 요즘 정말 많이 뜨고 있는 서비스로 결제/체크아웃 api를 제공해주는 서비스라고 합니다.

api를 제공해주는 서비스이기 때문에 외부 사이트(또는 앱)로 연결되지 않고 사이트 내부에서 외부기능을 불러와 사용 가능하므로 폭발적인 성장중이라고합니다.

아마도 해외 결제를 받거나 해외에서 사용을 원하는 사람들을 위해 네이버페이, 카카오페이를 지원하는것처럼 스트라이프도 지원을 해주는것이 아닐까 싶습니다.

 

 

2. 각종 서비스별 장단점 분석

그 다음으로 pc웹, 모바일 웹/앱 등 각종 서비스의 장단점 분석은 투네이션이 모바일 앱도 존재하긴 하나 그 역사도 짧고(약 1년 정도) 아직 개발중이란 말이 많아 투네이션이 제일 많이 활용되는 트위치를 분석해보겠습니다.

트위치는 2011년 저스틴tv에서 트위치 tv로 이름을 바꾸고 게임방송 전문 플랫폼으로 시작되었습니다.

그 당시에는 스마트폰이 존재하긴 했으나 지금처럼 동영상 플레이어로 활발하게 활용되던 시절이 아니었기에 당연히 pc용 웹을 기반/ 메인 타겟으로 개발되었습니다.

하지만 그 이후 스마트폰/타블렛이 동영상플레이어로 각광받기 시작하면서 스마트폰 앱버전 개발이 이루어지고 이제는 가장 많이 시청하는 기기중 하나로 자리매김 하였습니다.

또 최근에는 스마트 티비의 발달로 tv에서도 시청이 가능하나 거의 시청만 가능하고 다양한 기능들은 활용되지 못해 pc나 모바일앱만큼 활용되진 못하는중입니다.

트위치tv는 이미 충분한 사용자를 확보했기에 시장의 확장도 좋지만 이미 있는 고객들에 집중하여 그들이 부족하거나 불편하다고 느끼는점을 없애가는 방향으로 진행하는것이 좋을것이라 생각합니다. (ex- 아이폰 앱에서 안드로이드/pc와는 다르게 딜레이가 10초 이상 발생하는 문제 등)

 

정리해보자면 

• pc : 트위치의 시작부터 활용되던 플랫폼이고 각종 플러그인도 활용하기 좋아 아직도 가장 많이 활용됨.방송, 시청 모두 가능. 모바일에서 모든 기능을 다 활용하게 되지 않는 이상은 방송인도 시청자도 이걸 가장 많이 활용하지 않을까 생각됩니다. 방송 딜레이도 2-3초 이내로 가장 짧고 채팅치기도 가장 좋아서 가장 많은 사용자층이 존재.

 

• 모바일 앱 : pc만큼은 아니지만 많은 트위치 자체 기능 활용 가능으로 두번째로 많은 이용자층이 있음. 방송, 시청 모두 가능한것을 보면 네이티브앱인거 같으나 기능이 좀 부족해 방송을 할 경우애는 서드파티앱(프리즘 라이브 등)을 활용하는 경우가 많음. 그래도 활용이 간단하고 앱 하나에서 방송 시청과 방송 송출이 모두 가능하기에 처음 방송 시작하는 이들에게는 접근성이 높고 좋은 편. ios와 aos의 서비스 품질 차이가 발생하여 ios사용자들로부터 불만이 좀 나오는편.

 

• 모바일 웹 : 크롬의 호환성으로 생각보다 많은 웹 플러그인들이 사용 가능해 의외로 사용자층이 있음. 딜레이는 가장 없다는 말도 있고 있다는 말도 있는데 아마 os, 브라우저 마다 차이가 존재하는듯.

 

• 스마트 tv : 큰 화면에서 볼수 있다는 장점은 좋지만 실시간소통(채팅)이 힘들고 아직 기능이 미비해 아직 갈길이 멈. 웹앱인지 네이티브앱인진 알수 없으나 지원하는 tv가 생각보다 적은것을 보면 네이티브앱으로 추정됨.

 

3. open api 분석

open api분석은  위에서 투네이션을 분석하다 알게 된 스트라이프를 한번 분석해보겠습니다.

스트라이프는 위에 언급됬듯이 요즘 해외에서 많이 활용되는 결재서비스로 팝업이나 다른 사이트로 이동하게 되는 지금까지의 결재서비스들(페이팔 등)과는 다르게 지금 사용하던 창 안에서 장바구니/결재 등을 할수 있도록 도와주는 서비스입니다.

스트라이프는 신기하게도 api 레퍼런스페이지에서 몇가지 옵션을 제공해주는데 그중에 미리 만들어둔 코드를 삽입만 하면되는 개발자들이 아닌 이용자를 위한 서비스도 존재하는걸로 확인됩니다.

지금까지의 api들이 주로 개발자들을 위해 개발되고 이용되었던걸 보면 정말 신기하다고밖에 말할수가 없습니다.

하지만 개발자들을 그리고 디자이너들을 위한 개별적인 커스텀이 들어간 사이트에 어울리는 모양으로 커스텀 기능도 제공하기에 개발자와 디자이너가 있는 충분히 큰 회사라면 커스텀을 통해 특색있고 통일성 있는 디자인을 사용할수도 있기에 작은회사부터 큰 회사까지 모두 활용하는것 같습니다.

 

일단 스트라이프에서 가장 중요한점은 돈이 오가는 서비스이기때문에 인증에 관련된 절차라 할수 있습니다.

인증이 안된 접근은 전부 거부되고 인증된 접근만이 허용되는 방식이고 api key를 사용한다는데 너무 기술적인내용이라 정확히 이해한건진 모르겠으나 간단하게 말해 https 기본 기능을 활용해 만든 비밀키를 가지고 있는지를 확인해 그 비밀키가 없으면 접근을 차단하는 방식이라 합니다.

그리고 결재를 해야할때는 클라이언트가 서버에 비밀키를 요청하고 그 생성된 비밀키와 결재에 관련된 정보들을 스트라이프 서버에 전송해 모든 정보들이 맞다면 결재가 되는 방식입니다.

많은 서비스에서 활용이 가능하나 결재 서비스라 하면 쇼핑에 관련된 사이트들이 가장 먼저 떠오르므로 쇼핑몰에서 활용한다고 가정하겠습니다.

결제에 관련된 정보는 카드번호, 카드에 있는 이름, 주소 등의 정보와 쇼핑몰이라면 주문한 주문정보 정도 까지가 포함될수 있습니다.

또 카드결재 말고도 통장결재 등 여러 결재 방식을 지원하므로 각 결재방식마다 결제에 필요한 정보가 달라질수 있습니다.

또한 요청하기 따라 결재 관련된 정보를 스트라이프 서버에 요청해 쇼핑몰 데이터베이스에 기록하거나 아니면 그냥 스트라이프 서버를 통해 주문기록을 확인할수 있습니다.

그리고 결재 진행중까지는 다음화면으로 넘어가지 않다가 스트라이프 서버에서 결재완료 신호를 받으면 다음 화면으로 넘어가야 하므로 결재완료 신호를 받을때까진 계속 결재화면에 머물러야할것입니다.

또 혹시라도 발생할지 모르는 환불이나 취소를 대비하여 결재정보는 쇼핑몰서버와 스트라이프 서버에 모두 저장되어야 문제 없이 환불이나 취소를 진행할수 있을것입니다.

이런 결재/장바구니에 관련된 api를 제공받아 사용한다면 쇼핑몰측에서는 말그대로 판매할 상품에 대한 페이지만 준비하면 되므로 일이 훨씬 줄어들게 될것입니다.

또 결재에 관련된 카드번호나 전화번호등의 개인정보를 직접 보관하지 않아도 될수도 있기때문에(이건 설정하기 따름) 보안에 신경쓰기 힘든 작은 회사일 경우 보안에 대한 걱정도 한층 덜수 있을것이라 생각합니다.

 

정리해보자면 

스트라이프 서버와 쇼핑몰 서버간의 통신을 스트라이프 api를 통해 진행하게 되고 그 통신이 정당한 통신인지를 확인하기 위해 api key를 사용한 인증을 진행하게 됩니다. 필요한 정보는 스트라이프 서버와 쇼핑몰 서버와 통신을 통해 얻어오게 되고 어디에 어떤게 저장될지는 설정하기 따라 달라질수 있습니다.