과제 1: 랜딩 페이지 분석 및 구조 이해
1. 디즈니+의 head
head에 실제로 존재하는 코드 몇줄에 대해서 설명을 적어보았다.
- <meta charset="UTF-8">: 페이지의 문자 인코딩을 UTF-8로 설정합니다.
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
: 모바일 장치에서 페이지가 올바르게 표시되도록 뷰포트 설정을 지정합니다. - <title>디즈니+ - 스트리밍 서비스</title>: 페이지의 제목을 설정합니다.
- <link rel="stylesheet" href="styles.css">: 외부 스타일 시트 파일인 "styles.css"를 페이지에 연결합니다.
- <script src="script.js"></script>: 외부 자바스크립트 파일인 "script.js"를 페이지에 연결합니다.
그 외 많은 것들이 있지만 주로 속성이나 연동에 관련한 것들을 다루는 것을 알 수 있다.
1-1 head 부분의 JS
1. <script src="https://s.yimg.com/wi/ytc.js" async=""></script>
Yahoo의 YTC (Yahoo Tracking Code) 라이브러리를 로드하는 역할을 가진다.
YTC는 야후의 웹 추적 및 분석 도구로 사용된다. (웹 방문자의 동작 분석, 데이터 분석 및 트래픽 추적에 사용되는 것으로 보인다)
async 속성이 지정되어 있으므로 이 스크립트는 비동기적으로 작동되어 페이지 로딩 속도를 높이는 것으로 보인다.
2. <script type="text/javascript" async="" src="https://analytics.tiktok.com/i18n/pixel/static/main.MWI2MzlmMWJmMA.js" data-id="C8L28INLGCK8EVTNCFOG"></script>:
TikTok의 픽셀 코드를 로드하는 스크립트다.
TikTok의 픽셀 코드는 웹 페이지의 방문자 동작 및 광고 효과를 추적하는 데 사용된다.
async 속성이 지정되어 있으며, src 속성에는 TikTok 픽셀 코드가 위치한 URL이 포함되어 있는 것을 알 수 있다.
2. 디즈니+의 body
html의 body에는 header, nav, section, aside, footer 등 위에서 아래로 가는 뼈대의 느낌이다.
2-1. body -header
아래는 코드의 예시이다.
요소 내부에는 로고, 네비게이션 링크, 회원 가입과 로그인 버튼을 포함하고 있다.
각 요소는 클래스를 이용하여 스타일링이 적용되고 있는 걸 알 수 있다.
또한 위와 같이 css로 font, size, style 등을 지정하는 것을 알 수 있다.
2-2. body - main
body의 main에서는 <div>요소에 섹션으로 감싸져있다.
여기서 나타내는 기능들에 대해서 간략하게 정리하겠다.
- 웹페이지 최적화 관련 데이터
- 섹션의 영역들을 다루며, 각종 클래스와 데이터 속성 및 스타일링
- 크기와 정렬을 제어
- 각종 이미지(로고 등), 구독 안내 메시지(구독을 시작하려면 이메일 주소를 입력하세요) 표현
- 이메일 구독 폼(클래스, 액션, 메서드, ID 등의 속성)
css 즉 style의 요소는 위처럼 font, size, style 등 구성 되어있다.
2-3. body - main(하단 section)
랜딩페이지의 하단 부분이다(footer X)
위의 요소와 비슷하기에 이정도로 넘어가겠다.
3. 디즈니+의 footer
일반적으로 footer 부분에는 록, 소셜 미디어 링크, 저작권 정보, 추가 정보 등이 들어간다.
디즈니+에는 아래와 같은 요소들이 들어가 있다.
footer 부분 소스코드에는 정렬방식, 크기 제어, 행렬구조, 소셜 미디어 링크 등이 나와있다.
span의 요소는 텍스트 스타일링을 위해 사용되고 있다.
마찬가지로 css(style)도 지정이 되어있다.
과제 2: 서비스 유형별 장단점 분석 및 확장 아이디어 구상
금융 앱의 선구자 toss의 '원 앱' 서비스 유형에 대해서 장단점을 정리해보려고 한다.
기존 금융 앱은 다른 서비스를 이용하려면 그게 다 다른 앱을 다운을 받아야했을 만큼 복잡했다.
즉 하나의 앱에는 하나의 기능만이 존재한다는 것을 탈피하고, 하나의 앱에서 다양한 기능을 제공한다는 것이다.
이 기능에 대해서 장단점을 나열해보자.
장점
- 분산되었던 서비스에 대한 사용자의 쉬운 접근성
- 하나의 앱 안에서 다양한 고객의 욕구를 채워줌
- 새로운 서비스 출시 후 신규 고객 유치, 확보 용이
- 서비스마다 발생했던 회사가 필요 없어짐
단점
- 각 서비스의 내비게이션이 미흡하다면 사용자는 오히려 반감이 생길 수 있음
- 서비스 규모에 따라서 전체적인 속도 저하 가능
- 고객은 원하지 않더라도 그 기능을 제공을 받을 수 있음(반강제)
- 한가지의 기능의 오류가 전체적인 오류를 야기할 수 있음
서비스 확장
여러가지로 분산되어 있는 앱들(증권, 금융)을 합친 것처럼 비슷한 것들을 '원 앱'의 형태로 합쳐야 한다고 생각한다.
그런데 과연 '원 앱'을 유지하는 것이 좋을까? 내 생각은 '그렇다'이다.
시간이 지날수록 기술은 고도화가 되고 있고, 데이터 관리가 용이해지고 있다.
기술을 잘 활용하고, 각 기능을 유기적으로 연동시킨다면 위에 나열한 단점들은 다 사라질 것 같다.
실제로 토스는 MSA(마이크로서비스아키텍처)로 구성되어 있는 서버가 많은데
서비스별로 쪼개지는 구조의 서버를 갖추고있기 때문에 '원 앱'의 단점을 어느정도 상쇄시키고 있다.
앞으로 더욱 좋은 기능이 나올 것이 당연한데 '원 앱'을 사용하지 않을 이유가 있을까?
과제 3: Open API 탐색 및 활용
API의 작동법
SOAP API
이 API는 단순 객체 접근 프로토콜을 사용합니다. 클라이언트와 서버는 XML을 사용하여 메시지를 교환합니다. 과거에 더 많이 사용되었으며 유연성이 떨어지는 API입니다.
RPC API
이 API를 원격 프로시저 호출이라고 합니다. 클라이언트가 서버에서 함수나 프로시저를 완료하면 서버가 출력을 클라이언트로 다시 전송합니다.
Websocket API
Websocket API는 JSON 객체를 사용하여 데이터를 전달하는 또 다른 최신 웹 API 개발입니다. WebSocket API는 클라이언트 앱과 서버 간의 양방향 통신을 지원합니다. 서버가 연결된 클라이언트에 콜백 메시지를 전송할 수 있어 REST API보다 효율적입니다.
REST API
오늘날 웹에서 볼 수 있는 가장 많이 사용되고 유연한 API입니다. 클라이언트가 서버에 요청을 데이터로 전송합니다. 서버가 이 클라이언트 입력을 사용하여 내부 함수를 시작하고 출력 데이터를 다시 클라이언트에 반환합니다.
API 작동 구조 알아보기
API의 작동되는 구조를 알기 위해서 직접 API를 가져와서 값을 뽑아보았습니다.
https://openweathermap.org/api
q값에 city name / appid에 키값을 넣으면 된다.
잘 작동되는 것을 알 수 있다.
외부 url을 통해서 json으로 날씨 값을 받아와보았다.
api가 어떻게 값을 주고받는지에 대해서 알아보았습니다.
'Code states PMB' 카테고리의 다른 글
| [코드스테이츠 18기] 디즈니+의 유저 스토리 / Jira (0) | 2023.05.25 |
|---|---|
| 코드스테이츠 18기 5~6주차 회고 (0) | 2023.05.16 |
| [코드스테이츠 18기] 무신사와 데이터 (0) | 2023.05.11 |
| [코드스테이츠 18기] 무신사와 A/B테스트 (0) | 2023.05.02 |
| 코드스테이츠 2~4주차 회고 (0) | 2023.04.28 |