안녕하세요, 꾸우._. 입니다. 이번주에는 웹 랜딩 페이지 분석과 API 분석을 통해 개발 프로세스에 대해 정리해보겠습니다. 분석할 프로덕트는 지난 주차 과제들에서 몇 차례 언급했던 음원 플랫폼 'FLO'입니다.
📌 웹 랜딩 페이지 들여다보기
FLO를 웹에서 접속했을 때 보이는 랜딩 페이지는 아래와 같습니다.
개발자 도구를 통해 본 HTML 구조는 크게 '헤더', '섹션 홈', '푸터', '플레이어' 로 구성된 것을 확인할 수 있었으며, 자세한 구조는 아래와 같습니다.
- Header
- Inner
- FLO 스와이퍼 배너
- 오늘 발매 음악
- 오늘 인기 오디오 TOP20
- 추천 플레이리스트 1 : 오늘 뭐 듣지?
- 장르 콜렉션
- 추천 플레이리스트 2 : 노래는 내가 틀게, 넌 운전만 해
- Editor's Pick
- 하단 컨텐츠 배너
- Footer
- Player
이를 바탕으로 섹션 별로 짜인 코드들을 간략하게 분석하고 정리해보겠습니다. 그 전에 추천 플레이리스트 영역 (오늘 뭐 듣지?, 노래는 내가 틀게, 넌 운전만 해)은 코드 형태가 유사한 것으로 파악되어 2가지 중 1가지를 대표해 정리한다는 점과 간략하게 정리할 수 있었던 HTML과 달리 CSS 코드의 경우 CSS 파일이 많아 다 담지 못한 점 미리 말씀드립니다.
💡 Header
헤더의 경우 별도의 섹션으로 구분해 클래스가 만들어져 있는 것을 확인할 수 있었으며, 헤더를 구성한 HTML, CSS 코드는 다음과 같습니다.
헤더의 경우 우선 좌측 영역인 header--left, 우측 영역인 header--right 로 나누어 줍니다.
이후 좌측 영역 위치한 FLO 로고를 별도로 영역(div)을 구분해주고, 둘러보기, 보관함, 이용권 부분은 navigation 역할을 부여한 클래스를 만들어 그 안에 각 메뉴를 <li></li> 형태로 생성하여 링크를 부여함으로써 해당 버튼 클릭 시 페이지를 이동할 수 있도록 해주었습니다.
중앙에 있는 FLO 검색창의 경우 flo_search 클래스를 만들어 검색창 입력 안내 문구를 넣어 검색을 할 수 있도록 해주었으며,
header--right 영역에는 크리에이터 스튜디오, 로그인, 회원가입 문구를 입력해 각 버튼을 만들어주고, 각 버튼 클릭 시 설정한 링크의 페이지로 이동하게 해준 것으로 파악됩니다.
💡 Inner
다음으로 살펴볼 영역은 헤더 아래 플로에서 제시하는 플레이리스트들이 게시된 영역인 inner 영역 입니다. 해당 영역에서 <div></div>는 여백을 포함해 13여 개로 구성되어 있습니다.
⭐ 사용자 추천 스와이퍼 배너
우선 inner 영역 내에서 가장 상단에 위치한 사용자 추천 스와이퍼 슬라이드 영역입니다.
해당 영역의 HTML, CSS 코드는 다음과 같습니다.
스와이퍼 영역은 일정 시간마다 페이지가 넘어가면서 여러 테마의 음원을 추천해줍니다. 따라서 각 목록의 페이지를 swiper-slide 타입 클래스로 각각 만들어주고, 배너 양 옆의 '<', '>' 버튼을 통해 이전 목록과 다음 목록으로 넘어갈 수 있도록 해준 걸로 보입니다.
⭐ 오늘 발매 음악
다음은 당일날 발매된 신규 앨범 리스트가 제공되는 '오늘 발매 음악' 영역입니다.
해당 영역의 HTML, CSS 코드는 다음과 같습니다.
여기서는 '오늘 발매 음악' 문구를 좌측에 두고, 우측에 종합/국내/해외 등의 문구로 된 버튼을 통해 국내 앨범, 해외 앨범을 분류해서 볼 수 있도록 제공하고, '<', '>' 버튼을 두어 페이지 스와이퍼가 되도록 하여 다양한 앨범들을 보일 수 있도록 하는 것으로 보입니다.
⭐ 오늘 인기 오디오 TOP20
다음은 플로에서 주요 서비스로 제공하는 오디오 콘텐츠에 대한 차트 영역입니다.
해당 영역의 HTML, CSS 코드입니다.
해당 영역에서는 텍스트를 통해 헤더는 '오늘 인기 오디오TOP20', 그 아래 문구는 '지금 FLO에서 많이 듣는 오디오 프로그램'이라는 문구를 기재하여 해당 프로그램 차트에 대한 설명을 보여주고, 이전 영역들과 마찬가지로 '<', '>' 버튼을 통해 페이징 슬라이드를 할 수 있도록 했습니다.
⭐ 오늘 뭐 듣지?
다음은 플로가 사용자의 취향을 기반으로 제공하는 추천 플레이리스트 첫 번째 영역입니다.
해당 영역의 HTML과 CSS 코드입니다.
이 영역 역시 크게 헤더, 스와이퍼 컨테이너로 영역이 구분되며 헤더에는 텍스트를 통해 어떤 목적으로 제공하는 기능인지 기재하고, 'swiper-wrapper' 클래스를 통해 '<', '>' 버튼을 클릭 시 페이징 슬라이드가 일어나도록 한 것으로 보입니다.
또한 각 플레이리스트별 영역 크기의 CSS적 요소를 볼 수 있었는데요. 'curation-content_item swiper-slide' 클래스를 통해 각 플레이리스트의 사이즈와 우측 마진 사이즈를 확인할 수 있었습니다. 이를 통해 일정한 간격과 동일한 사이즈로 플레이리스트들이 제공되는 것으로 판단됩니다.
margin : 가장자리, 여백
⭐ 장르 콜렉션
다음은 장르별 리스트 영역입니다.
해당 영역의 HTML, CSS 코드입니다.
이 영역의 경우에도 이전 영역들과 같이 페이징 슬라이드가 일어나도록 하고 텍스트로 헤더를 나타낸 점은 동일합니다.
이전 영역들과 동일한 썸네일의 크기를 보고 하위 코드를 조금 더 살펴본 결과 장르별 리스트를 'swiper-slide' 라는 클래스명으로 이전과 같이 너비 175픽셀, 우측 마진 20픽셀로 간격을 설정한 후 페이징 슬라이드가 일어나도록 한 것으로 파악되었습니다.
⭐ Editor's Pick
다음은 플로에서 제공하는 또 다른 형태의 플레이리스트 추천 영역입니다.
해당 영역의 HTML, CSS 코드입니다.
해당 영역의 경우 'editors-pick_item_list' 라는 클래스명으로 각 플레이리스트들이 제공되고 있었으며, 각 플레이리스트를 구성하는 하위 코드들은 아래 사진과 같습니다.
해당 플레이리스트 썸네일은 도형이 2개가 겹쳐있어 백그라운드 스타일이 first, second로 나뉘어 있습니다. 또 버튼 클릭 시 설정한 링크를 통해 해당 플레이리스트를 재생할 수 있도록 하며, 아래에 입력된 플레이리스트 설명 텍스트를 클릭 시 설정한 링크를 통해 페이지 이동이 일어남을 확인할 수 있었습니다.
⭐ 하단 컨텐츠 배너
플로에서 제공하는 서비스를 쉽게 사용할 수 있도록 빠른 페이지 이동을 제공하는 하단 배너입니다.
해당 영역의 HTML, CSS 코드입니다.
해당 영역의 경우 inner 가장 상단에 있던 사용자 추천 스와이퍼 영역과 유사하게 'section_content_wrap' 이라는 클래스명으로 섹션을 정의하고 있으며, 스와이퍼가 일어날 수 있도록 하고 있습니다. 또한 하위 클래스 'blind'를 통해 스와이퍼 화면 내 문구를 넣도록 했으며, '선택하러 가기' 버튼을 통해 설정한 링크로 이동할 수 있도록 하는 걸로 보입니다.
💡 Footer
다음은 inner 아래 FLO의 기업 정보 및 약관 등을 볼 수 있도록 하는 푸터 영역입니다.
해당 영역의 HTML, CSS 코드입니다.
푸터에는 상대적으로 많은 문구가 들어가기 때문에 다양한 이름의 하위 클래스를 생성해 '고객센터', '공지사항'의 타이틀 영역, FLO 서비스, 기업 정보, 문의 영역을 각각 <li></li>로 만들어 정의한 것으로 보입니다.
또한 이용약관 및 정책을 나타낸 'policy_area' 클래스, 두 줄로 기재된 플로를 개발한 기업의 주소지를 나타낸 'address_top', 'address_bottom'을 비롯해 기업의 저작권을 나타낸 제일 하단 'copiyright' 클래스도 확인할 수 있습니다.
💡 Player
플로의 경우 음원 플랫폼이기 때문에 타 음원 플랫폼들과 마찬가지로 푸터 이후 화면 최하단에 플레이어 영역이 존재했습니다.
플레이어 영역의 HTML, CSS 코드입니다.
플레이어의 경우 음원의 재생 시간에 따라 얼마나 재생되었는지 보여줘야 하므로 'player_seek-wrap inactive' 라는 클래스를 통해 해당 기능을 구현한 것으로 보입니다.
'playerbar_ct' 클래스의 경우 플레이어 영역의 재생 중 음원에 대한 정보 제공, 이전 곡, 재생(일시중지), 다음 곡 기능과 같은 재생 컨트롤을 비롯하여 음량 조절을 구현하기 위해 하위에 'track_area hide_lyrics', 'playerbar_controller', 'player_side' 라는 클래스들로 나누어 구현한 것으로 보입니다.
위의 분석 과정을 바탕으로 HTML, CSS, JavaScript 가 웹 페이지에서 각자 어떤 역할을 수행하는지 파악할 수 있었습니다.
- HTML : 웹 페이지의 구조를 잡는 데 활용. 헤더, 이너, 푸터 등의 영역을 정의, 설정
- CSS : 폰트, 글씨 크기, 여백, 간격, 사이즈 등 웹 페이지를 구성하는 모든 요소에 대한 스타일 설정
- JavaScript : 버튼 클릭 등을 통한 사용자 행동 발생 시 상호작용을 위해 각 기능별 함수
📌 서비스 유형별 분석
플로는 모바일 웹, 앱 그리고 PC 웹 페이지, PC 프로그램 (플로 플레이어)를 제공합니다. 해당 유형별로 장단점을 분석 후 간략하게 정리해보겠습니다.
💡 모바일 웹
플로의 모바일 웹 페이지는 랜딩 페이지를 모바일에서 보이는 [홈] 화면이 아닌 플로의 강점과 제공하는 서비스들에 대해 소개하는 형태로 설정해둔 것을 확인했습니다.
해당 페이지에서 모바일의 [홈] 화면을 보고자 했지만 모바일 웹 페이지에서는 플로 서비스 자체를 활용하기 어려웠고, 좌측 메뉴 버튼을 통해 플로 어플을 설치하도록 유도하고 있었습니다.
따라서 모바일 웹의 경우 직관적인 문구를 게시한 랜딩페이지를 제공함으로써 앱을 설치하지 않아도 플로가 어떤 서비스인지 알 수 있도록 해준다는 것이 장점으로 작용하는 것으로 보입니다. 다만, 플로가 제공하는 서비스 자체를 사용할 수는 없기 때문에 사용성은 전혀 고려된 것 같지 않다는 것이 단점이라고 생각됩니다.
💡 모바일 앱
그래서 모바일 웹이 아닌 앱으로 접근해보았습니다. 앱을 실행하니 음원 플랫폼에서 가장 중요한 [홈] 화면이 플로가 추구하는 '사용자 취향'을 기반으로 보여주는 것을 확인할 수 있습니다.
모바일 앱의 경우 설치하면 플로에서 제공하는 모든 기능들을 둘러보고, 고객의 성향에 맞게 활용할 수 있습니다. 따라서 스마트폰을 휴대할 수 있다는 점에 기반해 사용성에 있어 가장 편리함을 제공하는 것이 장점으로 보입니다. 또한 자체 어플 사용 시 음원 재생 및 기타 콘텐츠를 사용하는 데 있어 기능적인 측면에서 용이하다고 생각됩니다. 다만, 웹 페이지가 제공되지 않기 때문에 해당 플랫폼을 전혀 모르는 경우, 접근성이 다소 부족할 수 있다는 점이 단점으로 작용될 것 같습니다.
💡 PC 웹
PC 웹 페이지에서는 모바일 웹과는 달리 플로 사이트를 방문 시 모바일의 [홈] 화면을 바로 볼 수 있었습니다.
사이트를 둘러보면서 PC에서 플로를 사용하고자 할 경우 우선 서치를 통해 방문하여 고객이 유입되고, 해당 서비스를 사용하면서 PC 플레이어를 설치할 수 있도록 유도하기 위한 매개체의 역할로써 웹 페이지가 활용되는 것으로 파악되었습니다.
따라서 웹 페이지의 경우 PC에서 접근하기 용이하다는 것이 큰 장점이라고 생각했습니다. 다만 웹 페이지이기 때문에 자체적으로 제공하는 PC 플레이어에 비해 음원 재생과 관련한 기능은 비교적 저하될 우려가 있다는 것이 단점이라고 생각됩니다.
💡 PC 프로그램
PC 웹 페이지에서 플로 플레이어 다운로드를 진행했고, 이후 실행해 들여다 본 플로의 PC 프로그램입니다.
플로 PC 플레이어를 다운로드하면 모바일 앱과 같이 프로그램을 바로 실행해서 접근할 수 있어 굳이 웹 페이지를 서치해 재방문하는 번거로움이 생기지 않는다는 장점이 있습니다. 다만, 프로그램을 설치하는 것이기 때문에 플로 측에서 플레이어를 원활하게 사용할 수 있도록 요구하는 PC사양이 존재할 것이고, 고객의 PC 사양이 요구되는 사양보다 충족되지 못할 경우 사용하기 어려울 수 있다는 점이 단점으로 작용할 것으로 판단됩니다.
📌 플로는 왜 모바일 앱 서비스를 선택했을까?
나무위키를 통해 알 수 있었던 플로의 초창기 서비스 유형입니다.
2014년 11월 베타 서비스를 시작했으며, 2015년 1월에 "뮤직메이트" 라는 이름으로 정식 출시되었다. 초창기에는 모바일 라디오 스트리밍 서비스였다.
- 출처 : 나무위키 -
'뮤직메이트' 라는 이름의 모바일 라디오 스트리밍 서비스에서 출발했기 때문에 고객이 언제 어디서든 이동하면서, 혹은 일하면서 라디오를 청취할 수 있도록 하기 위해 모바일에 최적화된 유형으로 서비스를 제공해야 했고, 그에 따라 모바일 앱을 채택했던 것으로 보입니다.
📌 음원 관련 Open API 찾아보기
플로를 분석해보면서 여러 음원 플랫폼에서 Open API를 제공하고 있다는 사실을 알게 되었습니다. 그래서 찾아본 결과 스포티파이, 아이튠즈, 사운드클라우드 등 여러 음원 플랫폼의 오픈 API를 찾을 수 있었는데요. 그 중에서 저는 한때 해외에서 많이 사용한다고 들었던 플랫폼인 스포티파이를 선택했습니다.
💡 스포티파이의 API 둘러보기
우선 스포티파이의 웹 API 홈페이지를 둘러보겠습니다.
스포티파이에서는 앨범, 아티스트, 오디오북, 카테고리, 챕터, 에피소드, 장르, 시장, 플레이어, 재생목록, 트랙, 사용자 등 음원 플랫폼에서 필수적으로 들어가야 할 데이터와 관련된 다양한 API를 제공하고 있었습니다. 이들 중에 저는 '트랙'에 관련된 API들 중 하나를 골라 분석하고, 정리해보고자 합니다.
정리에 앞서 웹 페이지의 구글 번역 특성 상 용어가 다소 이상(?)할 수 있음을 말씀드립니다.
💡 트랙 조회하기
트랙을 조회하는 API 입니다. 트랙을 발매한 아티스트, 트랙이 속한 앨범 등의 데이터가 요구됩니다.
| HTTP | URI | Request | Response |
| GET | /track/{id} |
|
|
스포티파이에서 부여하는 고유 ID와 사용자의 계정과 연결된 국가 (또는 사용자의 소속 국가) 데이터를 요청함으로써 두 데이터를 통해 Response 란에 기재한 데이터들을 불러옵니다.
Response에 불러오는 데이터들은 크게 앨범, 아티스트 클래스 내부 객체들을 비롯하여 트랙 재생을 제공할 수 있는 국가와 트랙에 대한 정보 등 입니다.
개발 프로세스 관점에서 보는 API 통신은 다음과 같습니다.
먼저 프론트엔드(클라이언트) 단에서 ID와 Market을 통해 백엔드 측에 데이터를 요청(Request)합니다.
그럼 백엔드(서버, DB) 단에서는 앨범, 아티스트를 비롯해 트랙 조회 시 제공돼야 할 데이터를 찾아 프론트엔드 측으로 응답(Response)을 보냅니다.
그렇게 받은 데이터를 프론트엔드 단에서 화면에 보일 수 있도록 제공합니다.
⭐ 프론트엔드 코드
다음은 프론트엔드 단에서 데이터를 요청(Request)하고, 응답(Response)받은 데이터를 화면에 띄우기 위해 작성하는 코드입니다.
•Request
http GET https://api.spotify.com/v1/tracks/11dFghVXANMlKmJXsNCbNl \
Authorization:'Bearer undefined...undefined'
•Response
{
"album": {
"album_type": "compilation",
"total_tracks": 9,
"available_markets": [
"CA",
"BR",
"IT"
],
"external_urls": {
"spotify": "string"
},
"href": "string",
"id": "2up3OPMp9Tb4dAKM2erWXQ",
"images": [
{
"url": "https://i.scdn.co/image/ab67616d00001e02ff9ca10b55ce82ae553c8228",
"height": 300,
"width": 300
}
],
"name": "string",
"release_date": "1981-12",
"release_date_precision": "year",
"restrictions": {
"reason": "market"
},
"type": "album",
"uri": "spotify:album:2up3OPMp9Tb4dAKM2erWXQ",
"copyrights": [
{
"text": "string",
"type": "string"
}
],
"external_ids": {
"isrc": "string",
"ean": "string",
"upc": "string"
},
"genres": [
"Egg punk",
"Noise rock"
],
"label": "string",
"popularity": 0,
"album_group": "compilation",
"artists": [
{
"external_urls": {
"spotify": "string"
},
"href": "string",
"id": "string",
"name": "string",
"type": "artist",
"uri": "string"
}
]
},
"artists": [
{
"external_urls": {
"spotify": "string"
},
"followers": {
"href": "string",
"total": 0
},
"genres": [
"Prog rock",
"Grunge"
],
"href": "string",
"id": "string",
"images": [
{
"url": "https://i.scdn.co/image/ab67616d00001e02ff9ca10b55ce82ae553c8228",
"height": 300,
"width": 300
}
],
"name": "string",
"popularity": 0,
"type": "artist",
"uri": "string"
}
],
"available_markets": [
"string"
],
"disc_number": 0,
"duration_ms": 0,
"explicit": false,
"external_ids": {
"isrc": "string",
"ean": "string",
"upc": "string"
},
"external_urls": {
"spotify": "string"
},
"href": "string",
"id": "string",
"is_playable": false,
"linked_from": {},
"restrictions": {
"reason": "string"
},
"name": "string",
"popularity": 0,
"preview_url": "string",
"track_number": 0,
"type": "track",
"uri": "string",
"is_local": false
}
📌 정리
이번주에는 개발 프로세스에 대해 알고, 프론트엔드와 백엔드의 역할과 다루는 프레임워크, 언어 등을 배웠습니다. 기존에는 백엔드 개발에 대해서만 조금 이해하고 있었는데요. 프론트엔드는 백엔드에 API를 통해 화면에 보여줄 데이터를 요청하고, 응답받아 화면에 뿌린다라고만 알고 있었는데, 이번 과제를 하면서 프론트엔드 단에서 어떤 언어로, 어떻게 코드를 짜는지 구체적으로 배울 수 있었던 시간이었습니다.
적극적인 피드백은 언제나 환영입니다:)
