<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0">
  <channel>
    <title>꿀벌이</title>
    <link>https://honeybee8989.tistory.com/</link>
    <description></description>
    <language>ko</language>
    <pubDate>Tue, 16 Jun 2026 16:43:49 +0900</pubDate>
    <generator>TISTORY</generator>
    <ttl>100</ttl>
    <managingEditor>꿀벌입니다</managingEditor>
    <item>
      <title>[코드스테이츠 PMB 14기 W7D3] 라이엇 게임즈 API</title>
      <link>https://honeybee8989.tistory.com/35</link>
      <description>&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;내가 라이엇 게임즈의 리그 오브 레전드라는 게임을 할 때 정보를 얻기 위해 종종 이용하는 사이트에서 이런 메시지를 본적이 여러 번 있었다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;802&quot; data-origin-height=&quot;235&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/6Blfj/btrOlWBfzjr/IhvLeFO4ndkgQfQz6sNV10/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/6Blfj/btrOlWBfzjr/IhvLeFO4ndkgQfQz6sNV10/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/6Blfj/btrOlWBfzjr/IhvLeFO4ndkgQfQz6sNV10/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F6Blfj%2FbtrOlWBfzjr%2FIhvLeFO4ndkgQfQz6sNV10%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;802&quot; height=&quot;235&quot; data-origin-width=&quot;802&quot; data-origin-height=&quot;235&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;단순하게 라이엇의 서버가 불안정하다고 이해하고 있었지만, 오늘 수업자료를 통해 API를 배움으로써 위 메시지가 어떤 의미를 뜻하는지 대략적으로 알게 되었다. 먼저 오늘 내가 배운 API가 무엇인지 정의를 하도록 하겠다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;&lt;b&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;API란 무엇인가&lt;/span&gt;&lt;/b&gt;&lt;/h3&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;API는 Application Programming Interface의 약자이며, 사용자가 특정 서비스로부터 데이터를 주고 받도록 중간다리 역할을 한다. 이해를 돕기 위해 아래 그림을 보도록 하자.&amp;nbsp;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;1280&quot; data-origin-height=&quot;672&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/qckyU/btrOlWBTMop/KhHcA8ovOvuLBdblUbOI80/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/qckyU/btrOlWBTMop/KhHcA8ovOvuLBdblUbOI80/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/qckyU/btrOlWBTMop/KhHcA8ovOvuLBdblUbOI80/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FqckyU%2FbtrOlWBTMop%2FKhHcA8ovOvuLBdblUbOI80%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1280&quot; height=&quot;672&quot; data-origin-width=&quot;1280&quot; data-origin-height=&quot;672&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;위와 같이 사용자가 어플리케이션 B와 소통을 하기 위해&amp;nbsp; API를 거친다. 여기서 API가 하는 일은 다음과 같다:&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;정보 교환을 위해 이용되는 기술을 정의하고, 사용자가 어플리케이션으로부터 어떻게 데이터를 받을지 결정한다.&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;사용자와 어플리케이션의 소통할 수 있도록 인터페이스 역할을 한다.&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;어떻게 보면 API는 일종의 계약이라고도 할 수 있다. 이 계약은 사용자가 애플리케이션으로부터 &lt;b&gt;어떤 명령을 수행할 수 있는지, 어떤 명령어를 입력 할 수 있는지, 어떤 데이터를 받을 수 있는지&lt;/b&gt;에 대한 내용들이 정의되어 있다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;앞서 말했듯이, 오늘은 라이엇 게임즈가 제공하는 API를 분석하여 우리가 어떤 명령을 수행하여, 어떤 데이터를 받을 수 있는지 알아보도록 하겠다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style2&quot; /&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h2 data-ke-size=&quot;size26&quot;&gt;&lt;b&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;라이엇 게임즈의 API&lt;/span&gt;&lt;/b&gt;&lt;/h2&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;먼저 라이엇 게임즈가 자사의 API를 왜 공개하였는지에 대해서 설명하도록 하겠다. &lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;라이엇 게임즈는 Open API를 통해 게임 관련 소프트웨어 개발자들에게 지정된 데이터를 액세스 할 수 있도록 해준다. 이런 데이터를 통해 개발자들은 게임 관련 소프트웨어를 개발하고, 유저들에게 게임 자체에서 볼 수 없거나, 보기 불편한 데이터를 유저들이 보기 쉽게 가공하여 제공한다. 이렇게 라이엇 게임즈의 API를 활용하여 제작된 서비스가 OP.GG라고 볼 수 있다.&amp;nbsp;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;587&quot; data-origin-height=&quot;189&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/qnuD1/btrOlKaZ1o3/CsD5qMIwCALOLEpbRBoei0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/qnuD1/btrOlKaZ1o3/CsD5qMIwCALOLEpbRBoei0/img.png&quot; data-alt=&quot;OP.GG가 제공하는 데이터 예시&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/qnuD1/btrOlKaZ1o3/CsD5qMIwCALOLEpbRBoei0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FqnuD1%2FbtrOlKaZ1o3%2FCsD5qMIwCALOLEpbRBoei0%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;587&quot; height=&quot;189&quot; data-origin-width=&quot;587&quot; data-origin-height=&quot;189&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;OP.GG가 제공하는 데이터 예시&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;Open API를 통해 라이엇 게임즈는 본인들이 직접 개발하지 않아도, 다른 회사들이 이런 서비스를 직접 제공한다. 물론 라이엇 게임즈가 이런 서비스를 직접 개발할 수 있지만, 오히려 API를 공개함으로써 여기에 드는 인력과 자원을 아낄 수가 있는 거다. 그리고 API를 사용하는 서비스에게 API 사용료를 청구하여 수익을 창출할 수도 있다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style1&quot; /&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;먼저 라이엇 게임즈의 API는 Riot Games Developer Portal에서 API Key를 부여 받은 뒤 사용할 수 있다. 이렇게 API Key를 부여받은 사용자는 라이엇 게임즈의 API를 사용할 수 있으며, 라이엇 게임즈는 해당 사용자의 API Key를 통해 API로부터 어떤 데이터를 활용하는지 측정할 수 있다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;오늘 교육에서 배운바로는&lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;b&gt;개발자 API와 개인 API&lt;/b&gt;가 구분된다고 들었는데, 라이엇도 마찬가지로 개인 API Key/소규모 개발팀 API Key/대규모 개발팀 API Key 등으로 구분한 걸로 봐서는 특정 그룹에게는 API 사용 시 금액을 청구할 거 같다는 생각이 들었다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;이제 라이엇 API가 어떻게 구성되어있는지 알아보도록 하겠다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;1897&quot; data-origin-height=&quot;791&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/Ko9Dk/btrOlOREOeQ/yzmiFqdfyDWykKwF6qGnb0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/Ko9Dk/btrOlOREOeQ/yzmiFqdfyDWykKwF6qGnb0/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/Ko9Dk/btrOlOREOeQ/yzmiFqdfyDWykKwF6qGnb0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FKo9Dk%2FbtrOlOREOeQ%2FyzmiFqdfyDWykKwF6qGnb0%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1897&quot; height=&quot;791&quot; data-origin-width=&quot;1897&quot; data-origin-height=&quot;791&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;화면에 보이는 바와 같이, 좌측에 API로 얻을 수 있는 정보를 카테고리별로 구분해 놓았다. 예시로 Hide on bush라는 리그 오브 레전드 유저의 정보를 찾아보도록 하겠다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;1577&quot; data-origin-height=&quot;254&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/meTnE/btrOjyWuR65/sdXAJQ1hR8xig6peDLyjz0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/meTnE/btrOjyWuR65/sdXAJQ1hR8xig6peDLyjz0/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/meTnE/btrOjyWuR65/sdXAJQ1hR8xig6peDLyjz0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FmeTnE%2FbtrOjyWuR65%2FsdXAJQ1hR8xig6peDLyjz0%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1577&quot; height=&quot;254&quot; data-origin-width=&quot;1577&quot; data-origin-height=&quot;254&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;위 화면과 같이 SUMMONER-V4(게임언어로 유저라는 뜻)라는 섹션으로 들어와 우측에 있는 각 API에서 내가 얻을 수 있는 정보가 무엇이 있는지 찾아보았다. 해당 유저의 계정 ID는 알 수가 없고, 유저명만 알고 있었기 때문에 2번째 항목으로 들어갔다. 그리고 해당 항목의 앞부분이 GET이라고 적혀 있는 걸로 봐서, 라이엇 게임즈의 API는 REST API인걸 알 수 있었으며 데이터를 불러오는 행동을 한다는 점도 확인할 수 있었다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imagegridblock&quot;&gt;
  &lt;div class=&quot;image-container&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/cdTIKs/btrOlJQBJH4/wWTcViwNhxQqZt5g3t4KXk/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/cdTIKs/btrOlJQBJH4/wWTcViwNhxQqZt5g3t4KXk/img.png&quot; data-origin-width=&quot;1523&quot; data-origin-height=&quot;487&quot; data-is-animation=&quot;false&quot; style=&quot;width: 50.5751%; margin-right: 10px;&quot; data-widthpercent=&quot;51.17&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/cdTIKs/btrOlJQBJH4/wWTcViwNhxQqZt5g3t4KXk/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcdTIKs%2FbtrOlJQBJH4%2FwWTcViwNhxQqZt5g3t4KXk%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1523&quot; height=&quot;487&quot;/&gt;&lt;/span&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/cLKxQ3/btrOmr2JJWJ/owrg1rvoTW1lQBHKkVJEz1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/cLKxQ3/btrOmr2JJWJ/owrg1rvoTW1lQBHKkVJEz1/img.png&quot; data-origin-width=&quot;1519&quot; data-origin-height=&quot;509&quot; data-is-animation=&quot;false&quot; style=&quot;width: 48.2621%;&quot; data-widthpercent=&quot;48.83&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/cLKxQ3/btrOmr2JJWJ/owrg1rvoTW1lQBHKkVJEz1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcLKxQ3%2FbtrOmr2JJWJ%2Fowrg1rvoTW1lQBHKkVJEz1%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1519&quot; height=&quot;509&quot;/&gt;&lt;/span&gt;&lt;/div&gt;
&lt;/figure&gt;
&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;1518&quot; data-origin-height=&quot;135&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/mczKq/btrOkcyY5ZI/eEtfiDRDirKb40MDxmtL8k/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/mczKq/btrOkcyY5ZI/eEtfiDRDirKb40MDxmtL8k/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/mczKq/btrOkcyY5ZI/eEtfiDRDirKb40MDxmtL8k/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FmczKq%2FbtrOkcyY5ZI%2FeEtfiDRDirKb40MDxmtL8k%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1518&quot; height=&quot;135&quot; data-origin-width=&quot;1518&quot; data-origin-height=&quot;135&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;좌측 상단 화면의 RESPONSE CLASSES 통해 우리는 특정 유저의 유저명을 입력하면 어떤 데이터를 받을 수 있는지 정의되어있다. 우측 상단 화면의 RESPONSE ERRORS는 입력값에 따른 응답 오류 값들이 정의되어 있다. 마지막으로 하단에 PATH PARAMETERS 섹션은 우리가 인풋 데이터를 입력할 수 있는 곳이다. 이제 Hide on bush라는 유저명을 입력하여 어떤 정보가 나오는지 보도록 하겠다.&lt;/span&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;1519&quot; data-origin-height=&quot;725&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bNItO6/btrOmdXTqtx/2cVkf5BSTI5IvyDjQuTgRk/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bNItO6/btrOmdXTqtx/2cVkf5BSTI5IvyDjQuTgRk/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bNItO6/btrOmdXTqtx/2cVkf5BSTI5IvyDjQuTgRk/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbNItO6%2FbtrOmdXTqtx%2F2cVkf5BSTI5IvyDjQuTgRk%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1519&quot; height=&quot;725&quot; data-origin-width=&quot;1519&quot; data-origin-height=&quot;725&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;첫 번째 RESPONSE CODE는 200이라고 나와있었다. 200이 무슨 의미인지 개발자 포털에서 찾아봤더니, 아래와 같이 설명이 되어있었다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;802&quot; data-origin-height=&quot;90&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/ckTGwO/btrOkdkrxBg/DPVdPdrR6xfkHz5tWHFohK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/ckTGwO/btrOkdkrxBg/DPVdPdrR6xfkHz5tWHFohK/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/ckTGwO/btrOkdkrxBg/DPVdPdrR6xfkHz5tWHFohK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FckTGwO%2FbtrOkdkrxBg%2FDPVdPdrR6xfkHz5tWHFohK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;802&quot; height=&quot;90&quot; data-origin-width=&quot;802&quot; data-origin-height=&quot;90&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;2XX response codes는 API response body에 요청한 데이터가 JSON 형식으로 출력되었다고 설명되어있었다. 따라서, 내가 입력한 인풋 값은 정상이라고 해석이 되었다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;위 화면의 RESPONSE BODY에 생성된 데이터는 id, accountId, puuid 등 RESPONSE CLASSES에 나온 데이터들이 순서는 다르지만 동일하게 출력되어 있었다. 이런 정보들은 일반 유저들은 모르지만, 라이엇 게임즈의 API를 사용하는 개발자들에게는 상황에 따라 필요할 수 있는 정보라고 여겨졌다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;이번엔 해당 유저의 티어를 알아보기 위해, 다시 API의 메인화면으로 돌아가서 관련 있어 보이는 섹션을 모두 눌러보았고, LEAGUE-V4가 순위 정보를 알려준다는 걸 알 수 있었다. 그리고 아래 화면의 tier와 rank라는 데이터를 통해 해당 유저의 순위를 찾을 수 있었다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;1560&quot; data-origin-height=&quot;37&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/y7ANx/btrOlJC86o3/6EKFHqz5D3tkwa8PpoLOqk/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/y7ANx/btrOlJC86o3/6EKFHqz5D3tkwa8PpoLOqk/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/y7ANx/btrOlJC86o3/6EKFHqz5D3tkwa8PpoLOqk/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fy7ANx%2FbtrOlJC86o3%2F6EKFHqz5D3tkwa8PpoLOqk%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1560&quot; height=&quot;37&quot; data-origin-width=&quot;1560&quot; data-origin-height=&quot;37&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;1521&quot; data-origin-height=&quot;698&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/cXa33D/btrOlVcaIYh/8nS0zcKbLDoHVVX2Z9R9G0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/cXa33D/btrOlVcaIYh/8nS0zcKbLDoHVVX2Z9R9G0/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/cXa33D/btrOlVcaIYh/8nS0zcKbLDoHVVX2Z9R9G0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcXa33D%2FbtrOlVcaIYh%2F8nS0zcKbLDoHVVX2Z9R9G0%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1521&quot; height=&quot;698&quot; data-origin-width=&quot;1521&quot; data-origin-height=&quot;698&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;이제 path parameters에 가서 아래와 같이 유저명을 입력하였는데, response code 400이 출력되었다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;1516&quot; data-origin-height=&quot;121&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bKnJxB/btrOkcsdToT/8eBOJJVaKcBDQ9kY61gkG0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bKnJxB/btrOkcsdToT/8eBOJJVaKcBDQ9kY61gkG0/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bKnJxB/btrOkcsdToT/8eBOJJVaKcBDQ9kY61gkG0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbKnJxB%2FbtrOkcsdToT%2F8eBOJJVaKcBDQ9kY61gkG0%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1516&quot; height=&quot;121&quot; data-origin-width=&quot;1516&quot; data-origin-height=&quot;121&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;1519&quot; data-origin-height=&quot;556&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/6U8Nb/btrOmsHnfIh/VQ3aLDk2UhoDfEKMhKO8AK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/6U8Nb/btrOmsHnfIh/VQ3aLDk2UhoDfEKMhKO8AK/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/6U8Nb/btrOmsHnfIh/VQ3aLDk2UhoDfEKMhKO8AK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F6U8Nb%2FbtrOmsHnfIh%2FVQ3aLDk2UhoDfEKMhKO8AK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1519&quot; height=&quot;556&quot; data-origin-width=&quot;1519&quot; data-origin-height=&quot;556&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;알고 보니 해당 API는 우리가 흔히 알고 있는 유저명을 입력하는 게 아니라 encryptedSummonerId라는 값을 입력해야 정상적으로 아웃풋이 생성되는 것이었다. 따라서, 첫 번째 예시에서 생성되었던 encryptedSummonerId를 가져와 다시 입력을 했다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;1519&quot; data-origin-height=&quot;403&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/puPkQ/btrOncjSYj0/NIzW3j5U5hhp1HXBa2KOok/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/puPkQ/btrOncjSYj0/NIzW3j5U5hhp1HXBa2KOok/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/puPkQ/btrOncjSYj0/NIzW3j5U5hhp1HXBa2KOok/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FpuPkQ%2FbtrOncjSYj0%2FNIzW3j5U5hhp1HXBa2KOok%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1519&quot; height=&quot;403&quot; data-origin-width=&quot;1519&quot; data-origin-height=&quot;403&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;위와 같이 정상적인 데이터가 출력되었고, 해당 유저의 티어를 알 수 있게 되었다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style2&quot; /&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;이제까지 라이엇 게임즈의 API를 통해 어떤 데이터를 얻을 수 있는지 알아보았다. 하지만 내가 API에서 볼 수 있는 자료와 OP.GG에서 볼 수 있는 자료에는 분명한 차이가 있었다. 내가 추측하기로는 라이엇에서 제공하는 한정된 데이터를 바탕으로 OP.GG에서 AI 러닝을 통해 자체적으로 유용한 데이터를 더 만든다고 생각되었다. 아니면 대형회사들에게는 더 많은 정보를 받을 수 있는 그들만의 API Key가 있을지도 모른다. 지난 6개월간 궁금했던 점에 대해 오늘 배우게 되어서 나름 재밌는 시간이었다.&lt;/span&gt;&lt;/p&gt;</description>
      <category>PMB부트캠프#코드스테이츠</category>
      <author>꿀벌입니다</author>
      <guid isPermaLink="true">https://honeybee8989.tistory.com/35</guid>
      <comments>https://honeybee8989.tistory.com/35#entry35comment</comments>
      <pubDate>Tue, 11 Oct 2022 15:49:31 +0900</pubDate>
    </item>
    <item>
      <title>[코드스테이츠 PMB 14기 W7D2] 앱의 4가지 형태</title>
      <link>https://honeybee8989.tistory.com/34</link>
      <description>&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;오늘은 앱의 4가지 형태에 대해서 알아보고 각각의 특징과 장단점을 정리해 보는 시간이다. 일단 앱의 4가지 형태가 무엇이 있는지 알아보겠다. 아래는 오늘 교육 자료에서 나온 앱의 4가지 형태를 간략하게 설명한 내용이다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;네이티브 앱(Native App) - 모바일 운영체제에 최적화된 언어를 사용해 개발한 앱으로서 안드로이드, iOS에서 제공하는 SDK를 사용해 개발한다.&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;모바일 웹(Mobile Web) - 모바일 기기에서 사용하기 편한 방식으로 개발된 '웹 페이지' 기반 서비스를 의미한다. 웹브라우저에서 동작한다.&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;웹 앱(Web App) - 앱의 형태를 가지고 있지만 실제 내용은 대부분 웹에서 구현해 보여주는 페이지다. 네이티브 앱에 비해 간단하게 구현이 가능하다.&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;하이브리드 앱(Hybrid App) - 네이티브 앱의 구조로 되어 있으나, 일부 기능들을 웹으로 구현해 개발하는 방식이다. 웹의 기능을 쉽게 연결할 수 있는 특징이 있다.&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;그렇다면 이제 각 종류에 따라 어떠한 특징과 장단점이 있는지 알아보고, 예시를 통해 이해가 되도록 설명을 해보겠다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style2&quot; /&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;&lt;b&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;네이티브 앱(Native Apps)&lt;/span&gt;&lt;/b&gt;&lt;/h3&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;네이티브 앱은 우리가 일반적으로 iOS나 안드로이드에서 흔히 사용하는 카카오톡과 포켓몬고 같은 앱을 말하며, &lt;b&gt;우리가 핸드폰에서 사용하는 대부분의 앱이 네이티브 앱&lt;/b&gt;이라고 말할 수 있다. 네이티브앱은 지정된 OS에서만 작동하며, 앱스토어나 구글 플레이 등 앱 다운로드 플랫폼에서 다운로드하여 설치를 해야 실행이 가능하다. 같은 OS라도 구동 환경이 다를 수 있기 때문에, 개발자들은 여러 디바이스를 고려해서 최적화된 앱을 유저에게 제공한다.&amp;nbsp;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imagegridblock&quot;&gt;
  &lt;div class=&quot;image-container&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/cvD1iE/btrN68ccbz0/KgwRIjCBeB2J4EWlYyhbRK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/cvD1iE/btrN68ccbz0/KgwRIjCBeB2J4EWlYyhbRK/img.png&quot; data-origin-width=&quot;512&quot; data-origin-height=&quot;512&quot; data-is-animation=&quot;false&quot; style=&quot;width: 38.9359%; margin-right: 10px;&quot; data-widthpercent=&quot;39.39&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/cvD1iE/btrN68ccbz0/KgwRIjCBeB2J4EWlYyhbRK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcvD1iE%2FbtrN68ccbz0%2FKgwRIjCBeB2J4EWlYyhbRK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;512&quot; height=&quot;512&quot;/&gt;&lt;/span&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bG3va2/btrN5wqOgtG/YkOKs4qbUzC6sWtHKPfCo0/img.jpg&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bG3va2/btrN5wqOgtG/YkOKs4qbUzC6sWtHKPfCo0/img.jpg&quot; data-origin-width=&quot;680&quot; data-origin-height=&quot;442&quot; data-is-animation=&quot;false&quot; style=&quot;width: 59.9013%;&quot; data-widthpercent=&quot;60.61&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bG3va2/btrN5wqOgtG/YkOKs4qbUzC6sWtHKPfCo0/img.jpg&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbG3va2%2FbtrN5wqOgtG%2FYkOKs4qbUzC6sWtHKPfCo0%2Fimg.jpg&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;680&quot; height=&quot;442&quot;/&gt;&lt;/span&gt;&lt;/div&gt;
  &lt;figcaption&gt;네이티브 앱 예시&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;&lt;b&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;네이티브 앱의 장점&lt;/span&gt;&lt;/b&gt;&lt;/h4&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;4가지 형태 중 가장 속도가 빠르고 안정적이며 유저와의 상호작용이 가장 원할하다.&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;핸드폰의 여러 하드웨어 기능(카메라, 마이크, 컴퍼스, 가속도계, 스와이프 기능)들과 원활한 상호작용이 가능하다.&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;푸시 알림 사용이 가능하다.&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;핸드폰의 OS에 최적화된 UI를 제공한다.&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;앱스토어/구글플레이 등을 통해 앱의 품질에 대해 쉽게 알 수 있다.&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;&lt;b&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;네이티브 앱의 단점&lt;/span&gt;&lt;/b&gt;&lt;b&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;/span&gt;&lt;/b&gt;&lt;/h4&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;iOS와 Android 등 각 OS에 대한 앱을 따로 개발해야 한다. (iOS: Objective-C, Swift / Android: Java)&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;따라서, 여러 OS에 출시를 희망할 경우 개발에 대한 시간과 비용이 추가적으로 요구된다.&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;앱 업데이트가 필요할 시 OS마다 업데이트를 따로 진행해야 한다.&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style2&quot; /&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;&lt;b&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;하이브리드 앱 (Hybrid Apps)&lt;/span&gt;&lt;/b&gt;&lt;/h3&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;이번 과제를 통해 배운 유형 중 가장 이해가 힘들었고, 근 몇 년간 많은 발전을 해온 하이브리드 앱에서 다뤄보겠다. 처음 과제를 작성할 때만 해도, 내가 이해했던 하이브리드 앱의 개념은 아래와 같았다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;blockquote data-ke-style=&quot;style3&quot;&gt;네이티브 앱과 같이 다운로드하여 OS에서 구동하지만, 사실상 속 내용은 웹 앱과 동일하다. (웹 앱에 대해서는 뒤에서 설명하겠다.) 일반적으로 하이브리드 앱은 스타트업에서 많이 사용한다. 우리가 어떤 프로덕트를 개발할 때 사람들이 좋아하는지 아닐지는 제품을 출시하기 전까지는 알 수 없다. 따라서, 스타트업에서는 개발 시간과 비용이 비교적 적게 요구되는 하이브리드 앱을 출시해서 잠재 고객들이 MVP(Minimum Viable Product)를 경험하도록 한다.&lt;/blockquote&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;하지만 트위터, 페이스북, 스포티파이와 같은 앱이 모두 하이브리드 앱이라는 사실을 알고, 내가 완전히 잘못 이해했다는 걸 깨닫게 되었다. 단순히 눈으로 트위터, 페이스북을 봤을 때, &quot;이건 무조건 네이티브 앱이다&quot;라고 생각했지만, 하이브리드 앱의 기술 발전으로 인해 이제 네이티브나 하이브리드를 시각적으로 구분할 수 없다는 사실을 알게 되었다.&amp;nbsp;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;&lt;b&gt;하이브리드/네이티브 앱 개발에 사용되는 크로스 플랫폼(Cross Platform) 프레임워크&lt;/b&gt;&lt;/h4&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;위에서 네이티브 앱의 단점으로 각 OS에 대해서 다른 소스 코드로 개발해야만 하는 불편함을 언급했다. 이런 불편함을 해소하기 위해 2011년부터 여러 회사들이 크로스 플랫폼 프레임워크를 개발하기 시작했고, 대표적으로 구글의 플러터(Flutter), 페이스북의 리엑트 네이티브 (React Native), 마이크로소트의 닷넷 마우이(.Net Multi-platform App UI) 등이 있다. 크로스 플랫폼은 단순히 안드로이드와 iOS에 국한되지 않고 macOS와 윈도우와 같은 PC 운영체제에서도 한 번에 프로그래밍할 수 있는 기술이다. 이렇게 여러 플랫폼에서 하나의 언어로 프로그래밍 할 수 있는 장점을 가지고 있지만, 각 운영체제에 100% 최적화되지 않았기 때문에 성능이 떨어진다는 단점이 있다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;600&quot; data-origin-height=&quot;600&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/Y22Zy/btrN9q4xjtW/DetXY6nKp3WXt5VsLBmxUK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/Y22Zy/btrN9q4xjtW/DetXY6nKp3WXt5VsLBmxUK/img.png&quot; data-alt=&quot;크로스 플랫폼 프레임워크 예시 (출처: 혼공)&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/Y22Zy/btrN9q4xjtW/DetXY6nKp3WXt5VsLBmxUK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FY22Zy%2FbtrN9q4xjtW%2FDetXY6nKp3WXt5VsLBmxUK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;600&quot; height=&quot;600&quot; data-origin-width=&quot;600&quot; data-origin-height=&quot;600&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;크로스 플랫폼 프레임워크 예시 (출처: 혼공)&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;&lt;b&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;하이브리드 앱의 특징과 장단점&lt;/span&gt;&lt;/b&gt;&lt;/h4&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;일단 오늘 하이브리드 앱에 대해서 얘기할 때, 요즘 트렌드가 그렇듯이 크로스 플랫폼 프레임워크로 개발된다는 가정하에 이야기를 진행하겠다. 하이브리드 앱의 특징은 &lt;b&gt;앱의 외형을 지니고 있지만, 사실 우리가 보는 화면은 웹 화면&lt;/b&gt;이라는 것이다. 이걸 구현하기 위해 하이브리드 앱은 웹 뷰(Web View)라는 요소를 사용하여 앱이 지정한 주소를 볼 수 있도록 한다. 인터넷에서 아주 좋은 예시가 있어 아래에 첨부하였다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;617&quot; data-origin-height=&quot;353&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/blDR4z/btrOeSlICYb/jPRIY9GTEGpQ5FGP3PKkGk/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/blDR4z/btrOeSlICYb/jPRIY9GTEGpQ5FGP3PKkGk/img.png&quot; data-alt=&quot;하이브리드 앱 구현 원리 (출처: 혼공)&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/blDR4z/btrOeSlICYb/jPRIY9GTEGpQ5FGP3PKkGk/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FblDR4z%2FbtrOeSlICYb%2FjPRIY9GTEGpQ5FGP3PKkGk%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;617&quot; height=&quot;353&quot; data-origin-width=&quot;617&quot; data-origin-height=&quot;353&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;하이브리드 앱 구현 원리 (출처: 혼공)&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;이제 하이브래드 앱의 화면은 웹에서 가져온다는 사실을 이제 알게 되었다. 그리고 화면만 웹에서 가져온 것뿐이지, 기본적인 형태는 앱의 형태를 지니고 있기 때문에, 네이티브의 장점으로 앞에서 언급한 핸드폰의 하드웨어 기능도 문제없이 사용할 수 있다. &lt;/span&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;/span&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;또한, 크로스 플랫폼 프레임워크로 제작하기 때문에 코드 작성과 테스트를 한 가지 코딩 언어로 진행하고, 마지막에 iOS나 Android에 맞게 옷만 잘 입혀서 나가게 해 주면 된다.&amp;nbsp;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;이제 장점과 단점을 알아보겠다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;table style=&quot;border-collapse: collapse; width: 100%; height: 215px;&quot; border=&quot;1&quot; data-ke-align=&quot;alignLeft&quot; data-ke-style=&quot;style1&quot;&gt;
&lt;tbody&gt;
&lt;tr style=&quot;height: 22px;&quot;&gt;
&lt;td style=&quot;width: 50%; text-align: center; height: 22px;&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;장점&lt;/b&gt;&lt;/span&gt;&lt;/td&gt;
&lt;td style=&quot;width: 50%; text-align: center; height: 22px;&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;단점&lt;/b&gt;&lt;/span&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr style=&quot;height: 193px;&quot;&gt;
&lt;td style=&quot;width: 50%; text-align: left; height: 193px;&quot;&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;어떤 OS에서도 작동한다&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;네이티브에 비해 개발이 빠르고, 비용이 적게 요구된다.&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;패치와 업데이트 적용이 수월하다&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;온라인/오프라인 구분없이 작동이 가능하다&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;네이티브 앱과 같이 모바일 기기의 하드웨어 기능을 사용할 수 있다&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/td&gt;
&lt;td style=&quot;width: 50%; text-align: left; height: 193px;&quot;&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;한쪽 OS로 개발이 치중 될 경우, 다른 OS에서는 그만큼 최적화 되지 않을 수 있다.&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;OS에 따라 GUI에서 차이가 있을 수 있다.&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;출시 전 각 OS와 모바일 기종에 따라 철저한 테스트를 진행해야 한다&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;&lt;b&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;모바일 웹&lt;/span&gt;&lt;/b&gt;&lt;/h3&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;모바일 웹에 대해서는 굳이 설명이 필요 없다고 생각한다. 흔히 우리가 핸드폰에서 크롬이나, 엣지 등 인터넷 브라우저로 웹 서핑을 할 때 보&lt;/span&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;는 화면을 모바일 웹이라고 한다.&amp;nbsp;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-filename=&quot;Screenshot_2022.10.10_19.50.04.093.png&quot; data-origin-width=&quot;1080&quot; data-origin-height=&quot;1920&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bPFNMH/btrN9jK5MNT/YXfZMfwPScbSkKCwKvHh70/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bPFNMH/btrN9jK5MNT/YXfZMfwPScbSkKCwKvHh70/img.png&quot; data-alt=&quot;모바일 웹 예시&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bPFNMH/btrN9jK5MNT/YXfZMfwPScbSkKCwKvHh70/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbPFNMH%2FbtrN9jK5MNT%2FYXfZMfwPScbSkKCwKvHh70%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;335&quot; height=&quot;596&quot; data-filename=&quot;Screenshot_2022.10.10_19.50.04.093.png&quot; data-origin-width=&quot;1080&quot; data-origin-height=&quot;1920&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;모바일 웹 예시&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;&lt;b&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;모바일 웹의 장단점&lt;/span&gt;&lt;/b&gt;&lt;/h4&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;table style=&quot;border-collapse: collapse; width: 100%; height: 215px;&quot; border=&quot;1&quot; data-ke-align=&quot;alignLeft&quot; data-ke-style=&quot;style1&quot;&gt;
&lt;tbody&gt;
&lt;tr style=&quot;height: 22px;&quot;&gt;
&lt;td style=&quot;width: 50%; height: 22px; text-align: center;&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;장점&lt;/b&gt;&lt;/span&gt;&lt;/td&gt;
&lt;td style=&quot;width: 50%; height: 22px; text-align: center;&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;단점&lt;/b&gt;&lt;/span&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr style=&quot;height: 193px;&quot;&gt;
&lt;td style=&quot;width: 50%; height: 193px;&quot;&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;설치가 필요 없이 브라우저를 통해 바로 접근이 가능하다&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;일반 웹사이트와 같이 HTML, CSS, Javascript로 개발 가능&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;웹 표준에만 맞추면 되기 때문에 업데이트가 편하다&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;검색엔진에서 자연스럽게 모바일 웹사이트로 접속 가능&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/td&gt;
&lt;td style=&quot;width: 50%; height: 193px;&quot;&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;기기의 하드웨어 기능을 100% 활용 할 수 없다&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;직접 URL을 입력하거나 검색엔진을 통해 들어가야 하기 때문에, 앱에 비해 접근성이 떨어진다.&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&amp;nbsp;&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;&lt;b&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;웹 앱&lt;/span&gt;&lt;/b&gt;&lt;/h3&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;웹 앱은 간단하게 말하면 우리가 모바일 기기에서 url을 입력하여 들어간 웹사이트가 앱의 형태를 지니고 있는 것을 말한다. 핸드폰 브라우저에서 gmail.com을 접속하면, 우리가 흔히 아는 웹사이트의 형태가 아닌 앱의 형태를 갖춘 걸 볼 수 있다. (아래 예시 참고)&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-filename=&quot;Screenshot_2022.10.10_20.08.34.843.png&quot; data-origin-width=&quot;1080&quot; data-origin-height=&quot;1920&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bFvW6M/btrN657JKP4/uw3AtbhgMv5yvjoTaMKEL0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bFvW6M/btrN657JKP4/uw3AtbhgMv5yvjoTaMKEL0/img.png&quot; data-alt=&quot;지메일 웹 앱 예시&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bFvW6M/btrN657JKP4/uw3AtbhgMv5yvjoTaMKEL0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbFvW6M%2FbtrN657JKP4%2Fuw3AtbhgMv5yvjoTaMKEL0%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;343&quot; height=&quot;610&quot; data-filename=&quot;Screenshot_2022.10.10_20.08.34.843.png&quot; data-origin-width=&quot;1080&quot; data-origin-height=&quot;1920&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;지메일 웹 앱 예시&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;&lt;b&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;웹 앱의 장단점&lt;/span&gt;&lt;/b&gt;&lt;/h4&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;table style=&quot;border-collapse: collapse; width: 100%; height: 215px;&quot; border=&quot;1&quot; data-ke-align=&quot;alignLeft&quot; data-ke-style=&quot;style1&quot;&gt;
&lt;tbody&gt;
&lt;tr style=&quot;height: 22px;&quot;&gt;
&lt;td style=&quot;width: 50%; height: 22px; text-align: center;&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;장점&lt;/b&gt;&lt;/span&gt;&lt;/td&gt;
&lt;td style=&quot;width: 50%; height: 22px; text-align: center;&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;단점&lt;/b&gt;&lt;/span&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr style=&quot;height: 193px;&quot;&gt;
&lt;td style=&quot;width: 50%; height: 193px;&quot;&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;OS와 기기 구분 없이 한가지 방식으로 개발 가능&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;일반 웹사이트와 같이 HTML, CSS, Javascript로 개발 가능&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;웹 표준에만 맞추면 되기 때문에 업데이트가 편하다&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;다운로드 할 필요없이 웹에서 앱과 같은 UI를 제공한다&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/td&gt;
&lt;td style=&quot;width: 50%; height: 193px;&quot;&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;성능 측면에서 앱에 비해 저조한 모습을 보인다&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;앱에 비해 보안성이 떨어진다&lt;/span&gt;&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;기기의 하드웨어 기능을 100% 활용 할 수 없다&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;직접 URL을 입력하거나 검색엔진을 통해 들어가야 하기 때문에, 앱에 비해 접근성이 떨어진다.&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style2&quot; /&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h2 data-ke-size=&quot;size26&quot;&gt;&lt;b&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;내가 PM이라면 어떤 형태의 앱을 사용할까?&lt;/span&gt;&lt;/b&gt;&lt;/h2&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;이제 내가 어떤 프로덕트의 PM이라고 가정하고, 기획하는 과정에서 어떤 형태의 앱을 쓸 수 있을지 생각해보려 한다. &lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;좋은 사업 아이디어가 있어 제품의 PMF을 확인하기 위해 초기 단계에서는 HTML, CSS, JavaScript를 사용하여 프론트엔드 개발이 비교적 간편한 웹 앱 혹은 모바일 웹을 만들어 일단 인터넷 상에 노출시키려 할 것이다. 또한, 서비스 초기에는 이용자가 많지 않기 때문에 작업용 pc를 서버로 활용하여 서비스를 구동하도록 할것이다.&amp;nbsp;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;span style=&quot;&quot;&gt;간단한 구성을 가진 앱을 출시한 뒤 사업의 발전 가능성과 이용자 증가가 눈에 보인다면, 슬슬 앱의 발전 방향을 정해야 할 것으로 생각한다. &lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;span style=&quot;&quot;&gt;&lt;/span&gt;&lt;span style=&quot;&quot;&gt;&lt;/span&gt;&lt;span style=&quot;&quot;&gt;개인적으로 아래와 같은 사항을 고려해야한다고 생각한다:&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;개발자가 어떤 방식의 앱 개발을 제일 잘하는지 알아야 한다.&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;우리가 제공하는 서비스의 기술적 특징이 무엇이 있는지 (예: 트래픽이 특정 시간대에 몰리는 서비스라면, 서버 트래픽을 잘 관리하는 기술 스택을 선택해야 한다)&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;제품 출시 기한은 언제인지 (기한이 임박했을 경우 빠르게 개발할 수 있는 하이브리드 앱을 고려 할 수 있다)&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;우리가 제품에서 원하는 기능을 구현할 수 있는 기술 스택인지 고려&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;서비스의 최적화를 위해 꼭 앱을 개발해야하는지 혹은 그냥 웹 앱/모바일 웹으로 진행해도 되는지 생각 해야한다.&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;현재 회사 인재풀로 원하는 앱을 개발 할 수 없을 경우, 어떻게 개발팀 인력을 증원할 지 고려&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;위에 대해서 고민한 뒤 방향이 정해졌다면 개발에 착수한다.&amp;nbsp;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style2&quot; /&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;오늘은 모바일 앱의 4가지 종류를 알아보았다. 단순히 이용자로써 이런 측면을 전혀 생각해보지 못했었는데, 리서치를 통해 많은 지식을 얻게 되어 유익한 시간이었다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;</description>
      <category>PMB부트캠프 #코드스테이츠</category>
      <author>꿀벌입니다</author>
      <guid isPermaLink="true">https://honeybee8989.tistory.com/34</guid>
      <comments>https://honeybee8989.tistory.com/34#entry34comment</comments>
      <pubDate>Fri, 7 Oct 2022 14:40:42 +0900</pubDate>
    </item>
    <item>
      <title>[코드스테이츠 PMB 14기 W7D1] 네이버 뉴스 페이지 분석</title>
      <link>https://honeybee8989.tistory.com/33</link>
      <description>&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;오늘은 HTML, CSS, JavaScript에 대해서 간략하게 배웠다. 웹 개발/디자인에는 전혀 지식이 없는터라 강의 자료를 통해 개념만 대충 이해했다 뿐이지, 크롬에서 F12를 눌러서 코드를 보면 뭐가 뭔지 도무지 알 수가 없다. 오늘 과제는 내가 선택한 랜딩페이지의 HTML/CSS/JavaScript 요소를 정리하고 분석하는 일이고, 따라서 사이트의 구성이 간단하게 여겨졌던 네이버 뉴스를 분석하기로 했다. 네이버 뉴스에 대해서는 별 다른 설명이 필요 없다고 생각하므로, 바로 페이지 레이아웃에 대해 얘기해보겠다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h2 data-ke-size=&quot;size26&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;네이버 뉴스 페이지 레이아웃&lt;/b&gt;&lt;/span&gt;&lt;/h2&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;아래 왼쪽은 네이버 뉴스의 랜딩 페이지를 캡쳐한 화면이고, 오른쪽은 랜딩 페이지의 레이아웃을 간소화한 그림이다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imagegridblock&quot;&gt;
  &lt;div class=&quot;image-container&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/kKGm4/btrNXWpm8Gy/dFB6dp6CoSwAmEj5jPAesK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/kKGm4/btrNXWpm8Gy/dFB6dp6CoSwAmEj5jPAesK/img.png&quot; data-origin-width=&quot;1920&quot; data-origin-height=&quot;2029&quot; data-is-animation=&quot;false&quot; style=&quot;width: 42.5262%; margin-right: 10px;&quot; data-widthpercent=&quot;43.03&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/kKGm4/btrNXWpm8Gy/dFB6dp6CoSwAmEj5jPAesK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FkKGm4%2FbtrNXWpm8Gy%2FdFB6dp6CoSwAmEj5jPAesK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1920&quot; height=&quot;2029&quot;/&gt;&lt;/span&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/SRRUy/btrNXkK5F9s/G7zMPP8u9Ts65HWFji5xNK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/SRRUy/btrNXkK5F9s/G7zMPP8u9Ts65HWFji5xNK/img.png&quot; data-origin-width=&quot;1664&quot; data-origin-height=&quot;1328&quot; data-is-animation=&quot;false&quot; style=&quot;width: 56.311%;&quot; data-widthpercent=&quot;56.97&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/SRRUy/btrNXkK5F9s/G7zMPP8u9Ts65HWFji5xNK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FSRRUy%2FbtrNXkK5F9s%2FG7zMPP8u9Ts65HWFji5xNK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1664&quot; height=&quot;1328&quot;/&gt;&lt;/span&gt;&lt;/div&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;대부분의 웹사이트와 같이 상단에 header 섹션이 위치해 있고, 가운데 main 섹션은 3개의 칼럼으로 나뉘어있다. 그리고 메인 섹션의 우측에는 작게 aside 섹션이 자리하고 있다. 마지막으로 하단에는 footer가 위치해 있다. 따라서, 크게 보면 총 3개의 섹션(header, main, footer)으로 나뉜 것을 알 수 있다. 물론 예외도 있겠지만, 오늘 과제를 정하기 위해 둘러본 7~8개 사이트들이 모두 이와 같은 레이아웃으로 구성되어 있었다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;&lt;b&gt;&lt;span&gt;HTML 이란?&lt;/span&gt;&lt;/b&gt;&lt;/h3&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;HTML(&lt;span style=&quot;color: #000000;&quot;&gt;HyperText Markup Language)은 웹페이지를 이루는 가장 기초적인 구성요소이며, 웹사이트의 여러 요소들의 의미와 구조를 정의할 때 사용하는 마크업 언어다. 우리가 글을 쓸 때 서론-본론-결론이 있듯이, HTML도 마찬가지로 비슷한 느낌의 구조로 작성할 수 있다. 이해를 돕기 위해 아래 그림을 보도록 하겠다.&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;1135&quot; data-origin-height=&quot;627&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/64yc6/btrNXk5qkHb/0KowdiONCdFEi3wjN8acL1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/64yc6/btrNXk5qkHb/0KowdiONCdFEi3wjN8acL1/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/64yc6/btrNXk5qkHb/0KowdiONCdFEi3wjN8acL1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F64yc6%2FbtrNXk5qkHb%2F0KowdiONCdFEi3wjN8acL1%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1135&quot; height=&quot;627&quot; data-origin-width=&quot;1135&quot; data-origin-height=&quot;627&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;span style=&quot;color: #000000;&quot;&gt;위에 DOCTYPE은 무시하고, 바로 &amp;lt;html&amp;gt;을 보도록 하자. &lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;span style=&quot;color: #000000;&quot;&gt;HTML 문서의 시작은 &amp;lt;html&amp;gt;로써, HTML 문서 내용이 아래에 이어진다. 그리고 HTML 문서가 모두 입력이 되었으면 마지막으로 &amp;lt;/html&amp;gt;을 입력하여 HTML 문서가 끝났다는 신호를 보낸다. 시작과 끝은 한번 밖에 있을 수 없으므로, &amp;lt;html&amp;gt;과 &amp;lt;/html&amp;gt;은 한 페이지에 한 번씩 밖에 나올 수 없다.&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;lt;head&amp;gt; 섹션은 문서의 메타데이터를 정의하는 곳이다. 따라서, 해당 섹션에 입력된 내용들은 페이지에 디스플레이 되지 않는다. 위의 예시와 같이 HTML 문서의 제목을 입력할 수도 있고, CSS와 script를 정의할 수 있다.&amp;nbsp;&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;lt;body&amp;gt; 섹션은 우리가 웹페이지를 이용할 때 눈으로 보게되는 내용들이 정의되는 항목이다. 앞서 언급한 페이지 레이아웃 요소 3가지(header, main, footer)가 모두 &amp;lt;body&amp;gt; 섹션 안에 입력된다.&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;span style=&quot;color: #000000;&quot;&gt;이해가 어느 정도 되었다면 이제 네이버 뉴스의 HTML은 어떻게 구성되어 있는지 몇 가지 요소를 골라서 알아보도록 하겠다.&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;&lt;b&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;네이버 뉴스의 HTML 구성 요소&lt;/span&gt;&lt;/b&gt;&lt;/h4&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;1008&quot; data-origin-height=&quot;134&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bETSJP/btrNXLBEz2Z/iTcofWeCmPSfakoousDJpK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bETSJP/btrNXLBEz2Z/iTcofWeCmPSfakoousDJpK/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bETSJP/btrNXLBEz2Z/iTcofWeCmPSfakoousDJpK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbETSJP%2FbtrNXLBEz2Z%2FiTcofWeCmPSfakoousDJpK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1008&quot; height=&quot;134&quot; data-origin-width=&quot;1008&quot; data-origin-height=&quot;134&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;span style=&quot;color: #000000;&quot;&gt;위는 HTML 문서를 최소화해서 head와 body만 보이게 축소한 화면이다. 앞서 말한대로, &amp;lt;html&amp;gt; - &amp;lt;head&amp;gt; - &amp;lt;body&amp;gt; - &amp;lt;/html&amp;gt; 순서로 구성된 점을 알 수 있다.&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;&lt;b&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;lt;head&amp;gt; 섹션&lt;/span&gt;&lt;/b&gt;&lt;/h4&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;1034&quot; data-origin-height=&quot;575&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/cXap5o/btrNZMsjcT1/FRUgKMSZJkVtVd8ybnBc8K/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/cXap5o/btrNZMsjcT1/FRUgKMSZJkVtVd8ybnBc8K/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/cXap5o/btrNZMsjcT1/FRUgKMSZJkVtVd8ybnBc8K/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcXap5o%2FbtrNZMsjcT1%2FFRUgKMSZJkVtVd8ybnBc8K%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1034&quot; height=&quot;575&quot; data-origin-width=&quot;1034&quot; data-origin-height=&quot;575&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;웹페이지의 메타데이터가 입력되는 곳이다. 첫번째 줄 &lt;span style=&quot;color: #006dd7;&quot;&gt;&lt;b&gt;&amp;lt;title id=&quot;browserTitleArea&quot;&amp;gt;네이버 뉴스 &amp;lt;/title&amp;gt;에서&lt;/b&gt;&lt;/span&gt; 웹페이지의 제목이 입력되는 것을 알 수 있다. 다음으로 &lt;b&gt;&lt;span style=&quot;color: #006dd7;&quot;&gt;&amp;lt;link&amp;nbsp;rel=&quot;stylesheet&quot;&amp;nbsp;type=&quot;text/css&quot;&amp;nbsp;href=&quot;&lt;a style=&quot;color: #006dd7;&quot; href=&quot;https://ssl.pstatic.net/static.news/mnews/resources/20221006_055519/css/generated/newshome.css&amp;quot;&amp;gt;&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;&gt;https://ssl.pstatic.net/static.news/mnews/resources/20221006_055519/css/generated/newshome.css&lt;/a&gt;&quot;&amp;gt;&amp;nbsp;&lt;/span&gt;&lt;/b&gt;에서 웹페이지의 디자인을 구성하는 CSS stylesheet를 &amp;lt;head&amp;gt;에서 불러온다는 점을 알 수 있다. (CSS stylesheet에 대해서는 뒤에 자세히 얘기하도록 하겠다.) 그리고 웹사이트에 기능을 부여해주는 여러 script와 웹사이트 정보 역할을 하는 여러 metadata가 입력되는 과정을 볼 수 있다. 이와 같이 &amp;lt;head&amp;gt; 섹션은 HTML의 &amp;lt;body&amp;gt; 섹션에서 수행해 나갈 기능들을 미리 정의해주는 역할을 하는 걸 볼 수 있다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;&lt;b&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&amp;lt;body&amp;gt; 섹션&lt;/span&gt;&lt;/b&gt;&lt;/h4&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;HTML의 대부분을 차지하는 &amp;lt;body&amp;gt; 섹션이다. 여기는 실제 우리가 눈으로 보는 페이지의 요소들을 위치시키고 정의한다. 아래 화면을 통해 어떻게 구성되어 있는지 알아보겠다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;1059&quot; data-origin-height=&quot;401&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/LVb4y/btrNXkqSm38/A0AJjwHgYN8v9jED6MxLT1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/LVb4y/btrNXkqSm38/A0AJjwHgYN8v9jED6MxLT1/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/LVb4y/btrNXkqSm38/A0AJjwHgYN8v9jED6MxLT1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FLVb4y%2FbtrNXkqSm38%2FA0AJjwHgYN8v9jED6MxLT1%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1059&quot; height=&quot;401&quot; data-origin-width=&quot;1059&quot; data-origin-height=&quot;401&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;실제 페이지 레이아웃과 동일한 순서(header-main-aside-footer)로 각 항목들이 정의되어 있다.&amp;nbsp;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;ol style=&quot;list-style-type: decimal;&quot; data-ke-list-type=&quot;decimal&quot;&gt;
&lt;li&gt;&amp;lt;section class=&quot;news_header&quot;&amp;gt;&lt;/li&gt;
&lt;li&gt;&amp;lt;section class=&quot;main_content&quot;&amp;gt;&lt;/li&gt;
&lt;li&gt;&amp;lt;section class=&quot;main_aside&quot;&amp;gt;&lt;/li&gt;
&lt;li&gt;&amp;lt;div class=&quot;mp_footer&quot;&amp;gt;&lt;/li&gt;
&lt;/ol&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;재미삼아 header와 footer의 위치를 바꿔보았는데, 바로 페이지에 반영이 되었다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;1920&quot; data-origin-height=&quot;1982&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bbb3E8/btrNYTZTbQK/Lxs8r3wwZ15R8cYsABXH2K/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bbb3E8/btrNYTZTbQK/Lxs8r3wwZ15R8cYsABXH2K/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bbb3E8/btrNYTZTbQK/Lxs8r3wwZ15R8cYsABXH2K/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fbbb3E8%2FbtrNYTZTbQK%2FLxs8r3wwZ15R8cYsABXH2K%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1920&quot; height=&quot;1982&quot; data-origin-width=&quot;1920&quot; data-origin-height=&quot;1982&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;방금 전 실험을 통해 HTML이 위에서 아래로 렌더링 된다는 점을 찾아낼 수 있었다. 아마 이런 이유로 stylesheet나 script가 대부분 &amp;lt;head&amp;gt;에서 정의가 되는 거 같다. 이제 전반적인 구조에 대해서 알았으니, 한 요소를 골라서 그 안에는 뭐가 있는지 알아보자.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;740&quot; data-origin-height=&quot;49&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/boDroA/btrN1hepdC2/G3qnoAvEZzyBDAioc8QT2k/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/boDroA/btrN1hepdC2/G3qnoAvEZzyBDAioc8QT2k/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/boDroA/btrN1hepdC2/G3qnoAvEZzyBDAioc8QT2k/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FboDroA%2FbtrN1hepdC2%2FG3qnoAvEZzyBDAioc8QT2k%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;740&quot; height=&quot;49&quot; data-origin-width=&quot;740&quot; data-origin-height=&quot;49&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;위 그림은 header은 네비게이션 메뉴인데, 현재 &quot;언론사별&quot; 페이지에 들어왔기 때문에 글씨가 파란색으로 표시되어있다. 해당 요소의 HTML은 어떻게 구성되어 있고, 각 요소들이 무엇을 의미하는지 알아보도록 하겠다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;1040&quot; data-origin-height=&quot;139&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/PmzzR/btrN1hyIbEr/0qr4uxHc86SPOgmwW7KkM1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/PmzzR/btrN1hyIbEr/0qr4uxHc86SPOgmwW7KkM1/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/PmzzR/btrN1hyIbEr/0qr4uxHc86SPOgmwW7KkM1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FPmzzR%2FbtrN1hyIbEr%2F0qr4uxHc86SPOgmwW7KkM1%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1040&quot; height=&quot;139&quot; data-origin-width=&quot;1040&quot; data-origin-height=&quot;139&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;class=&quot;Nlist_item is_active&quot;&lt;/span&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&quot;언론사별&quot; 항목이 현재 활성화 되어있다. (이 페이지가 지금 열려있다는 뜻)&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;href=&quot;https://news.naver.ccom/?viewType=pc&quot;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;해당 글씨를 클릭하면 href에 정의된 링크로 이동한다&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;span&gt;onclick=&quot;nclk(event,'lnb.pcmedia','','')&lt;/span&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;&lt;span&gt;버튼을 누르면 nclk라는 함수를 실행한다. (nclk가 무슨 역할을 하는지 도무지 찾을 수가 없다...)&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span&gt;한 가지 알 수 있는 건 함수의 2번째 입력값이 어느 페이지로 이동하는지 뜻한다는 것이다&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;span&gt;class와 role은 개발자가 항목을 구분 짓기 위해 표시한 이름이라고 생각한다. 그리고 aria-selected가 true로 되어있으므로, 해당 항목이 현재 선택되어있다는 뜻이다. (&lt;span&gt;area인데 개발자 오타인 거 같다. 아니면 aria란 전문 용어가 따로 있을지도...)&lt;/span&gt;&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;이와 같이 버튼 하나를 정상 작동시키기 위한 HTML 요소가 무엇이 있는지 알아보았다. 이제 CSS는 어떤 식으로 구성되어 있는지 알아보겠다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;&lt;b&gt;&lt;span&gt;CSS 구성요소&lt;/span&gt;&lt;/b&gt;&lt;/h3&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;페이지의 CSS 요소를 확인하다 흥미로운 점을 하나 발견했다. 페이지의 모든 구성 요소들이 CSS 정보를 newshome.css에서 가져오지만 aside 섹션만 CSS 정보를 aside.css에서 가져왔던 것이다. 그래서 이유가 무엇인지 알아봤더니, aside 섹션은 네이버 뉴스 페이지의 구성 요소가 아니라 다른 페이지가 embed 된 것을 알 수 있었다. 아래 화면의 2번째 줄의 첫 부분인 iframe이 &quot;https://news.naver.com/aside?oid=&quot;를 불러오고 있는 것을 확인할 수 있다. 실제로 이 주소를 치면 aside 메뉴만 나온다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;1018&quot; data-origin-height=&quot;312&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/dBdzlp/btrNZlBRBAz/poNFNbwuipUCFo5pnblIQK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/dBdzlp/btrNZlBRBAz/poNFNbwuipUCFo5pnblIQK/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/dBdzlp/btrNZlBRBAz/poNFNbwuipUCFo5pnblIQK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FdBdzlp%2FbtrNZlBRBAz%2FpoNFNbwuipUCFo5pnblIQK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1018&quot; height=&quot;312&quot; data-origin-width=&quot;1018&quot; data-origin-height=&quot;312&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;aside 섹션에 대한 얘기가 나왔으니, 해당 항목의 CSS는 어떤 식으로 구성되어있는지 알아보겠다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imagegridblock&quot;&gt;
  &lt;div class=&quot;image-container&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/sh19N/btrNX75pn4D/d0SG9huBkwPM2MaIN5pM31/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/sh19N/btrNX75pn4D/d0SG9huBkwPM2MaIN5pM31/img.png&quot; data-origin-width=&quot;240&quot; data-origin-height=&quot;514&quot; data-is-animation=&quot;false&quot; style=&quot;width: 8.01264%; margin-right: 10px;&quot; data-widthpercent=&quot;8.11&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/sh19N/btrNX75pn4D/d0SG9huBkwPM2MaIN5pM31/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fsh19N%2FbtrNX75pn4D%2Fd0SG9huBkwPM2MaIN5pM31%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;240&quot; height=&quot;514&quot;/&gt;&lt;/span&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/brB8Yb/btrNX7RSaGJ/nadPRaQqjBKJLhG3JbkNn0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/brB8Yb/btrNX7RSaGJ/nadPRaQqjBKJLhG3JbkNn0/img.png&quot; data-origin-width=&quot;868&quot; data-origin-height=&quot;164&quot; data-is-animation=&quot;false&quot; style=&quot;width: 90.8246%;&quot; data-widthpercent=&quot;91.89&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/brB8Yb/btrNX7RSaGJ/nadPRaQqjBKJLhG3JbkNn0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbrB8Yb%2FbtrNX7RSaGJ%2FnadPRaQqjBKJLhG3JbkNn0%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;868&quot; height=&quot;164&quot;/&gt;&lt;/span&gt;&lt;/div&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;&lt;span&gt;그리고 CSS 정보는 아래와 같이 구성되어있다.&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;651&quot; data-origin-height=&quot;221&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/dX78u2/btrNYfvzweC/40Jzv22Xsa6jkkqVdHsDyk/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/dX78u2/btrNYfvzweC/40Jzv22Xsa6jkkqVdHsDyk/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/dX78u2/btrNYfvzweC/40Jzv22Xsa6jkkqVdHsDyk/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FdX78u2%2FbtrNYfvzweC%2F40Jzv22Xsa6jkkqVdHsDyk%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;651&quot; height=&quot;221&quot; data-origin-width=&quot;651&quot; data-origin-height=&quot;221&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;여기서 우리는 이 정보들이 해당 섹션의 디자인을 나타냄을 알 수 있다. 그리고 동일한 내용이 aside.css의 29번째 줄에 위치해있다. 이제 CSS를 수정하면 어떻게 되는지 예시로 두 개 요소의 값을 바꿔보겠다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;배경색 = 흰색에서 노란색으로 변경 (background-color)&lt;/li&gt;
&lt;li&gt;테두리를 직각으로 변경 (border-radius)&lt;/li&gt;
&lt;/ul&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imagegridblock&quot;&gt;
  &lt;div class=&quot;image-container&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/YB8Y2/btrNZkbUPXy/DVpqjEdGS5lAWnPwDcogmK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/YB8Y2/btrNZkbUPXy/DVpqjEdGS5lAWnPwDcogmK/img.png&quot; data-origin-width=&quot;239&quot; data-origin-height=&quot;509&quot; data-is-animation=&quot;false&quot; style=&quot;width: 49.4606%; margin-right: 10px;&quot; data-widthpercent=&quot;50.04&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/YB8Y2/btrNZkbUPXy/DVpqjEdGS5lAWnPwDcogmK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FYB8Y2%2FbtrNZkbUPXy%2FDVpqjEdGS5lAWnPwDcogmK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;239&quot; height=&quot;509&quot;/&gt;&lt;/span&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/FhwEM/btrNZL1jkEM/GAw4g2SZK2wq5ACNjV9jaK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/FhwEM/btrNZL1jkEM/GAw4g2SZK2wq5ACNjV9jaK/img.png&quot; data-origin-width=&quot;240&quot; data-origin-height=&quot;512&quot; data-is-animation=&quot;false&quot; data-widthpercent=&quot;49.96&quot; style=&quot;width: 49.3766%;&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/FhwEM/btrNZL1jkEM/GAw4g2SZK2wq5ACNjV9jaK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FFhwEM%2FbtrNZL1jkEM%2FGAw4g2SZK2wq5ACNjV9jaK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;240&quot; height=&quot;512&quot;/&gt;&lt;/span&gt;&lt;/div&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;이와 같은 형태로 CSS를 수정하여 페이지의 디자인이 변경되는 것을 확인할 수 있었다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;&lt;b&gt;&lt;span&gt;JavaScript 분석&lt;/span&gt;&lt;/b&gt;&lt;/h3&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;JavaScript 동작 원리를 알기 위해서 많은 시간을 투자했지만, 얻은 게 없었다.. 일단 현재까지 발견된 점만 이야기 나눠보겠다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;158&quot; data-origin-height=&quot;76&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bxvfTj/btrNZpc8lDJ/9cnmoKpChgamNWJHM06bR1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bxvfTj/btrNZpc8lDJ/9cnmoKpChgamNWJHM06bR1/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bxvfTj/btrNZpc8lDJ/9cnmoKpChgamNWJHM06bR1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbxvfTj%2FbtrNZpc8lDJ%2F9cnmoKpChgamNWJHM06bR1%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;212&quot; height=&quot;102&quot; data-origin-width=&quot;158&quot; data-origin-height=&quot;76&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;위에 있는 새로보기 버튼에 대한 HTML 정보는 아래와 같다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;846&quot; data-origin-height=&quot;37&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/kFKnc/btrNYVpVRGU/Kvoiswpj7QjQ6Ndui7J2J0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/kFKnc/btrNYVpVRGU/Kvoiswpj7QjQ6Ndui7J2J0/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/kFKnc/btrNYVpVRGU/Kvoiswpj7QjQ6Ndui7J2J0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FkFKnc%2FbtrNYVpVRGU%2FKvoiswpj7QjQ6Ndui7J2J0%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;846&quot; height=&quot;37&quot; data-origin-width=&quot;846&quot; data-origin-height=&quot;37&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;여기서 onclick 항목의 nclk가 JavaScript 함수라고 생각되는데, 이유는 event, 'home.editndnew' 등의 입력값이 들어가기 때문이다. 그리고 여기서 'home.editndnew'가 새로보기의 역할을 한다고 생각한다. 하나의 예시를 더 들어보겠다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;702&quot; data-origin-height=&quot;18&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/7dnoO/btrNX0MbnYY/aL2E4bynGuYhA67Jbfd7S0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/7dnoO/btrNX0MbnYY/aL2E4bynGuYhA67Jbfd7S0/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/7dnoO/btrNX0MbnYY/aL2E4bynGuYhA67Jbfd7S0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F7dnoO%2FbtrNX0MbnYY%2FaL2E4bynGuYhA67Jbfd7S0%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;702&quot; height=&quot;18&quot; data-origin-width=&quot;702&quot; data-origin-height=&quot;18&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;위는 검색창에서 검색 버튼을 실행하는 HTML 정보인데, 여기서도 마찬가지로 nclk 함수에서 'gnb.schn'을 입력하면 검색 기능이 실행된다는 걸 알 수 있다.&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;결론적으로 nclk가 네이버 개발자가 생성해놓은 JavaScript 라이브러리이지 않을까 싶다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style2&quot; /&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;오늘은 너무 새로운 걸 공부하느라 오랜 시간이 걸렸다. 머리가 아파서 글도 머리에서 생각나는대로 대충 썼다. 힘든 하루였다. 이제 자야지.&lt;/span&gt;&lt;/p&gt;</description>
      <category>PMB 부트캠프#코드스테이츠</category>
      <author>꿀벌입니다</author>
      <guid isPermaLink="true">https://honeybee8989.tistory.com/33</guid>
      <comments>https://honeybee8989.tistory.com/33#entry33comment</comments>
      <pubDate>Thu, 6 Oct 2022 22:16:32 +0900</pubDate>
    </item>
    <item>
      <title>[코드스테이츠 PMB 14기 W6] 스포티파이의 큐레이션 (작성중)</title>
      <link>https://honeybee8989.tistory.com/32</link>
      <description>&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;오늘도 지난주와 마찬가지로 스포티파이에 관한 주제로 위클리 프로젝트를 이어나가려 한다. 이번에는 스포티파이의 전반적인 서비스에 대해서가 아닌, 스포티파이가 독보적으로 잘하는 '큐레이션'에 대해 얘기를 해보려 한다. 스포티파이 관련 첫번째 블로그에서 큐레이션에 대해 언급을 한 적이 있는데, 이번에 다시 한 번 짧게 설명을 하고 시작하려 한다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h2 data-ke-size=&quot;size26&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;큐레이션에 대해서&lt;/b&gt;&lt;/span&gt;&lt;/h2&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;color: #000000; font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;span style=&quot;background-color: #ffffff;&quot;&gt;큐레이션(Curation)은 '작품에 생기를 부여하는 활동'이란 의미를 가지고 있다. 대부분의 영어가 그렇지만 이 단어도 '돌보다', '보살피다'라는 뜻의 라틴어인 큐레어(Curare)에서 유래한다. 사실 이것보다 더 적절한 비유는 바로 미술관 혹은 박물관에서 일하는 큐레이터(Curator)를 생각하면 된다. 큐레이터는 미술관이나 박물관에서 전시할 작품을 고르는 사람을 말하는데, 그들이 전시관의 컨셉과 대중을 고려해서 작품을 선정해서 전시회의 퀄리티를 높여주듯이, 스포티파이의 큐레이션도 고객에게 맞는 작품을 선정해서 추천을 해준다. 하지만 스포티파이의 큐레이션은 대중을 고려한게 아니라, 정말 개인화된 큐레이션 제공함으로써 전 세계 이용자 4억4000만명 모두에게 각각 취향에 맞는 음악을 알고리즘을 통해 선별해준다.&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h2 data-ke-size=&quot;size26&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&lt;span style=&quot;background-color: #ffffff;&quot;&gt;스포티파이만의 차별점은 무엇인가?&lt;/span&gt;&lt;/span&gt;&lt;/b&gt;&lt;/span&gt;&lt;/h2&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;color: #000000; font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;span style=&quot;background-color: #ffffff;&quot;&gt;지난 5주간 음원 스트리밍에 대해서 공부를 하면서 느낀점은 상위권에 위치한 음원 스트리밍 서비스의 전반적인 퀄리티는 차이가 거의 없다는 것이다. 여기서 말하는 퀄리티는 UI, 가격, 컨텐츠의 양, 음원의 오디오 품질 등을 말하는 것이다. 따라서, 현재 국내 서비스와 해외 서비스 마찬가지로 차별화를 두기 위해 독점 컨텐츠를 확보하고 있긴 하지만, 아직까지는 독점 컨텐츠에 대한 메리트가 크게 있다고 생각하지 않는다. 결국 대중이 즐겨듣는 초대형 아티스트들은 모든 플랫폼에 제공되기 때문이다. (사실 팟캐스트는 독점 컨텐츠 확보가 매우 큰 의미가 있다. 하지만 오늘은 음원 큐레이션에 대해 얘기할 예정이므로 팟캐스트는 제외하도록 하겠다.)&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;color: #000000; font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;span style=&quot;background-color: #ffffff;&quot;&gt;서비스 품질의 차이도 없고, 독점 컨텐츠도 의미가 없으면 유튜브 뮤직, 애플 뮤직, 아마존 뮤직 등 무엇을 사용하든 상관없지 않냐고 물을 수 있다. 하지만 스포티파이는 단순히 음원 청취가 아닌 &lt;b&gt;새로운 음악적 경험&lt;/b&gt;을 하게 해준다. 그리고 여기서 말하는 새로운 음악적 경험의 원천이 바로 스포티파이의 '큐레이션'이라고 볼 수 있다. 오늘은 이 '큐레이션'이라는 주제를 통해 스포티파이가 무엇을 통해 '큐레이션'을 더 발전 시킬 수 있는지 생각하고, 발전 요소가 정당한지 확인할 수 있는 데이터가 무엇이 있는지 알아보려고 한다.&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h2 data-ke-size=&quot;size26&quot;&gt;&lt;b&gt;&lt;span style=&quot;color: #000000; font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;span style=&quot;background-color: #ffffff;&quot;&gt;고객별 스포티파이 큐레이션의 적합성 확인&lt;/span&gt;&lt;/span&gt;&lt;/b&gt;&lt;/h2&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;스포티파이의 큐레이션을 통해 고객에게 제공되는 컨텐츠가 적합한지 확인하기 위해서 무엇을 봐야 할까? 여기서 고려해볼 만한 요소는 아래와 같다:&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;&lt;b&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;고객이 컨텐츠를 좋아하는가&lt;/span&gt;&lt;/b&gt;&lt;/li&gt;
&lt;li&gt;&lt;b&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;다양한 컨텐츠를 제공하는가&lt;/span&gt;&lt;/b&gt;&lt;/li&gt;
&lt;li&gt;&lt;b&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;고객이 제공되는 컨텐츠를 모두 쉽게 엑세스 할 수 있는가&lt;/span&gt;&lt;/b&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;큐레이션을 통해 고객에게 제공되는 컨텐츠의 적합성을 판단하기 위해 3가지 요소를 정하였다. 그러면 각 요소마다 우리가 볼 수가 있는 지표가 무엇이 있는지 알아보도록 하겠다. 이에 앞서 스포티파이가 어떤 메타데이터를 통해 음원을 분류하는지 알아보겠다. 이에 대한 이해가 있어야 아래 지표에 대한 설명이 충분히 와닿을거라 생각한다. 그렇다면 이제 아래 그림을 통해 대략적으로 어떤 메타데이터를 수집하는지 알아보자.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;&lt;b&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;메타데이터 구조&lt;/span&gt;&lt;/b&gt;&lt;/h3&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;6116&quot; data-origin-height=&quot;3265&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/N02ue/btrNTeJU6uO/iDtHkZ7TST3tnL58u8op3k/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/N02ue/btrNTeJU6uO/iDtHkZ7TST3tnL58u8op3k/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/N02ue/btrNTeJU6uO/iDtHkZ7TST3tnL58u8op3k/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FN02ue%2FbtrNTeJU6uO%2FiDtHkZ7TST3tnL58u8op3k%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;6116&quot; height=&quot;3265&quot; data-origin-width=&quot;6116&quot; data-origin-height=&quot;3265&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;사실 위 그림은 이해를 돕기 위한 예시이기 때문에 실제로는 훨씬 많은 메타데이터를 수집한다는 점, 그리고 각 메타데이터 항목마다 훨씬 더 많은 데이터가 수집된다는 점을 참고하기 바란다. 아무튼 위와 같이 구성된 음원 메타데이터는 이제 각 고객과 매칭을 시켜주기 위한 정보로 이용이 된다. 예를 들어 아래와 같이 고객의 성향을 추적한 메타데이터가 있다고 생각해보자. 이 고객은 조용한 음악을 선호하며 발라드, K-POP 등을 좋아한다는 점을 알 수 있다. 그리고 스포티파이의 큐레이션은 고객과 음원의 메타데이터를 분석하여 고객에게 좋아할만한 음원/플레이리스트/아티스트/앨범을 매칭 시켜준다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;3200&quot; data-origin-height=&quot;1280&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/lvM2r/btrNSOY864h/TFTetBjHPKQksWsWrTK1o0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/lvM2r/btrNSOY864h/TFTetBjHPKQksWsWrTK1o0/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/lvM2r/btrNSOY864h/TFTetBjHPKQksWsWrTK1o0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FlvM2r%2FbtrNSOY864h%2FTFTetBjHPKQksWsWrTK1o0%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;3200&quot; height=&quot;1280&quot; data-origin-width=&quot;3200&quot; data-origin-height=&quot;1280&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;조금 빈약한 설명이지만, 어떤 느낌인지는 알 수 있을거라 생각한다. 그렇다면 이제 본격적으로 지표에 대해서 이야기를 나눠보겠다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;&lt;b&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;고객이 컨텐츠를 좋아하는가&lt;/span&gt;&lt;/b&gt;&lt;/h3&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;고객이 컨텐츠를 좋아하는지 판단 할 수 있는 데이터는 워낙 많긴하다. 왜냐하면 큐레이션은 단순히 곡을 제공하는것 뿐만 아니라 플레이리스트, 아티스트와 같이 1개의 곡이 아닌 패키지를 추천하는 경우도 많기 때문이다. 따라서, 고객이 각 음원에 대해서 어떻게 반응했는지도 중요하지만, 플레이리스트와 앨범에 대한 반응을 통해서도 고객의 성향을 파악할 수 있기 때문이다. 어찌됐든 모든 데이터를 다룰수는 없으니, 제일 간단하게 설명할 수 있는 '음원 재생 시간' 데이터를 통해 얘기를 이어나가겠다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&lt;u&gt;&lt;b&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;지표: 음원 재생 시간&lt;/span&gt;&lt;/b&gt;&lt;/u&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;여기서 말하는 '음원 재생 시간'은 곡의 길이를 말하는 것이 아니다. 고객이 특정 음원을 재생했을때 곡을 끝까지 다 들었는지, 아니면 중간에 다음곡으로 넘겼는지 등을 얘기하는 것이다. 그런데 무작정 곡을 넘겼다고 해서, 그 곡이 고객에게 적합한 곡이 아니라고 판단 내릴 수 있을까? 그건 또 아니라고 생각한다. 메타데이터적인 요소가 고객과 일치하지만, 고객이 현재 스포티파이를 이용하는 환경에 따라서 고객에게 적절하지 않은 컨텐츠가 될수도 있다. &lt;span style=&quot;color: #ee2323;&quot;&gt;(이어서 작성)&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;&lt;b&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;다양한 컨텐츠를 제공하는가&lt;/span&gt;&lt;/b&gt;&lt;/h3&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;앞서 얘기했듯이 큐레이션의 궁극적 목표는 고객에게 새로운 음악적 경험을 제공하는 것이다. 그렇기 때문에 큐레이션 알고리즘은 단순히 메타데이터를 통해 고객에게 알맞는 컨텐츠를 제공하는 것만이 아닌, 아직 고객이 탐험하지 않은 영역에 조금씩 발을 들일수 있도록 하는것도 중요하다. 마침 해당 토픽에 대해서 리서치를 하다가 인터넷에서 흥미로운 자료를 발견했다. 참고로 &lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;필자가 스포티파이 관련 첫번째 블로그에서 언급한 BaRT(Bandits for Recommendations as Treatments)가 여기서 다시 나온다. &lt;/span&gt;&lt;span&gt;(Bandit 알고리즘에 대해 알고 싶다면 다음 링크 참고:&lt;b&gt;&lt;span style=&quot;color: #006dd7;&quot;&gt; &lt;a style=&quot;color: #006dd7;&quot; title=&quot;Bandit 알고리즘과 추천시스템&quot; href=&quot;https://julie-tech.tistory.com/37#:~:text=Bandit%20%EC%95%8C%EA%B3%A0%EB%A6%AC%EC%A6%98%EC%9D%80%20%EC%8A%AC%EB%A1%AF%20%EB%A8%B8%EC%8B%A0,Bandit%20%EC%95%8C%EA%B3%A0%EB%A6%AC%EC%A6%98%EC%9D%98%20%EC%8B%9C%EC%9E%91%EC%9D%B4%EB%8B%A4.&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;&gt;Bandit 알고리즘과 추천시스템&lt;/a&gt;&lt;/span&gt;&lt;/b&gt;) 이제 &lt;span&gt;스포티파이의 알고리즘이 어떤식으로 새로운 컨텐츠를 추천하는지에 대해서 아래 그림을 통해 알아보자.&lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;700&quot; data-origin-height=&quot;575&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/b2E3CV/btrNVmUrQny/RWGgCPHBoMuR45pmckLGY1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/b2E3CV/btrNVmUrQny/RWGgCPHBoMuR45pmckLGY1/img.png&quot; data-alt=&quot;밴딧 알고리즘을 통한 컨텐츠 추천 시스템&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/b2E3CV/btrNVmUrQny/RWGgCPHBoMuR45pmckLGY1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fb2E3CV%2FbtrNVmUrQny%2FRWGgCPHBoMuR45pmckLGY1%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;700&quot; height=&quot;575&quot; data-origin-width=&quot;700&quot; data-origin-height=&quot;575&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;밴딧 알고리즘을 통한 컨텐츠 추천 시스템&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;Bandit 알고리즘에는 두가지 개념이 있다: &lt;b&gt;수확(Exploit), 탐험(Explore)&lt;/b&gt;. 스포티파이의 관점에서 수확이라 함은 &lt;/span&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;고객에게 최고로 적절하다고 확신이 드는 컨텐츠를 소개&lt;/b&gt;하는 것이다. 그리고 탐험은 &lt;b&gt;고객에게 새로운 컨텐츠 소개를 하여 새로운 경험을 얻게 하는 것&lt;/b&gt;이다. 그런데 위에 보면 탐험은 2개의 영역을 차지하고 있다: 1) low certainty-low relevance(낮은 확실성-낮은 연관성), 2) low certainty-high relevance(낮은 확실성-높은 연관성). 두 영역의 차이는 relevance의 정도의 차이인데, 당연히 high relevance에 해당되는 컨텐츠가 훨씬 높은 빈도로 고객에게 추천되지 않을까 추측해본다. 마지막으로 무시(Ignore)는 말 그대로 고객과 관련이 없는 컨텐츠가 확실하기 떄문에 추천 컨텐츠에서 제외된다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;그렇다면 다양한 컨텐츠를 제공한다는 뜻은 무슨 의미일까? 위 Bandit 알고리즘을 통해 해석하자면, 나눠진 3개의 영역(explore, explore, exploit)에 해당하는 컨텐츠가 모두 일정 수준 고객에게 노출되어야 한다는 뜻이다. 그렇다면 이 3가지 영역이 골고루 고객에게 노출된다는 것을 어떻게 지표로 표현할 수 있을까?&amp;nbsp;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&lt;u&gt;&lt;b&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;지표: BaRT Score&lt;/span&gt;&lt;/b&gt;&lt;/u&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;일단 BaRT Score는 아무런 근거 없는, 필자의 상상속에서 만들어진 지표라는 점 먼저 이해하기 바란다. &lt;b&gt;스포티파이는 그들만의 지표와 공식이 정해져 있을 것이다&lt;/b&gt;. 아무튼 본 지표를 통해 찾아내고자 하는 내용은 아래와 같다:&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;Explore 영역이 충분히 고객에게 전달되고, 고객이 긍정적으로 반응하는지 알기 위함&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;세 영역이 고객에게 골고루 노출되는지 알기 위함&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;먼저 단어가 너무 길기 때문에 아래와 같이 용어를 정의하겠다:&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;Explore(high relevance-low cerntainty) = E1&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;Explore(low relevance-low certainty) = E2&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;Exploit = X&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;첫번째로 계산 공식은 아래와 같다:&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;blockquote data-ke-style=&quot;style3&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;E1 score = (E1 청취 횟수 / 총 E1 제공 횟수) &amp;times; 100&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;E2 score = (E2 청취 횟수 / 총 E2 제공 횟수) &amp;times; 100&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;X score = (X 청취 횟수 / 총 X 제공 횟수) &amp;times; 100&lt;/span&gt;&lt;br /&gt;&lt;br /&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;BaRT score = (E1 score + E2 score + X score)&amp;nbsp;&amp;divide; 3&amp;nbsp; (100점 만점 기준)&lt;br /&gt;&lt;br /&gt;&lt;span style=&quot;color: #ee2323;&quot;&gt;&lt;b&gt;(수정 해야됨)&lt;/b&gt;&lt;/span&gt;&lt;/span&gt;&lt;/blockquote&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;&lt;b&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;제공되는 컨텐츠를 모두 액세스 할 수 있는가&lt;/span&gt;&lt;/b&gt;&lt;/h3&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;스포티파이가 보유한 음원 라이브러리는 우리가 인생을 두번 살아도 다 들을 수 없을 정도로 방대하다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;</description>
      <author>꿀벌입니다</author>
      <guid isPermaLink="true">https://honeybee8989.tistory.com/32</guid>
      <comments>https://honeybee8989.tistory.com/32#entry32comment</comments>
      <pubDate>Wed, 5 Oct 2022 00:49:01 +0900</pubDate>
    </item>
    <item>
      <title>[코드스테이츠 PMB 14기 W6D4] 마약범죄 데이터 분석</title>
      <link>https://honeybee8989.tistory.com/31</link>
      <description>&lt;h2 data-ke-size=&quot;size26&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;'마약 청정국' &amp;rarr; '마약 오염국' 된 대한민국&lt;/b&gt;&lt;/span&gt;&lt;/h2&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;최근 특정 연예인의 마약 사건으로 인해 다시 한번 대한민국 마약 범죄의 심각성이 다시 한번 재조명되고 있다. 그가 마약을 투약했다는 점도 문제지만, 더 놀라운 건 그가 소지하고 있던 필로폰의 양이 무려 1000회분에 해당한다는 점이었다. 1000회분은 절대로 1인이 혼자서 투여할 수 있는 양이 아니다. 따라서, 해당 약물을 공급받거나 같이 투약하는 공범들이 다수 존재한다는 뜻이다. 그리고 우리는 본 케이스를 통해 대한민국의 마약 범죄는 이미 널리 퍼졌다는 사실을 간접적으로 알 수 있다. 불과 2010년대 중반까지만 해도 우리나라는 마약 청정국으로 분류될 만큼 마약 범죄가 비교적 적은 나라였지만, 2016년과 2019년을 기점으로 마약류 범죄 단속수는 급속도로 증가하였다.&amp;nbsp;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;812&quot; data-origin-height=&quot;616&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/UMIDb/btrNOfn4BGv/59ZSqPe8rhktR2vPBaQ7O0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/UMIDb/btrNOfn4BGv/59ZSqPe8rhktR2vPBaQ7O0/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/UMIDb/btrNOfn4BGv/59ZSqPe8rhktR2vPBaQ7O0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FUMIDb%2FbtrNOfn4BGv%2F59ZSqPe8rhktR2vPBaQ7O0%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;812&quot; height=&quot;616&quot; data-origin-width=&quot;812&quot; data-origin-height=&quot;616&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;물론 모든 마약이 우리 사회에 악영향을 끼치고 범죄자들의 정상적인 생활을 방해하지만, 정말 우려되는 점은 한국에서 유통되고 있는 향정신성의약품과 형태의 마약 비중이 급속하게 늘고 있다는 부분이다. 우리가 영화에서 흔히 보는 LSD, 메스암페타민 등이 향정신성의약품에 속한다. 그리고 이런 마약류는 인체를 크게 훼손시키는 뿐만 아니라, 중독성과 후유증이 심하기 때문에 한 번 발을 들인 이상 정상적인 삶으로 복귀하는 일은 사실상 불가능하다. 청나라가 아편으로 인해 겪었던 문제를 우리 모두 역사를 통해서 배웠을 것이다. 마약 복용자가 급증하고 있는 만큼, 대한민국이 마약에 대한 심각성을 다시 한번 느끼길 바라는 점에서 이번 블로그를 써본다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h2 data-ke-size=&quot;size26&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;마약 범죄에 대한 나만의 가설&lt;/b&gt;&lt;/span&gt;&lt;/h2&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;대한민국에서 일어나는 마약 범죄에 대해서 사실 별로 아는 지식이 없기 때문에, 별 근거없이 추측을 통해 가설을 설정하겠다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;ol style=&quot;list-style-type: decimal;&quot; data-ke-list-type=&quot;decimal&quot;&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;마약범죄는 금전적 여건이 갖춰지고 마약에 대한 미디어 노출이 많은 30~40대 연령층에서 가장 많이 일어난다.&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;마약 투약 또는 흡입한 후 행해지는 범죄율이 증가하고 있다.&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;마약은 동남아 국가들에서 가장 많이 유통되며, 국내 거주중인 외국인 중 동남아 국가 출신 마약사범이 가장 많다.&lt;/span&gt;&lt;/li&gt;
&lt;/ol&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;위와 같이 3가지 가설을 설정하였으므로, 각 가설에 맞는 데이터를 인터넷에서 찾아보도록 하겠다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h2 data-ke-size=&quot;size26&quot;&gt;&lt;b&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;가설 검증&lt;/span&gt;&lt;/b&gt;&lt;/h2&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;&lt;b&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;마약류 관리법 위반 연령대 조사&lt;/span&gt;&lt;/b&gt;&lt;/h3&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;위에서 제시한 &quot;&lt;/span&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR'; letter-spacing: 0px;&quot;&gt;마약범죄는 금전적 여건이 갖춰지고 마약에 대한 미디어 노출이 많은 30~40대 연령층에서 가장 많이 일어난다.&quot;에 대한 자료를 찾기 위해 KOSIS 국가통계포털 자료(제목: 범죄자 연령)를 참고하였다. 모든 범죄 유형에 대한 통계 자료 중 마약류 관리법 위반에 대한 통계를 따로 분류하였다. 해당 통계 자료에서 얻어낸 결과는 아래와 같다:&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;1200&quot; data-origin-height=&quot;742&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/U5DW5/btrNOKuPiAl/pEP1XcsPoD5tffRm1OTCv0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/U5DW5/btrNOKuPiAl/pEP1XcsPoD5tffRm1OTCv0/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/U5DW5/btrNOKuPiAl/pEP1XcsPoD5tffRm1OTCv0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FU5DW5%2FbtrNOKuPiAl%2FpEP1XcsPoD5tffRm1OTCv0%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1200&quot; height=&quot;742&quot; data-origin-width=&quot;1200&quot; data-origin-height=&quot;742&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;예상한 바와 같이 금전적인 여유가 생기는 시점부터 마약을 접하게 된다는 가설이 위 자료를 통해 뒷받침되는 거 같다. 사실 한국의 마약류 시세는 다른 나라에 비해 평균적으로 5~6배 비싸기 때문에 웬만해서는 쉽게 접하기가 힘들거라 생각한다. 또한, 마약이 연예인들 사이에서 유행하는 이유도 그들의 평균 소득이 일반인보다 월등히 높기 때문이라고 믿는다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;&lt;b&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;마약에 의한 범죄율이 증가하고 있다&lt;/span&gt;&lt;/b&gt;&lt;/h3&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;앞에서 세운 가설에 대한 검증 자료를 찾기 위해 마찬가지로 KOSIS 국가통계포털에서 &quot;범죄자 마약류 등 상용여부&quot;를 참고하였다. 외국영화에서 마약 관련 범죄를 너무 많이 봐서 그런지는 모르겠지만, 마약이 널리 퍼지면서 마약을 복용/투약한 사람들이 저지르는 범죄가 늘어났을 거라 생각했다. 아래 자료와 같이 마약 복용/투약한 사람들이 저지르는 범죄율 비중이 7년간 2배 정도 증가했지만, 애초에 숫자가 매우 낮기 때문에 크게 의미가 있는지는 판단이 서질 않는다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;1200&quot; data-origin-height=&quot;742&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/ctRc7O/btrNPAyEpta/KcngZAFsOEAskGo05d2uQK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/ctRc7O/btrNPAyEpta/KcngZAFsOEAskGo05d2uQK/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/ctRc7O/btrNPAyEpta/KcngZAFsOEAskGo05d2uQK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FctRc7O%2FbtrNPAyEpta%2FKcngZAFsOEAskGo05d2uQK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1200&quot; height=&quot;742&quot; data-origin-width=&quot;1200&quot; data-origin-height=&quot;742&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;&lt;b&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;국내 거주 중인 동남아 국가 출신의 마약 범죄 비중&lt;/span&gt;&lt;/b&gt;&lt;/h3&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;사실 해당 가설은 최근에 뉴스를 통해 마약이 동남아로부터 유입되고 있다는 뉴스를 많이 접해서 알게 된 사실이다. 어찌 됐든 사실 여부를 확인하기 위해 2020년도 외국인 마약 범죄율을 국가별로 나타낸 자료(KOSIS의 &quot;범죄자 국적&quot;)를 참고하였다. 가설에서 설정한 바와 같이 동남아 국가(태국, 대만, 베트남)의 비중이 52%로 절반을 넘었다. 마약 범죄율 이외에도 국내로 유통되는 경로도 동남아가 맞는지 찾고 싶었지만 마땅한 통계자료를 구할 수 없었다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;1200&quot; data-origin-height=&quot;742&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/UukTt/btrNL9o4LID/JXM1QF9ZoDKmOxTt0VHwR1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/UukTt/btrNL9o4LID/JXM1QF9ZoDKmOxTt0VHwR1/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/UukTt/btrNL9o4LID/JXM1QF9ZoDKmOxTt0VHwR1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FUukTt%2FbtrNL9o4LID%2FJXM1QF9ZoDKmOxTt0VHwR1%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1200&quot; height=&quot;742&quot; data-origin-width=&quot;1200&quot; data-origin-height=&quot;742&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style2&quot; /&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;KOSIS에 있는 통계자료를 그대로 tableau나 google studio에 입력하니 데이터 차트가 너무 이상하게 나오는 바람에 시간이 많이 걸렸다. 오늘 한 가지 배운 점은 위와 같은 차트를 생성할 때 데이터를 최대한 심플하게 만들어야, 차트 생성에 문제가 발생해도 바로바로 수정할 수 있다는 것이었다. 마지막으로 우리나라 인구수는 지난 10년간 차이가 거의 없는데, 범죄 건수는 1.5배가량 늘었다. 한국 경찰의 수사력이 좋아진 건지 아니면 실제로 사람들이 범죄를 더 많이 저지르는 건지 의문이다.&lt;/span&gt;&lt;/p&gt;</description>
      <category>PMB부트캠프 #코드스테이츠</category>
      <author>꿀벌입니다</author>
      <guid isPermaLink="true">https://honeybee8989.tistory.com/31</guid>
      <comments>https://honeybee8989.tistory.com/31#entry31comment</comments>
      <pubDate>Tue, 4 Oct 2022 22:39:50 +0900</pubDate>
    </item>
    <item>
      <title>[코드스테이츠 PMB 14기 W6D3] 트위치 (Twitch)</title>
      <link>https://honeybee8989.tistory.com/30</link>
      <description>&lt;h2 style=&quot;text-align: center;&quot; data-ke-size=&quot;size26&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;트위치&lt;/b&gt;&lt;/span&gt;&lt;/h2&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;1280&quot; data-origin-height=&quot;721&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/blhpzi/btrNps3GUnC/W2kZXfUKk328hT9k7qz0Pk/img.jpg&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/blhpzi/btrNps3GUnC/W2kZXfUKk328hT9k7qz0Pk/img.jpg&quot; data-alt=&quot;트위치 로고&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/blhpzi/btrNps3GUnC/W2kZXfUKk328hT9k7qz0Pk/img.jpg&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fblhpzi%2FbtrNps3GUnC%2FW2kZXfUKk328hT9k7qz0Pk%2Fimg.jpg&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;563&quot; height=&quot;317&quot; data-origin-width=&quot;1280&quot; data-origin-height=&quot;721&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;트위치 로고&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;게임을 좋아하는 사람들이라면 트위치에 대해서 한 번쯤은 들어봤을 거라 생각한다. 트위치는 미국 아마존이 소유하고 있는 인터넷 방송 중계 서비스고, 전 세계 최대 규모의 플랫폼이다. (한국의 아프리카와 같은 서비스)&amp;nbsp;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;트위치는 유저 컨텐츠 서비스이며, 이유는 아래와 같다:&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;시청자 참여로 인해 광고 수익이 발생하고, 시청자의 구독료를 통해 트위치와 스트리머가 수익을 얻는다.&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;2022년 1월 기준 트위치 스트리머 인구는 920만 명, 시청자 MAU는 1억 4천만 명이다. 비교적 적은 스트리머 인구가 올리는 컨텐츠를 다수의 시청자가 라이브 혹은 다시 보기를 통해 이용한다.&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;이메일 알림, 모바일 푸시 알림 기능 등을 통해 유저들이 신규 컨텐츠가 방송되면 시청자들이 재방문하도록 한다.&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;이와 같은 특징들을 통해 트위치가 유저 컨텐츠 서비스라는 점을 확인할 수 있다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style2&quot; /&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;오늘 교육자료를 통해 배운 사업 단계는 총 5가지가 있다:&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;공감 - 흡인력 - 바이럴 - 매출 - 확장&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;이 중 트위치는 현재 &lt;b&gt;매출 단계&lt;/b&gt;에 해당한다고 생각한다. 이런 대형 플랫폼이 왜 확장 단계가 아닌 매출 단계에 있냐라고 생각할 수도 있지만, 현재 트위치는 높은 망 사용료로 인해 수익 구조를 개편해야 하는 상황을 겪고 있다. 따라서, 이미 '확장' 단계를 통해 여러 수익 모델을 추가 창출해낸 트위치지만, 현재는 &lt;b&gt;트위치의 본질인 라이브 스트리밍의&amp;nbsp; 품질과 구독 및 광고에 따른 수익을 재조정해야 하는 단계&lt;/b&gt;로 왔다고 생각한다. 이해를 돕기 위해 현 상황을 보여주는 몇몇 자료를 참고하겠다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style2&quot; /&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;&lt;b&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;현 상황 요약&lt;/span&gt;&lt;/b&gt;&lt;/h3&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;현재 트위치는 인프라를 유지함에 있어 막대한 비용으로 인해 부담을 갖고 있다고 트위치 회장 Dan Clancy가 밝혔다. 사실 아마존 계열사이기 때문에 아마존 웹서비스의 IVS(Interactive Video Service)에 대한 비용을 적게 낸다고 생각했지만, 사실상 그들도 다른 고객들과 동일한 금액(200시간 방송하는 스트리머 기준, 월 140만 원)을 낸다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;604&quot; data-origin-height=&quot;309&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/uDAVi/btrNt48lXqW/2MiMiseKQtWIFHNqdP4m21/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/uDAVi/btrNt48lXqW/2MiMiseKQtWIFHNqdP4m21/img.png&quot; data-alt=&quot;트위치 회장이 작성한 블로그에서 발췌&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/uDAVi/btrNt48lXqW/2MiMiseKQtWIFHNqdP4m21/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FuDAVi%2FbtrNt48lXqW%2F2MiMiseKQtWIFHNqdP4m21%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;604&quot; height=&quot;309&quot; data-origin-width=&quot;604&quot; data-origin-height=&quot;309&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;트위치 회장이 작성한 블로그에서 발췌&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;따라서, 이게 얼마나 트위치 측에 큰 타격인지 궁금해서 대략적인 연 IVS 지출을 계산해보았다. &lt;span&gt;위 글에서 트위치 회장이 언급한 바로는, 100 CCU 스트리머 한정 월 IVS 지출이 140만 원이라고 하였다.&lt;span&gt; 그리고&amp;nbsp;&lt;/span&gt;&lt;/span&gt;전체 920만 스트리머 중 평균 100 CCU(concurrent user: 동시 시청자 수)를 보유하는 트위치 스트리머는 1퍼센트에 못 미친다고 한다. 계산의 편의성을 위해 100 CCU 스트리머의 비율을 1%라 가정하고 아래와 같이 계산해봤다. (100 CCU 미만 스트리머도 송출/수신 비용이 들긴 하니, 대략적으로 비슷할 거 같다는 추측이다)&lt;/span&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;blockquote data-ke-style=&quot;style3&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;트위치가 부담하는 월 IVS 이용료:&lt;br /&gt;&lt;br /&gt;9,200,000 &lt;b&gt;&amp;times;&lt;/b&gt; 0.01 &amp;times; 1,400,000 = 128,800,000,000 = 약 1300억 원&lt;br /&gt;&lt;br /&gt;&lt;u&gt;연 IVS 이용료 = 1300억 원&amp;nbsp;&lt;b&gt;&amp;times; 12개월 = 약 1조 6천억 원&lt;/b&gt;&lt;/u&gt;&lt;br /&gt;&lt;/b&gt;&lt;/span&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;/span&gt;&lt;/blockquote&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;트위치의 2021년 연매출이 3조였는데, 매출의 절반 가까운 비용이 IVS 이용료로 지출되고 있는 셈이다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style2&quot; /&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h2 data-ke-size=&quot;size26&quot;&gt;&lt;span&gt;&lt;b&gt;내가 생각하는 문제 해결 방법&lt;/b&gt;&lt;/span&gt;&lt;/h2&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;해결 방법을 논하기 앞서, 과제에는 이전 단계에서 어떻게 현재 단계로 넘어왔는지 설명하라고 나와있지만, 현재 트위치는 확장 단계에서 한 단계 후퇴를 하여 매출 단계를 극복해야 하는 상황이기 때문에, 현재 단계에서 트위치가 어떤 방식으로 문제를 해결할 수 있을지 가정해보려 한다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;트위치가 현재 수익 모델에서 매출을 증가할 수 있는 루트는 아래와 같다:&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;구독료 증가&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;광고료 증가&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;도네이션 수수료 증가&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;이 중 나는 광고료에 초점을 두어보려 한다. 인터넷상의 대부분의 자료가 유료화되어 (심지어 이틀 전까지 볼 수 있던 statista도 ip가 막혔다) 양질의 자료는 찾을 수 없었지만 &lt;b&gt;2019년 트위치의 광고 수익이 4000억 정도&lt;/b&gt;라는 점은 찾을 수 있었다. 그리고 2020년 예상 광고 수익은 약 7000억 정도였다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;679&quot; data-origin-height=&quot;145&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bLAEWV/btrNsFIS1KQ/1DG6ztkIexKyOh8FuT7EIK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bLAEWV/btrNsFIS1KQ/1DG6ztkIexKyOh8FuT7EIK/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bLAEWV/btrNsFIS1KQ/1DG6ztkIexKyOh8FuT7EIK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbLAEWV%2FbtrNsFIS1KQ%2F1DG6ztkIexKyOh8FuT7EIK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;679&quot; height=&quot;145&quot; data-origin-width=&quot;679&quot; data-origin-height=&quot;145&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;당시 비슷한 유저수를 보유했던 스포티파이의 광고 수익과 비교를 해보겠다. (물론 성향이 다른 서비스긴 하다.) &lt;/span&gt;&lt;b&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;/span&gt;&lt;/b&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;2019년 당시 1억 3000만 명 정도의 유저수를 보유했던 스포티파이의 광고 수익은 7500~8000억 원 사이&lt;/b&gt;였다. 당시 트위치도 1억 2600만 명의 유저수를 보유하고 있음에도 트위치의 광고 수익이 훨씬 저조했다는 걸 알 수 있다. 개인적인 경험을 빗대어 보자면, 트위치는 광고의 빈도도 적을뿐더러 웹 브라우저를 이용하기 때문에 애드블록 같은 프로그램으로 인해 광고수익에서 손해가 발생할 수밖에 없다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;따라서, 개인적으로 이런 문제를 해결하기 위해서 아래와 같은 방법을 생각해봤다:&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;ol style=&quot;list-style-type: decimal;&quot; data-ke-list-type=&quot;decimal&quot;&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;트위치 시청에 영향을 크게 주지 않는 PiP(Picture in Picture) 광고의 빈도를 높여서 광고 수익을 증가시킨다.&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span&gt;자체 플랫폼 소프트웨어를 만들어 광고 우회 플러그인으로 인한 광고 수익에 대한 손해를 줄인다.&lt;/span&gt;&lt;/li&gt;
&lt;/ol&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;그렇다면 이제 트위치가 현 상황을 헤쳐나가기 위해 진행 중인 전략을 알아보자.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style2&quot; /&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;&lt;b&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;현재 트위치가 진행 예정 중인 전략&lt;/span&gt;&lt;/b&gt;&lt;/h3&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;1117&quot; data-origin-height=&quot;575&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/cprzTX/btrNuozG6ry/q64kkkKKmQ9C9B1zRjdFw1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/cprzTX/btrNuozG6ry/q64kkkKKmQ9C9B1zRjdFw1/img.png&quot; data-alt=&quot;트위치가 영혼을 팔았다는 기사...&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/cprzTX/btrNuozG6ry/q64kkkKKmQ9C9B1zRjdFw1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcprzTX%2FbtrNuozG6ry%2Fq64kkkKKmQ9C9B1zRjdFw1%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1117&quot; height=&quot;575&quot; data-origin-width=&quot;1117&quot; data-origin-height=&quot;575&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;트위치가 영혼을 팔았다는 기사...&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;플랫폼 유지비에 대한 부담을 줄이기 위해 &lt;b&gt;트위치는 2023년 6월부터 트위치와 스트리머의 연간 수익 배분을 조정&lt;/b&gt;하기로 했다. 대부분의 스트리머는 해당되지 않지만, &lt;b&gt;대형 스트리머는 기존 '70:30=스트리머:트위치'에서 스트리머의 수익이 1억 4천만원을 넘는 시점부터 수익 배분이 50:50 형태로 바뀐다&lt;/b&gt;. 이로 인해 전체 스트리머 중 10퍼센트가 영향을 받는다고 한다. (연 1억 4천만원 이상의 수익을 갖는 스트리머가 거의 100만 명이라는 사실에 놀랐다.)&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;이와 같이 트위치는 현재 감당하기 힘든 플랫폼 유지비를 극복하기 위해 수익 배분을 조정하려 한다. 하지만 이로 인해 매우 극심한 피해를 보게 되는 대형 스트리머들이 불만을 공공연하게 표출하고 있고, 현재 트위치 관련 업계에서 매우 큰 이슈로 부상하였다. 이로 인해 수익배분 측면에서 더 유리한 유튜브 게이밍(70:30 배분율)으로 이동하려는 트위치 스트리머가 늘어나고 있다고 한다. 이를 어떻게 감당할지 트위치의 행보가 매우 기대된다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style2&quot; /&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;사실 오늘 과제의 질문과는 결이 맞지 않은 내용을 작성했지만, 트위치의 현 상황을 고려했을 때 이런 방식으로 접근하는 게 최선이었다고 생각한다. &lt;b&gt;혹시라도 문제가 된다면 피드백 부탁드립니다.&lt;/b&gt;&lt;/span&gt;&lt;/p&gt;</description>
      <category>코드스테이츠 #PMB부트캠프</category>
      <author>꿀벌입니다</author>
      <guid isPermaLink="true">https://honeybee8989.tistory.com/30</guid>
      <comments>https://honeybee8989.tistory.com/30#entry30comment</comments>
      <pubDate>Fri, 30 Sep 2022 16:32:26 +0900</pubDate>
    </item>
    <item>
      <title>[코드스테이츠 PMB 14기 W6D2] Flood-it!</title>
      <link>https://honeybee8989.tistory.com/29</link>
      <description>&lt;h2 style=&quot;text-align: center;&quot; data-ke-size=&quot;size26&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;&lt;span&gt;Flood-it!&lt;/span&gt;&lt;/b&gt;&lt;/span&gt;&lt;/h2&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;240&quot; data-origin-height=&quot;240&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/oW9pT/btrNiNT03Gh/QGSWUnkDYnv09DkB9b7cb0/img.webp&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/oW9pT/btrNiNT03Gh/QGSWUnkDYnv09DkB9b7cb0/img.webp&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/oW9pT/btrNiNT03Gh/QGSWUnkDYnv09DkB9b7cb0/img.webp&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FoW9pT%2FbtrNiNT03Gh%2FQGSWUnkDYnv09DkB9b7cb0%2Fimg.webp&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;240&quot; height=&quot;240&quot; data-origin-width=&quot;240&quot; data-origin-height=&quot;240&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;오늘은 Google Analytics를 사용해 Flood-it! 이라는 게임을 분석해보자 한다. 사실 Google Analytics 데모 중 Flood-it!이 있었고, 따라서 이 게임의 analytics 데이터를 내가 직접 보고, 내가 원하는 대로 보는 방식을 정할 수 있어서 해당 앱을 선정했다. Flood-it! 은 22개의 제한된 턴에서 보드의 색상을 통일시키는 게임이다. 게임을 시작하면 아래와 같이 최대 6가지 색상의 블록이 보드를 이루고 있는데, 좌측 상단 코너의 색깔과 맞닿은 블록 색을 게임 하단에서 클릭하면 해당 색으로 변경이 되면서 좌측 상단 코너의 영역이 늘어난다. 이런 식으로 최대한 적은 턴을 사용하여 (최대 22 턴) 보드의 색깔을 통일하는 게임이다. 설명이 별로인 거 같아 예시를 하나 들어보겠다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;예시&lt;/b&gt;&lt;/span&gt;&lt;/h4&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;아래 좌측화면이 첫 번째 턴이고, 우측은 두 번째 턴이다. 첫 번째 턴에서 좌측 상단 블록(좌표 = 0,0)은 녹두색이며, 총 4개의 블록 영역을 차지하고 있다. 첫 번째 턴에서 4개의 녹두색 블록과 맞닿은 블록은 보라색 밖에 없다. 따라서, 보드 아래에 위치한 파렛트에서 보라색을 클릭하면, 우측 화면처럼 해당 영역이 보라색으로 바뀐다. 이런 방식으로 최대 22 턴 내에 보드의 모든 색상을 통일시키는 게임이 Flood-it!이다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imagegridblock&quot;&gt;
  &lt;div class=&quot;image-container&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/CBgs3/btrNjyCgnHt/kxV0UTk9DDY1apCvKwuDW1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/CBgs3/btrNjyCgnHt/kxV0UTk9DDY1apCvKwuDW1/img.png&quot; data-is-animation=&quot;false&quot; data-origin-width=&quot;1080&quot; data-origin-height=&quot;1920&quot; data-filename=&quot;Screenshot_2022.09.29_13.12.45.576.png&quot; width=&quot;262&quot; height=&quot;466&quot; style=&quot;width: 49.4186%; margin-right: 10px;&quot; data-widthpercent=&quot;50&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/CBgs3/btrNjyCgnHt/kxV0UTk9DDY1apCvKwuDW1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FCBgs3%2FbtrNjyCgnHt%2FkxV0UTk9DDY1apCvKwuDW1%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1080&quot; height=&quot;1920&quot;/&gt;&lt;/span&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/AJwAX/btrNjzupSA3/OpyYl0YWlkc1ztFMQQUek1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/AJwAX/btrNjzupSA3/OpyYl0YWlkc1ztFMQQUek1/img.png&quot; data-is-animation=&quot;false&quot; data-origin-width=&quot;1080&quot; data-origin-height=&quot;1920&quot; data-filename=&quot;Screenshot_2022.09.29_13.14.02.142.png&quot; style=&quot;width: 49.4186%;&quot; data-widthpercent=&quot;50&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/AJwAX/btrNjzupSA3/OpyYl0YWlkc1ztFMQQUek1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FAJwAX%2FbtrNjzupSA3%2FOpyYl0YWlkc1ztFMQQUek1%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1080&quot; height=&quot;1920&quot;/&gt;&lt;/span&gt;&lt;/div&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style1&quot; /&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;Flood-it! 의 수익구조&lt;/b&gt;&lt;/span&gt;&lt;/h3&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;span&gt;Flood-it! 은 기본적으로 제공되는 30개의 스테이지가 있고, 어려운 단계에서 22 턴 안에 완료하지 못할 경우 $0.99~$4.99를 지불하여 추가 턴을 구매할 수 있다. 또한, 스테이지를 완료할 때마다 광고가 재생이 되는데, 이를 없애기 위해 $0.99를 지불할 수 있다.&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;u&gt;&lt;b&gt;게임 내 구매 항목&lt;/b&gt;&lt;/u&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;추가 턴 구매 (옵션 1) = $4.99&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;추가 턴 구매 (옵션 2) = $0.99&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;광고 제거 =&amp;nbsp; $0.99&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style1&quot; /&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;핵심 기능 및 관련 지표&lt;/b&gt;&lt;/span&gt;&lt;/h3&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;처음 이 게임을 과제로 선정했을 때, GA 내 데이터를 보면서 굉장히 의아했다. 유저도 너무 적을뿐더러, 지난 일주일간 수익이 $6.07 밖에 되지 않았다. 그래서 개발사인 Lab Pixies가 누군지 궁금해서 찾아봤더니, 별다른 정보는 찾을 수 없었지만 회사 주소가 나와있어 구글맵에서 검색해봤더니 구글 본사였던 것이다. 내 개인적인 추측이지만 구글에서 재미로 게임을 만들어서 릴리스했거나, 아니면 GA의 데모용으로 사용하기 위해 만든 거라고 생각된다. &lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;따라서, 해당 게임의 GA 데이터가 사실 유의미하다고 생각하지 않는다. 어찌 됐든 이 게임이 신생 게임이라는 가정을 하고, 최대한 유의미한 지표를 선택해서 이번 과제를 진행해보도록 하겠다.&amp;nbsp;&lt;/span&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;/span&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;그렇다면 이 게임의 핵심 기능은 무엇일까? 사실 게임의 핵심 기능이 뭐가 되었든, 문제는 유저 수가 정말 없다는 것이다. 유저 자체가 없는데 수익 모델에 대해 고민을 할 필요가 있겠는가 싶다. 게임 자체는 킬링타임으로는 괜찮지만, 부가적인 콘텐츠가 매우 부족하고 게임 플레이에 관한 도움/설명이 전혀 없다. 따라서, 해당 게임의 핵심 포인트를 게임의 playability (풀이: 게임이 난이도는 적절한가? / 재미있는 요소들이 충분히 있는가?)로 정했고, 추적할 지표는 아래와 같다:&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;u&gt;&lt;b&gt;추적할 지표&lt;/b&gt;&lt;/u&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;게임의 playability가 어느 정도인지 확인하기 위해서 2가지 지표를 선택했다.&lt;/span&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;각 스테이지별 유저들이 평균 실패한 횟수&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;각 스테이지별 유저들이 재시도를 한 횟수&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;&lt;b&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;지표 확인을 위해 GA를 어떻게 활용할 수 있을까?&lt;/span&gt;&lt;/b&gt;&lt;/h3&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;위 두가지 지표를 &lt;/span&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;통해, 어느 시점부터 고객이 게임에 어려움을 느끼고 그만두는지 알고 싶었다. 하지만 위와 같은 데이터는 전혀 찾아볼 수 없었다. &lt;/span&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;결국 내가 해볼 수 있는 다른 방식으로 접근을 하기로 했다. GA의 여러 항목을 이것저것 눌러보다, 아래와 같은 자료를 찾았다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;1136&quot; data-origin-height=&quot;408&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/p1jlB/btrNoshHjyZ/PDMyukx1yGveln1qpaIRjk/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/p1jlB/btrNoshHjyZ/PDMyukx1yGveln1qpaIRjk/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/p1jlB/btrNoshHjyZ/PDMyukx1yGveln1qpaIRjk/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fp1jlB%2FbtrNoshHjyZ%2FPDMyukx1yGveln1qpaIRjk%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1136&quot; height=&quot;408&quot; data-origin-width=&quot;1136&quot; data-origin-height=&quot;408&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;'Users who have completed the first 10 progressive levels'라는 문구를 보고 약간의 힌트를 얻었고, 그러면 각 항목들이 어떻게 정의되었는지 보고싶었다. 이것저것 누르다보니 우측에 '보기'란 메뉴가 있어서 들어가 봤더니 아래와 같은 화면이 나왔다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;1189&quot; data-origin-height=&quot;322&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bfVW8f/btrNqbGsdfJ/o2Ibc3Iu1ptHLWcPLK2tck/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bfVW8f/btrNqbGsdfJ/o2Ibc3Iu1ptHLWcPLK2tck/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bfVW8f/btrNqbGsdfJ/o2Ibc3Iu1ptHLWcPLK2tck/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbfVW8f%2FbtrNqbGsdfJ%2Fo2Ibc3Iu1ptHLWcPLK2tck%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1189&quot; height=&quot;322&quot; data-origin-width=&quot;1189&quot; data-origin-height=&quot;322&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;자세히 살펴보니, 10 스테이지를 완료한 사람을 level&amp;gt;=10으로 구분해놓았던 것이다. 그러면 내가 level&amp;gt;0, level&amp;gt;1, level&amp;gt;2 등등 조건을 입력해서 각 조건에 맞는 총 사용자수를 찾으면 된다고 생각했다. 그러면 내가 원하는 대로 수식을 입력할 수 있는 공간만 있으면 된다고 생각했고, 보고서 항목이 그런 역할을 할 수 있다는 걸 알아냈다. 따라서, 보고서에 아래와 같이 조건들을 입력하여 지난 30일간 1~8까지 각각 몇 명의 유저가 해당 스테이지를 완료했는지 알아보았다. (아래 캡처 화면이 잘 안 보이니 확대해서 보기 바란다.)&lt;/span&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imagegridblock&quot;&gt;
  &lt;div class=&quot;image-container&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/ObDOT/btrNlaPZNou/hCmJ2b9I8cznBpV5vSrhPK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/ObDOT/btrNlaPZNou/hCmJ2b9I8cznBpV5vSrhPK/img.png&quot; data-origin-width=&quot;438&quot; data-origin-height=&quot;783&quot; data-is-animation=&quot;false&quot; data-widthpercent=&quot;15.24&quot; style=&quot;width: 15.0664%; margin-right: 10px;&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/ObDOT/btrNlaPZNou/hCmJ2b9I8cznBpV5vSrhPK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FObDOT%2FbtrNlaPZNou%2FhCmJ2b9I8cznBpV5vSrhPK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;438&quot; height=&quot;783&quot;/&gt;&lt;/span&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/AlmFq/btrNo9vv6PN/ct8VQ2dNaH9YWVwtk4dNhk/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/AlmFq/btrNo9vv6PN/ct8VQ2dNaH9YWVwtk4dNhk/img.png&quot; data-origin-width=&quot;1213&quot; data-origin-height=&quot;390&quot; data-is-animation=&quot;false&quot; style=&quot;width: 83.7708%;&quot; data-widthpercent=&quot;84.76&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/AlmFq/btrNo9vv6PN/ct8VQ2dNaH9YWVwtk4dNhk/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FAlmFq%2FbtrNo9vv6PN%2Fct8VQ2dNaH9YWVwtk4dNhk%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1213&quot; height=&quot;390&quot;/&gt;&lt;/span&gt;&lt;/div&gt;
  &lt;figcaption&gt;좌: 보고서 설정 / 우:세그먼트 조건 설정&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;위 자료를 입력하고 보고서 시각화 형태를 테이블로 설정했더니 아래와 같은 데이터가 나왔다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;760&quot; data-origin-height=&quot;112&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/baW0RR/btrNo8ceNP7/lkcAsA3tlbCmGXW8bh2rfk/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/baW0RR/btrNo8ceNP7/lkcAsA3tlbCmGXW8bh2rfk/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/baW0RR/btrNo8ceNP7/lkcAsA3tlbCmGXW8bh2rfk/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbaW0RR%2FbtrNo8ceNP7%2FlkcAsA3tlbCmGXW8bh2rfk%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;760&quot; height=&quot;112&quot; data-origin-width=&quot;760&quot; data-origin-height=&quot;112&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;752&quot; data-origin-height=&quot;107&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/cZEeFx/btrNqttuENR/MPcmjTyKj5rrX1dkAZpltk/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/cZEeFx/btrNqttuENR/MPcmjTyKj5rrX1dkAZpltk/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/cZEeFx/btrNqttuENR/MPcmjTyKj5rrX1dkAZpltk/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcZEeFx%2FbtrNqttuENR%2FMPcmjTyKj5rrX1dkAZpltk%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;752&quot; height=&quot;107&quot; data-origin-width=&quot;752&quot; data-origin-height=&quot;107&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;앞서 말했듯이 Flood-it!은 게임만 던져주고 설명은 전혀 없기 때문에, 정말 쉬운 1 스테이지를 제외하고는 상당수의 유저들이 방법을 정확히 모르기 때문에 2 스테이지에서 게임을 그만했을 거라는 추측을 해본다. 사실 이 게임은 조금의 도움만 있으면 어렵진 않지만 그런 걸 전혀 제공하지 않는다. 더불어 게임 자체도 그리 재밌지는 않다.&amp;nbsp;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;결론적으로 Flood-it!에 유입되는 인구는 1주일에 만명이 넘을정도로 아주 적진 않지만, 불친절한 UI로 인해서 조금만 막히면 스테이지마다 이용자가 급격하게 떨어진다고 나름 추측해봤다. 요즘 모바일 게임처럼 튜토리얼을 제공하고 막힐때마다 광고를 보면 힌트를 주는 방식으로 게임을 구성하면 어느 정도 효과를 볼 수 있지 않나 싶다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style1&quot; /&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;결론적으로 원하는 데이터를 찾진 못했지만, 여러 번 사용하다 보면 조금씩 나아질 거라는 생각이 든다. 그리고 애초에 해당 데이터를 찾아낼 수 있는 변수가 제공되지 않기 때문에 내가 원하는 데이터를 제공하지 않는다고 생각한다. 그래도 GA에서 제공하는 여러 가지 변수를 통해서 데이터를 생성했다는 점에서 의미를 두어야겠다.&lt;/span&gt;&lt;/p&gt;</description>
      <category>PMB부트캠프#코드스테이츠</category>
      <author>꿀벌입니다</author>
      <guid isPermaLink="true">https://honeybee8989.tistory.com/29</guid>
      <comments>https://honeybee8989.tistory.com/29#entry29comment</comments>
      <pubDate>Thu, 29 Sep 2022 14:58:46 +0900</pubDate>
    </item>
    <item>
      <title>[코드스테이츠 PMB 14기 W6D1] 단식 추적기</title>
      <link>https://honeybee8989.tistory.com/28</link>
      <description>&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;이전 직장을 다니면서 야근하고 야식먹고, 일주일에 술을 3~4번씩 먹다가 살이 10kg나 찐적이 있다. 엄청 후회하고 운동을 시작했는데, 먹는 양이 줄지 않아서 다이어트에 실패한 경험이 있다. 나중에 퇴사를 하고 집에서 놀면서 살을 빼려고 했는데, 운동하기는 귀찮고 해서 간헐적 단식을 했고 2개월 사이에 8kg나 빠졌었다. 문제는 지금 다시 살이 쪘다는 것이다. 그래서 다시 간헐적 단식을 하려 하는데, 요즘 PM 공부를 하느라 워낙 스트레스를 많이 받아서 나 혼자의 의지로는 힘들거 같다는 판단이 섰다. 그래서 '단식 추적기' 앱을 받아서 실천하려고 하는데, 마침 해당 앱을 오늘 과제의 주제로 사용할 수 있을거 같았다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h2 data-ke-size=&quot;size26&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;'단식 추적기'의 고객 행동 Flow Chart&lt;/b&gt;&lt;/span&gt;&lt;/h2&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;아래와 같이 단식추적기를 사용하는 유저가 앱을 설치하는 시점부터 사용(경험)하는 단계까지 어떤 행동을 하게 되는지 flow chart를 이용해 보여주려 한다. '가입 및 설정 단계' 에서는 순차적으로 세부 단계를 통해 고객의 현재 상태 파악하기 위한 데이터 수집을 진행하고, 목표와 단식 플랜을 설정한다. '경험 단계'는 크게 가지 기능으로 분류 되는데, '단식' 항목을 제외하면 모두 부가적인 기능들이다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;9184&quot; data-origin-height=&quot;4736&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bH9adk/btrNjpRJ8fR/6tQwXoPzigy1kxpWQyVSN1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bH9adk/btrNjpRJ8fR/6tQwXoPzigy1kxpWQyVSN1/img.png&quot; data-alt=&quot;'단식 추적기' 고객 행동 Flow Chart&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bH9adk/btrNjpRJ8fR/6tQwXoPzigy1kxpWQyVSN1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbH9adk%2FbtrNjpRJ8fR%2F6tQwXoPzigy1kxpWQyVSN1%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;9184&quot; height=&quot;4736&quot; data-origin-width=&quot;9184&quot; data-origin-height=&quot;4736&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;'단식 추적기' 고객 행동 Flow Chart&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;위 flow chart가 잘 안보일 경우 아래 링크를 통해 확인 부탁드린다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;fileblock&quot; data-ke-align=&quot;alignCenter&quot;&gt;&lt;a href=&quot;https://blog.kakaocdn.net/dn/VrT4B/btrNi50D7gM/EFMkcHH5vtOWLNCDV93kRK/flowchart.pdf?attach=1&amp;amp;knm=tfile.pdf&quot; class=&quot;&quot;&gt;
    &lt;div class=&quot;image&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;desc&quot;&gt;&lt;div class=&quot;filename&quot;&gt;&lt;span class=&quot;name&quot;&gt;flowchart.pdf&lt;/span&gt;&lt;/div&gt;
&lt;div class=&quot;size&quot;&gt;6.02MB&lt;/div&gt;
&lt;/div&gt;
  &lt;/a&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h2 data-ke-size=&quot;size26&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;'단식 추적기'의 고객 행동에 따른 데이터 이동&lt;/b&gt;&lt;/span&gt;&lt;/h2&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;유저가 해당 앱을 사용하면서 실행하는 여러 행동을 포괄적으로 묶어 '데이터 입력'과 '데이터 요청'으로 구분하여 유저한테는 어떤 화면이 보이고, 유저가 입력하는 데이터가 어떻게 전송되고 도착하는지 설명하려 한다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;1. UI 단계 (데이터 입력)&lt;/b&gt;&lt;/span&gt;&lt;/h4&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;유저가 사용하기 편리한 GUI를 통해 데이터를 입력한다. 아래는 목표 체중을 입력하는 단계 화면이다.&amp;nbsp;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-filename=&quot;Screenshot_2022.09.28_19.26.33.851.png&quot; data-origin-width=&quot;1080&quot; data-origin-height=&quot;1920&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/c500q6/btrNhuNINwk/Vsf0pB8VeA459GAz4jldSK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/c500q6/btrNhuNINwk/Vsf0pB8VeA459GAz4jldSK/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/c500q6/btrNhuNINwk/Vsf0pB8VeA459GAz4jldSK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fc500q6%2FbtrNhuNINwk%2FVsf0pB8VeA459GAz4jldSK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;375&quot; height=&quot;667&quot; data-filename=&quot;Screenshot_2022.09.28_19.26.33.851.png&quot; data-origin-width=&quot;1080&quot; data-origin-height=&quot;1920&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;2. 클라이언트 단계 (데이터 저장)&lt;/b&gt;&lt;/span&gt;&lt;/h4&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;위와 같이 입력된 체중은 유저의 데이터에 추가 된다. 아래 화면의 유저 데이터에 '현재 체중 = 65kg'가 입력된 것을 확인할 수 있다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;1792&quot; data-origin-height=&quot;3336&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/LkNEr/btrNeIslgsb/hUiXjkUeIFbdcWQqeX0ugK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/LkNEr/btrNeIslgsb/hUiXjkUeIFbdcWQqeX0ugK/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/LkNEr/btrNeIslgsb/hUiXjkUeIFbdcWQqeX0ugK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FLkNEr%2FbtrNeIslgsb%2FhUiXjkUeIFbdcWQqeX0ugK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;354&quot; height=&quot;659&quot; data-origin-width=&quot;1792&quot; data-origin-height=&quot;3336&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;3. 서버 단계 (데이터 전송 및 가공)&lt;/b&gt;&lt;/span&gt;&lt;/h4&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;클라이언트에 저장된 유저 데이터는 앱 서버로 전송되고, 비정형 데이터는 전처리(가공) 진행 후 데이터베이스로 전송된다. 여기서 가공된 데이터는 데이터베이스의 효율성을 위해 데이터가 효율적인 형태로 변형된다고 생각한다. 아래는 내가 추측하는 가공된 형태의 데이터 예시다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;table style=&quot;border-collapse: collapse; width: 100%; height: 94px;&quot; border=&quot;1&quot; data-ke-align=&quot;alignLeft&quot; data-ke-style=&quot;style12&quot;&gt;
&lt;tbody&gt;
&lt;tr style=&quot;height: 20px;&quot;&gt;
&lt;td style=&quot;width: 33.3333%; text-align: center; height: 20px;&quot;&gt;&lt;b&gt;분류&lt;/b&gt;&lt;/td&gt;
&lt;td style=&quot;width: 33.3333%; text-align: center; height: 20px;&quot;&gt;&lt;b&gt;가공 전&lt;/b&gt;&lt;/td&gt;
&lt;td style=&quot;width: 33.3333%; text-align: center; height: 20px;&quot;&gt;&lt;b&gt;가공 후&lt;/b&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr style=&quot;height: 20px;&quot;&gt;
&lt;td style=&quot;width: 33.3333%; text-align: center; height: 20px;&quot;&gt;&lt;b&gt;성별 (카테고리 ID = 00)&lt;/b&gt;&lt;/td&gt;
&lt;td style=&quot;width: 33.3333%; text-align: center; height: 20px;&quot;&gt;남&lt;/td&gt;
&lt;td style=&quot;width: 33.3333%; text-align: center; height: 20px;&quot;&gt;0 (남성 = 0, 여성 = 1)&lt;/td&gt;
&lt;/tr&gt;
&lt;tr style=&quot;height: 20px;&quot;&gt;
&lt;td style=&quot;width: 33.3333%; text-align: center; height: 20px;&quot;&gt;&lt;b&gt;단식 강도 (카테고리 ID = 01)&lt;/b&gt;&lt;/td&gt;
&lt;td style=&quot;width: 33.3333%; text-align: center; height: 20px;&quot;&gt;쉬운&lt;/td&gt;
&lt;td style=&quot;width: 33.3333%; text-align: center; height: 20px;&quot;&gt;0 (쉬운 = 0, ... , 어려운 = 4)&lt;/td&gt;
&lt;/tr&gt;
&lt;tr style=&quot;height: 17px;&quot;&gt;
&lt;td style=&quot;width: 33.3333%; text-align: center; height: 17px;&quot;&gt;&lt;b&gt;단식 경험 여부 (카테고리 ID = 02)&lt;/b&gt;&lt;/td&gt;
&lt;td style=&quot;width: 33.3333%; text-align: center; height: 17px;&quot;&gt;가끔&lt;/td&gt;
&lt;td style=&quot;width: 33.3333%; text-align: center; height: 17px;&quot;&gt;1 (없음 = 0, 가끔 = 1, 매일 = 2)&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;4. 데이터베이스 단계 (데이터 저장)&lt;/b&gt;&lt;/span&gt;&lt;/h4&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;데이터베이스는 가공된 데이터가 저장되어있으므로 아래와 같은 형태를 지니고 있지 않을까 추측해본다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;&lt;u&gt;예시&lt;/u&gt;&lt;/b&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;김OO(User ID = 1926751)의 단식 강도 =&lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;b&gt;&quot;1926751.01.0&quot;&lt;/b&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;김OO(User ID = 1926751)의 단식 강험 여부&amp;nbsp; =&amp;nbsp;&lt;b&gt;&quot;1926751.02.1&quot;&lt;/b&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;위와 같이 4단계를 통해 고객이 입력한 데이터가 데이터베이스에 저장되지 않을까 싶다. 그리고 고객이 특정 데이터를 요청한 경우, 위 4단계를 반대로 진행하면 된다고 생각한다. 물론 중간에 유저가 볼 수 있는 형식으로 데이터 포맷 전환도 이뤄져야 한다. 이해를 돕기 위해 데이터 이동 경로를 도식화하였으니 아래 파일을 참고 바란다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;fileblock&quot; data-ke-align=&quot;alignCenter&quot;&gt;&lt;a href=&quot;https://blog.kakaocdn.net/dn/cwiSkJ/btrNeHmIxYn/SEwzoqTzemVu2iFUnNH8X1/dataflow.pdf?attach=1&amp;amp;knm=tfile.pdf&quot; class=&quot;&quot;&gt;
    &lt;div class=&quot;image&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;desc&quot;&gt;&lt;div class=&quot;filename&quot;&gt;&lt;span class=&quot;name&quot;&gt;dataflow.pdf&lt;/span&gt;&lt;/div&gt;
&lt;div class=&quot;size&quot;&gt;1.35MB&lt;/div&gt;
&lt;/div&gt;
  &lt;/a&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;</description>
      <category>PMB부트캠프 #코드스테이츠</category>
      <author>꿀벌입니다</author>
      <guid isPermaLink="true">https://honeybee8989.tistory.com/28</guid>
      <comments>https://honeybee8989.tistory.com/28#entry28comment</comments>
      <pubDate>Wed, 28 Sep 2022 19:59:13 +0900</pubDate>
    </item>
    <item>
      <title>[코드스테이츠 PMB 14기 W5] 스포티파이의 성장 전략 - rev.1</title>
      <link>https://honeybee8989.tistory.com/27</link>
      <description>&lt;h2 data-ke-size=&quot;size26&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;머리글&lt;/b&gt;&lt;/span&gt;&lt;/h2&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;지난 과제를 통해 스포티파이의 새로운 기능을 기획해보았다. 오늘은 현재 스포티파이가 추진하고 있는 비즈니스 전략을 통해 growh point를 찾았는지에 대해 알아보고, AARRR 모델을 통해 고객이 스포티파이를 이용하는 과정 속에서 개선되어야 할 부분을 생각해보려 한다. 먼저 스포티파이가 현재 어떤 전략을 추진 중인지 알아보고, 그중 눈에 띄는 2가지를 선택해 설명해보려 한다. 참고로 스포티파이가 아직 한국 시장에는 제대로 정착을 하지 못하였기 때문에, 오늘 나눌 내용은 스포티파이가 글로벌 시장을 (특히 북미, 동남아시아, 유럽, 남미 등 지역) 대상으로 추진 중인 전략이라는 점 참고하기 바란다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h2 data-ke-size=&quot;size26&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;2022년 스포티파이의 전략&lt;/b&gt;&lt;/span&gt;&lt;/h2&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;스포티파이의 최신 소식을 듣기 위해 올해 6월에 개최되었던 '스포티파이 투자자의 날' 행사 영상을 참고하였다. 이 행사에서 스포티파이의 CEO인 Daniel Ek은 3개의 프로덕트에 대한 전망과 계획을 발표했다 : &lt;b&gt;팟캐스트, 오디오북, 아티스트 에이전시&lt;/b&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;위에 언급한 3가지 프로덕트 중 팟캐스트를 주제로, 스포티파이가 현재 어떤 전략을 추진 중이지 얘기해보려 한다. 팟캐스트를 선택한 이유는 이미 스포티파이가 2018년부터 추진해온 프로젝트이며, 현시점에서 가장 성장세가 뚜렷하기 때문이다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;스포티파이의 팟캐스트 서비스 성장 스토리&lt;/b&gt;&lt;/span&gt;&lt;/h3&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;2018년 팟캐스트 서비스를 출시한 이후로 스포티파이의 팟캐스트 청취자는 매우 급격하게 증가했다.&amp;nbsp;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imagegridblock&quot;&gt;
  &lt;div class=&quot;image-container&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/cVBz6M/btrNcmhHa4e/C1fKrG1eWWuMmgq3XxHy6k/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/cVBz6M/btrNcmhHa4e/C1fKrG1eWWuMmgq3XxHy6k/img.png&quot; data-origin-width=&quot;640&quot; data-origin-height=&quot;319&quot; data-is-animation=&quot;false&quot; style=&quot;width: 65.8233%; margin-right: 10px;&quot; data-widthpercent=&quot;66.6&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/cVBz6M/btrNcmhHa4e/C1fKrG1eWWuMmgq3XxHy6k/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcVBz6M%2FbtrNcmhHa4e%2FC1fKrG1eWWuMmgq3XxHy6k%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;640&quot; height=&quot;319&quot;/&gt;&lt;/span&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/ybNOk/btrNdrWU6GI/YYZ9WUEK7GuC7QlEzf7Fn0/img.webp&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/ybNOk/btrNdrWU6GI/YYZ9WUEK7GuC7QlEzf7Fn0/img.webp&quot; data-origin-width=&quot;644&quot; data-origin-height=&quot;640&quot; data-is-animation=&quot;false&quot; style=&quot;width: 33.0139%;&quot; data-widthpercent=&quot;33.4&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/ybNOk/btrNdrWU6GI/YYZ9WUEK7GuC7QlEzf7Fn0/img.webp&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FybNOk%2FbtrNdrWU6GI%2FYYZ9WUEK7GuC7QlEzf7Fn0%2Fimg.webp&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;644&quot; height=&quot;640&quot;/&gt;&lt;/span&gt;&lt;/div&gt;
  &lt;figcaption&gt;좌: 연도별 스포티파이 팟캐스트 콘텐츠 수 / 우: 미국 내 팟캐스트 청취자 수, Apple vs. Spotify (단위: 백만)&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;출시 초기에는 스포티파이의 전체 인구 중 7%만이 팟캐스트를 이용했으나, 현재는 30% 이상이 팟캐스트를 이용한다. 현재 스포티파이의 총 사용자수는 4억 2200만 명이므로, 약 1억 4000만 명의 팟캐스트 이용자가 있는 셈이다. 참고로 글로벌 팟캐스트 청취자수는 3억 8천만 명 정도 된다. 따라서 스포티파이의&lt;b&gt; 팟캐스트 세계 시장 점유율이 약 37%&lt;/b&gt;라고 생각 할 수 있다. 2021년 하반기에는 애플 팟캐스트를 제치고 미국 팟캐스트 시장 점유율 1위를 차지하게 되었다. 팟캐스트 수요가 증가하니 스포티파이가 보유한 콘텐츠 수도 2018년도 기준 18만 개에서 현재 400만 개 이상으로 급격하게 증가했다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;스포티파이의 팟캐스트는 어떤 이유로 이렇게 급성장을 하게 된걸까? 스포티파이는 'The Joe Rogan Experience', 'Call Her Daddy'와 같은 여러 유명 팟캐스트 프로그램과 Gimlet Media, Parcast와 같은 팟캐스트 네트워크와 계약을 통해 많은 독점 콘텐츠를 확보하였고, 따라서 해당 콘텐츠를 이용하기 위해 많은 이용자들이 다른 플랫폼에서 스포티파이로 이동하였다. 또한, 스포티파이 내에서 자체적으로 &lt;b&gt;팟캐스트 제작, 유통, 고객분석 등을 할 수 있는 플랫폼(앵커)을 만들어, 많은 팟캐스터(팟캐스트 제작자)들을 스포티파이로 모집&lt;/b&gt;시켰다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;스포티파이가 팟캐스트 시장에 뛰어든 이유&lt;/b&gt;&lt;/span&gt;&lt;/h4&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;그렇다면 어떤 이유로 인해서 스포티파이가 팟캐스트 시장에 초점을 두고 있는 걸까? 아래 자료를 살펴보자.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;1219&quot; data-origin-height=&quot;405&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/9olV1/btrNdrJm2GG/vN66YEF3tXK5robCD7ABOk/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/9olV1/btrNdrJm2GG/vN66YEF3tXK5robCD7ABOk/img.png&quot; data-alt=&quot;팟캐스트 시장 전망 (출처: Acumen)&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/9olV1/btrNdrJm2GG/vN66YEF3tXK5robCD7ABOk/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F9olV1%2FbtrNdrJm2GG%2FvN66YEF3tXK5robCD7ABOk%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1219&quot; height=&quot;405&quot; data-origin-width=&quot;1219&quot; data-origin-height=&quot;405&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;팟캐스트 시장 전망 (출처: Acumen)&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;ol style=&quot;list-style-type: decimal;&quot; data-ke-list-type=&quot;decimal&quot;&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;2021년 팟캐스트 시장 규모는 137억 달러 (한화 15조 원)로 상당히 규모가 큰 시장이다. 하지만 여기서 더 놀라운 점은 예상 CAGR(연평균 성장률)이 30퍼센트를 넘는다는 점이다. 경제 전문가가 아니어서 정확히는 알 수는 없지만, 이미 일정 수요가 있는 시장이 이런 수준의 CAGR을 나타낸다는 점은 시장 전망이 매우 좋다는 뜻으로 해석할 수 있다. 따라서, 음원 플랫폼 세계 1위인 스포티파이가 탄탄한 기반을 통해 전망이 밝은 팟캐스트 시장으로 진출하는 것은 어찌 보면 당연한 수순이라고 생각한다. &lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;팟캐스트의 평균 청취 시간은 음원보다 더 길기 때문에, 음원보다 광고수익 측면에서 기댓값이 훨씬 높다. (아래 자료 참고)&lt;/span&gt;&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;700&quot; data-origin-height=&quot;525&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/xT2dm/btrNclQF4vA/A5z3LnoEYmfiIGzHlujIfK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/xT2dm/btrNclQF4vA/A5z3LnoEYmfiIGzHlujIfK/img.png&quot; data-alt=&quot;일주일 평균 팟캐스트 청취 시간&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/xT2dm/btrNclQF4vA/A5z3LnoEYmfiIGzHlujIfK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FxT2dm%2FbtrNclQF4vA%2FA5z3LnoEYmfiIGzHlujIfK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;700&quot; height=&quot;525&quot; data-origin-width=&quot;700&quot; data-origin-height=&quot;525&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;일주일 평균 팟캐스트 청취 시간&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;팟캐스트를 위한 과감한 투자, 그리고 현재 상황&lt;/b&gt;&lt;/span&gt;&lt;/h4&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;이제까지 스포티파이가 어떤 이유로 팟캐스트 시장에 집중하고 있는지 알아봤다. 그렇다면 앞으로의 계획과 그 계획을 실천하기 위한 전략은 무엇일까?&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;사실 지금까지 스포티파이의 팟캐스트 사업은 놀랍게도 2018년 서비스를 개시한 이후로 지속적으로 적자였다. 이유를 알기 위해 2019년을 시작으로 스포티파이가 팟캐스트 사업에 투자한 이력을 몇 가지 살펴보자:&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;2019년 - Gimlet Media (팟캐스트 네트워크)와 Anchor(팟캐스트 제작/퍼블리싱 서비스)를 4000억 원에 인수&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;2020년 - The Ringer (팟캐스트 네트워크)를 2300억원에 인수&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;2020년 - The Joe Rogan Experience (팟캐스트 쇼)를 2400억 원에 3.5년 독점 계약&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;이와 같이 불과 18개월 사이에 스포티파이는 팟캐스트 플랫폼과 콘텐츠를 확보하기 위해 1조 원에 가까운 금액을 투자했다. 그리고 실제 &lt;b&gt;투자한 금액은 1조원 이상&lt;/b&gt;이라고 스포티파이 CEO가 밝혔다. 2020년 당시 스포티파이의 연매출이 9조 정도였는데, 대략 &lt;b&gt;매출의 11퍼센트 이상을 사업의 한 분야에 투자&lt;/b&gt;한 것이다. 이렇게 엄청난 투자를 감행하였지만 아직도 적자를 기록중인 스포티파이가 생각하는 팟캐스트 사업의 전망은 어떠할까?&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;888&quot; data-origin-height=&quot;192&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/2lY91/btrNvNGxMnT/7x5VR8Vr4iHlyS8V6KrlQ0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/2lY91/btrNvNGxMnT/7x5VR8Vr4iHlyS8V6KrlQ0/img.png&quot; data-alt=&quot;스포티파이의 팟캐스트와 광고에 대한 과투자로 인해 수익률에 대한 문제를 제기하고 있다. (출처: The Motley Fool)&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/2lY91/btrNvNGxMnT/7x5VR8Vr4iHlyS8V6KrlQ0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F2lY91%2FbtrNvNGxMnT%2F7x5VR8Vr4iHlyS8V6KrlQ0%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;888&quot; height=&quot;192&quot; data-origin-width=&quot;888&quot; data-origin-height=&quot;192&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;스포티파이의 팟캐스트와 광고에 대한 과투자로 인해 수익률에 대한 문제를 제기하고 있다. (출처: The Motley Fool)&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;오늘 이 주제를 계속 조사하다 보니 스포티파이 '투자자의 날' 행사에서 왜 팟캐스트가 메인 이슈였는지 감이 오기 시작했다. &lt;b&gt;2021년 기준 팟캐스트 사업의 그로스 마진은 -57%이었고,&lt;/b&gt; 따라서 팟캐스트와 오디오북 같은 사업에 대한 투자자들의 부정적인 시각이 많아졌다. 결과적으로 스포티파이는 2022년 4월부터 5월 한 달간 주가가 $160에서 $80로 반토막 나버렸다. 투자자들의 신뢰를 회복하고자 이번 '투자자의 날' 행사에서 3~5년 내로 팟캐스트 사업이 그로스 마진 30~35%을 달성할 거라는 주장을 했지만 (아래 자료 참고), 실질적인 결과물이 없는 현재로서는 대다수의 마음을 돌리지는 못했다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;1280&quot; data-origin-height=&quot;517&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/da1LcG/btrNcYguNZe/3rDK82KuKLyx9zedKTH0dk/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/da1LcG/btrNcYguNZe/3rDK82KuKLyx9zedKTH0dk/img.png&quot; data-alt=&quot;그로스 마진 (음원, 팟캐스트, 이외 콘텐츠 로 분류)&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/da1LcG/btrNcYguNZe/3rDK82KuKLyx9zedKTH0dk/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fda1LcG%2FbtrNcYguNZe%2F3rDK82KuKLyx9zedKTH0dk%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1280&quot; height=&quot;517&quot; data-origin-width=&quot;1280&quot; data-origin-height=&quot;517&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;그로스 마진 (음원, 팟캐스트, 이외 콘텐츠 로 분류)&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;팟캐스트 사업 흑자 전환 전략&lt;/b&gt;&lt;/span&gt;&lt;/h4&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;그렇다면 스포티파이는 어떤 방법으로 흑자 전환을 노리고 있을까?&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;b&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;1. &lt;/span&gt;&lt;/b&gt;&lt;u&gt;&lt;b&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;span style=&quot;letter-spacing: 0px;&quot;&gt;지속적인 독점/오리지널 콘텐츠 확장과 고객 유입을 통해 팟캐스트의 광고 수입을 증가시킨다&lt;/span&gt;&lt;/span&gt;&lt;/b&gt;&lt;/u&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;&amp;lt;추가&amp;gt;&lt;/b&gt; 2021년 기준 스포티파이의 팟캐스트 카탈로그 중 75%는 앵커를 통해 무료로 제작이 되었으며, 이 중 80%는 개인이 직접 운영하는 팟캐스터들이 제작하였다. &lt;b&gt;이제 우리가 유튜브에 개인 브이로그를 올리듯이, 누구나 앵커를 통해 팟캐스트를 제작/유통하고 이에 따른 수익을 얻을 수 있게 된것이다.&lt;/b&gt; 현재 팟캐스트의 상위권 차트에 진입한 컨텐츠 중 35%가 앵커를 통해 제작되었다. 그리고 앞서 언급한듯이 현재 스포티파이 내 팟캐스터 청취자는 1억 4000만 명이며, 이 시장의 CAGR은 31.2%로 성장 가능성이 상당히 높다. 따라서, 수요가 부족한 시장은 절대 아니라고 생각한다. &lt;b&gt;&amp;lt;/추가&amp;gt;&lt;/b&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;575&quot; data-origin-height=&quot;349&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/b60cGU/btrN4Qa9oNf/N1M4ZUixlN7goKe54ssa4K/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/b60cGU/btrN4Qa9oNf/N1M4ZUixlN7goKe54ssa4K/img.png&quot; data-alt=&quot;누구나 팟캐스터가 될 수 있는 점을 강조하는 앵커 문구&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/b60cGU/btrN4Qa9oNf/N1M4ZUixlN7goKe54ssa4K/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fb60cGU%2FbtrN4Qa9oNf%2FN1M4ZUixlN7goKe54ssa4K%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;575&quot; height=&quot;349&quot; data-origin-width=&quot;575&quot; data-origin-height=&quot;349&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;누구나 팟캐스터가 될 수 있는 점을 강조하는 앵커 문구&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;span&gt;이와 같이 스포티파이는 앵커 인수와 대형 팟캐스터 영입을 위해 과감한 투자를 하여 팟캐스트 생태계 구축을 완료하였고,&amp;nbsp;&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;span&gt;앞으로는 수익을 개선시킬 방향만 잘 잡으면 된다고 생각한다. 이미 &lt;/span&gt;팟캐스트의 수요가 3년 사이 급증하면서 그에 따른 광고 수입도 크게 증가하였고, 2019년 당시 230억 원에 불과했던 미국 시장 내 팟캐스트 광고 수입이 2021년 1조 4000억 원까지 증가하였다. 그리고 2024년에는 5조 원까지 증가할 거라는 전망이다. 또한, 현재 &lt;b&gt;팟캐스트의 모든 콘텐츠 중 14%에서만 수익이 발생&lt;/b&gt;한다고 한다. 어떤 이유에서 일부 콘텐츠만 수익을 발생하고 있는지 모르겠지만, &lt;b&gt;스포티파이는 광고 수익이 발생하는 콘텐츠 비중을 점차 늘릴거라 밝혔다.&amp;nbsp;&lt;/b&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;783&quot; data-origin-height=&quot;535&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/cdshdM/btrNcY1Qe64/VciDQkiuxs9GtVYKtNMMQ1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/cdshdM/btrNcY1Qe64/VciDQkiuxs9GtVYKtNMMQ1/img.png&quot; data-alt=&quot;팟캐스트 광고 수익 전망 (미국 시장)&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/cdshdM/btrNcY1Qe64/VciDQkiuxs9GtVYKtNMMQ1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcdshdM%2FbtrNcY1Qe64%2FVciDQkiuxs9GtVYKtNMMQ1%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;783&quot; height=&quot;535&quot; data-origin-width=&quot;783&quot; data-origin-height=&quot;535&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;팟캐스트 광고 수익 전망 (미국 시장)&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;2. &lt;u&gt;팟캐스트 구독&amp;nbsp; 수입에 대한 수수료 부가&lt;/u&gt;&lt;/b&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;현재 팟캐스터들은 $2.99, $4.99, $7.99 중 하나를 선택해 구독자들에게 월 구독료를 청구하지만 스포티파이는 이에 대한 수수료를 전혀 받지 않는다. 하지만 2023년부터 스포티파이는 팟캐스터로부터 구독 수익의 5%를 수수료로 청구할 예정이라고 한다. (애플 팟캐스트 서비스의 수수료가 15~30%인점을 감안하면 훨씬 관대한 조건이다.)&amp;nbsp;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;687&quot; data-origin-height=&quot;117&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/eFZYNz/btrNvMHEQ7n/fWpVJ62kykXumMebEqowI1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/eFZYNz/btrNvMHEQ7n/fWpVJ62kykXumMebEqowI1/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/eFZYNz/btrNvMHEQ7n/fWpVJ62kykXumMebEqowI1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FeFZYNz%2FbtrNvMHEQ7n%2FfWpVJ62kykXumMebEqowI1%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;687&quot; height=&quot;117&quot; data-origin-width=&quot;687&quot; data-origin-height=&quot;117&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;&amp;lt;추가&amp;gt; &lt;/b&gt;그렇지만 5%의 수수료를 통해 스포티파이의 측면에서 매출이 크게 증가할거라 생각하지는 않는다. 그리고 5%라는 낮은 수수료를 통해 타 플랫폼에서 팟캐스터들을 데려오기 위한 전략이라고 생각한다. 물론 지금도 작은 시장은 아니지만, 팟캐스트 시장이 더 성장하고, 팟캐스터들이 스포티파이에 자리를 잡아 많은 구독자를 보유하게 되면, 이런 수수료는 자연스럽게 오르지 않을까 싶다. &lt;b&gt;&amp;lt;/추가&amp;gt;&lt;/b&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style1&quot; /&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;이제 스포티파이가 한 단계 더 성장하기 위해 2018년에 팟캐스트라는 콘텐츠를 추가하였고, 과감한 투자를 통해 현재 팟캐스트 생태계 구축을 완료한 상태다. 비록 초기 투자금으로 인해 아직까지는 마이너스지만, 앞서 보았듯이 팟캐스트 광고 수익은 매년 큰 수치로 증가하고 있고, 수익 발생 콘텐츠 증가 및 구독 수수료 등을 통해 수익이 발생할 요소는 계속 증가할 예정이다. &lt;/span&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;/span&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;이와 같이, 시작은 험난했지만 탄탄한 기반을 다져놓은 스포티파이의 팟캐스트 사업은 흑자 전환을 위한 계획이 마련되어있다. 시간이 우리에게 답을 알려주겠지만, 스포티파이의 계획은 현실성 있다고 판단이 된다. 따라서,&lt;b&gt; 스포티파이는 팟캐스트를 통해 사업 확장을 하여 매출 증가에 대한 growth point를 찾았다고 생각한다.&lt;/b&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style2&quot; /&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h2 data-ke-size=&quot;size26&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;AARRR 모델을 통한 서비스 분석&lt;/b&gt;&lt;/span&gt;&lt;/h2&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;아래 그림을 통해 AARRR 모델의 개별 퍼널에서 유저가 보여주는 행동을 적어보았다. 그리고 이런 행동들은 스포티파이가 유저들에게 바라는 가장 이상적인 모습이다. 그렇다면 이런 행동을 이끌어내기 위해 스포티파이가 확인해야 할 지표, 그리고 무엇을 통해 해당 지표를 개선할 수 있을지 알아보겠다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;2600&quot; data-origin-height=&quot;1476&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/laK8Z/btrNyD4dSTT/YOMzhlxKseoFuoGUjLSK10/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/laK8Z/btrNyD4dSTT/YOMzhlxKseoFuoGUjLSK10/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/laK8Z/btrNyD4dSTT/YOMzhlxKseoFuoGUjLSK10/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FlaK8Z%2FbtrNyD4dSTT%2FYOMzhlxKseoFuoGUjLSK10%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;2600&quot; height=&quot;1476&quot; data-origin-width=&quot;2600&quot; data-origin-height=&quot;1476&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;1단계 - Acquisition&lt;/b&gt;&lt;/span&gt;&lt;/h3&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;아무래도 신규 고객을 유입이 잘 되는지 확인하기 위해서 볼 지표는 &lt;b&gt;신규 유저 수&lt;/b&gt;가 가장 직관적이지 않을까 싶다. 그렇다면 해당 지표를 올리기 위한 스포티파이의 장치는 무엇일까? 바로, &lt;b&gt;스포티파이의 freemium 모델&lt;/b&gt;이라고 생각한다. 타 플랫폼과 달리 스포티파이는 광고를 통해 무료 서비스를 제공하기 때문에 신규 고객들이 부담없이 가입하고 경험을 해볼 수 있다. 그리고 이런 요소가 스포티파이의 신규 고객 유입에 가장 중요한 역할을 한다고 생각한다.&lt;/span&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;2단계 - Activation&lt;/b&gt;&lt;/span&gt;&lt;/h3&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;Activation 단계는 스포티파이의 각 유저들이 얼마나 활발하게 서비스를 이용하는지를 측정하여 해당 퍼널의 개선 여부를 파악할 수 있다고 본다. 여기서 볼 수 있는 지표는 아래와 같다:&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;1개월간 총 사용 시간&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;본인만의 플레이리스트 작성&amp;nbsp;&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;컨텐츠에 대한 좋아요/팔로우 여부&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;위와 같은 지표들을 통해 스포티파이는 각 유저들이 스포티파이의 서비스를 얼마나 적극적으로 사용하고, 어떤 기능이 고객에게 활용도가 높은지, 어떤 기능이 비교적 사용이 적은 지 등을 확인할 수 있다. 그리고 위 지표들이 건강하기 위해서는 유저들이 필요하고 좋아하는 콘텐츠를 스포티파이가 제공해야 한다. 그리고 이를 실현하기 위해 스포티파이는&lt;b&gt; 세상에 있는 거의 모든 음원을 제공하고, 유저의 성향에 맞는 컨텐츠를 지속적으로 추천&lt;/b&gt;해야한다.&amp;nbsp;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;3단계 - Retention&lt;/b&gt;&lt;/span&gt;&lt;/h3&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;고객들의 재사용률/재방문율을 추적하는 단계다. 해당 퍼널에서 볼 수 있는 지표는 아래와 같다:&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;고객 이탈율 (churn rate)&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;일일 활성자 수 / 주간 활성자 수&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;Unbounded Retention&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;N-day Retention&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;일단 &lt;b&gt;모든 유저를 지키기 위한 스포티파이의 핵심 장치는 유저 개인화(user personalization) 기능&lt;/b&gt;이라고 생각한다. 이전 과제에서 언급한 바와 같이 스포티파이가 청취자의 취향에 맞는 음악을 제공하는 기술은 매우 뛰어나다. 그리고 이렇게 개인화된 음악 청취 경험은 다른 플랫폼으로 넘어가는 순간 사라진다. 따라서, 유저 개인화가 스포티파이의 retention에 가장 큰 역할을 하는 장치라고 생각한다. &lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;또한, 스포티파이는 프리미엄 유저에 대한 retention도 따로 고려해야 한다. 사실 수익의 95%는 프리미엄 구독료에서 발생하기 때문에, 프리미엄 유저수를 지키는 게 수익에 가장 큰 중요한 요소라고 할 수 있다. 스포티파이는 무료 사용자들에게도 모든 콘텐츠를 제공하지만 &lt;b&gt;서비스를 사용하는 방식에&lt;/b&gt; 아래와 같은 &lt;b&gt;제한&lt;/b&gt;이 있다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;&lt;b&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;3~4곡 마다 광고 재생&lt;/span&gt;&lt;/b&gt;&lt;/li&gt;
&lt;li&gt;&lt;b&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;다음 곡 재생을 1시간에 6번으로 제한&lt;/span&gt;&lt;/b&gt;&lt;/li&gt;
&lt;li&gt;&lt;b&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;플레이리스트 혹은 앨범에서 원하는 음원을 선택해서 들을 수 없고, 셔플로만 재생이 가능하다.&lt;/span&gt;&lt;/b&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;개인적으로 무료 서비스를 사용해 본 적이 없지만, 저런 단점들을 보아하니 무료는 절대 사용 못할 거라는 생각이 든다. 그리고 이렇게 유저에게 최적화된 컨텐츠를 제공한다해도, 해당 컨텐츠를 마음대로 사용할 수 없다는 점에서 프리미엄과 무료 서비스의 차이가 확연히 드러난다고 생각한다. 이러한 이유로&amp;nbsp;&lt;b&gt;프리미엄 유저들이 쉽게 무료로 전환하지 못하고,&amp;nbsp;&lt;/b&gt;이것이 프리미엄 유저의 retention을 유지하기 위한 장치라고 생각한다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;&amp;lt;추가&amp;gt;&lt;/b&gt; 마지막으로 독점 컨텐츠가 스포티파이의 유저 retention을 위한 또 다른 방법이라고 생각한다. 앞서 얘기했듯이, 스포티파이는 팟캐스트 독점 컨텐츠를 취득하기 위해 무려 6000억 가량의 돈을 투자했다. 독점 컨텐츠는 acquisiton 퍼널에서 신규 유저를 증가하는데 중요한 역할을 하지만, 마찬가지로 retention 퍼널에서도 고객을 유지하기 위한 중요한 장치라고 생각한다. 실제로 스포티파이에서 발표한 결과 팟캐스트 구독의 평균 retention rate는 90%라고 한다. &lt;b&gt;&amp;lt;/추가&amp;gt;&lt;/b&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;1038&quot; data-origin-height=&quot;409&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/zUSfD/btrN9lujpHe/DLBbJ16dhdkLFnvnXyeP7k/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/zUSfD/btrN9lujpHe/DLBbJ16dhdkLFnvnXyeP7k/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/zUSfD/btrN9lujpHe/DLBbJ16dhdkLFnvnXyeP7k/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FzUSfD%2FbtrN9lujpHe%2FDLBbJ16dhdkLFnvnXyeP7k%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1038&quot; height=&quot;409&quot; data-origin-width=&quot;1038&quot; data-origin-height=&quot;409&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;4단계 - Revenue&lt;/b&gt;&lt;/span&gt;&lt;/h3&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;앞에서 이미 많이 언급했기 때문에 해당 퍼널에 대해서는 짧게 말하겠다. 매출의 가장 큰 비중을 차지하는 프리미엄 구독료가 가장 중요하기 때문에 &lt;b&gt;프리미엄 유저수, 프리미엄 가입률, 프리미엄 전환률&lt;/b&gt; 등이 revenue 퍼널의 핵심 지표라고 볼 수 있겠다. 그리고 이 지표를 높이기 위해서 가장 중요한 기능은 retention 단계에서 언급한 &lt;b&gt;무료와 프리미엄 서비스의 기능적 차이&lt;/b&gt;라고 생각한다. &lt;b&gt;&amp;lt;추가&amp;gt;&lt;/b&gt; Retention 단계에서 기능적 차이를 대표적으로 3가지 언급했지만, 추가로 무료 유저들이 볼 수 있는 독점 컨텐츠에 대해서 일부 제한을 두어 프리미엄 가입을 유도하는 방법 또한 실현 가능성 있다고 생각한다. &lt;b&gt;&amp;lt;/추가&amp;gt;&lt;/b&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;5단계 - Referral&lt;/b&gt;&lt;/span&gt;&lt;/h3&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;&amp;lt;수정&amp;gt;&lt;/b&gt; 이 단계에서도 마찬가지로 여러 가지 지표를 확인할 수 있다. 리뷰 사이트의 평점, 구글 플레이/앱스토어 평점 등 &lt;b&gt;여러 잠재 고객들이 볼 수 있는 스포티파이에 대한 평가 자료&lt;/b&gt;를 통해 서비스의 개선점을 찾아내어 이런 지표들을 개선할 수 있다. 또한, &lt;b&gt;고객의 바이럴 마케팅에 대한 지표&lt;/b&gt;를 만들어, &lt;b&gt;어떻게 하면 고객이 스포티파이 컨텐츠를 더 많이 공유&lt;/b&gt;할 수 있을지 생각해 볼 수도 있다. 예를 들어, 스포티파이에 있는 &lt;b&gt;컨텐츠를 SNS에 공유하여 해당 컨텐츠를 통해 신규 프리미엄 회원가입으로 이어지면, 공유한 유저에게 2 바이럴 포인트를 지급&lt;/b&gt;하고 아래와 같이 사용할 수 있도록 한다:&lt;/span&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;1 바이럴 포인트를 1달러의 가치로 환산하여 스포티파이에서 사용할 수 있게 한다.&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;스포티파이 월 구독료($9.99) 대신 사용 할 수 있다. (예: 20 바이럴 포인트 = 2개월 구독 무료)&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;스포티파이 샵에서 판매하는 상품을 포인트로 대신 구매할 수 있다. (예: $25 제품을 20 포인트로 구매할 경우 $5만 지불)&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;스포티파이 샵에서 콘서트 티켓을 포인트로 대신 구매할 수 있다.&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imagegridblock&quot;&gt;
  &lt;div class=&quot;image-container&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/kGO4g/btrN4DQKxEI/rj4Ud1SO03dKh9y2QhGl70/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/kGO4g/btrN4DQKxEI/rj4Ud1SO03dKh9y2QhGl70/img.png&quot; data-origin-width=&quot;447&quot; data-origin-height=&quot;360&quot; data-is-animation=&quot;false&quot; style=&quot;width: 36.468%; margin-right: 10px;&quot; data-widthpercent=&quot;36.9&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/kGO4g/btrN4DQKxEI/rj4Ud1SO03dKh9y2QhGl70/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FkGO4g%2FbtrN4DQKxEI%2Frj4Ud1SO03dKh9y2QhGl70%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;447&quot; height=&quot;360&quot;/&gt;&lt;/span&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bTSEu5/btrN3T7B4ZF/ZKfV8Mh4RIqKAkSY1Ot1Zk/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bTSEu5/btrN3T7B4ZF/ZKfV8Mh4RIqKAkSY1Ot1Zk/img.png&quot; data-origin-width=&quot;1289&quot; data-origin-height=&quot;607&quot; data-is-animation=&quot;false&quot; style=&quot;width: 62.3693%;&quot; data-widthpercent=&quot;63.1&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bTSEu5/btrN3T7B4ZF/ZKfV8Mh4RIqKAkSY1Ot1Zk/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbTSEu5%2FbtrN3T7B4ZF%2FZKfV8Mh4RIqKAkSY1Ot1Zk%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1289&quot; height=&quot;607&quot;/&gt;&lt;/span&gt;&lt;/div&gt;
  &lt;figcaption&gt;좌: 스포티파이 콘서트 티켓 예매 안내 페이지 / 우: 스포티파이 샵 상품 판매 페이지&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;이와 같이 바이럴 포인트를 활용해 월 구독료 뿐만 아니라 스포티파이 샵과 콘서트 티켓 예매 시스템의 활용도도 높이는 방법이 있다고 생각한다. &lt;b&gt;&amp;lt;/수정&amp;gt;&lt;/b&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style2&quot; /&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h2 data-ke-size=&quot;size26&quot;&gt;&lt;b&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;스포티파이는 어디까지 더 성장할 수 있을까?&lt;/span&gt;&lt;/b&gt;&lt;/h2&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;위 질문에 답변을 하기 위해 스포티파이와 관련된 여러 통계 자료를 통해 성장 가능성을 알아보고, 각 자료에 대한 나의 의견을 조금 비추도록 하겠다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;&lt;b&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;1. 음원 시장의 성장 가능성&lt;/span&gt;&lt;/b&gt;&lt;/h3&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;874&quot; data-origin-height=&quot;109&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/8tbDY/btrNwEiVzw0/iHIFEF9kULQtDD7IRn0oT1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/8tbDY/btrNwEiVzw0/iHIFEF9kULQtDD7IRn0oT1/img.png&quot; data-alt=&quot;전 세계 음원 스트리밍 시장 매출 성장률 (단위: 퍼센트)&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/8tbDY/btrNwEiVzw0/iHIFEF9kULQtDD7IRn0oT1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F8tbDY%2FbtrNwEiVzw0%2FiHIFEF9kULQtDD7IRn0oT1%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;874&quot; height=&quot;109&quot; data-origin-width=&quot;874&quot; data-origin-height=&quot;109&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;전 세계 음원 스트리밍 시장 매출 성장률 (단위: 퍼센트)&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;음원 스트리밍 시장은 지난 10년간 기술 발전으로 인해 28배 성장을 이뤘고, 그 중심에는 스포티파이가 있었다. 매출은 지속적인 성장이 예상되지만, 2024년을 기준으로 성장률이 10퍼센트 미만으로 하락할 것으로 예상된다. (해당 자료는 어디까지나 &lt;b&gt;예상&lt;/b&gt;이라는 점을 참고하자.) 어찌 됐든 해당 자료에 의하면 음원 스트리밍 시장의 성장률은 2024년부터 지난 10년과 비교해서 절반에도 못 미치게 된다는 뜻이다. 그렇다면 스포티파이가 기업적으로 앞으로도 꾸준히 지금과 같은 성장세를 보이기 위해서는 &lt;b&gt;음원 스트리밍만으로는 어느 정도 한계가 있다&lt;/b&gt;고 해석할 수 있다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;이런 이유로 인해서 스포티파이는 현재 음원뿐만 아닌 팟캐스트, 오디오북 시장을 진출했다. 앞에서 언급한 바와 같이 2018년부터 팟캐스트 시장에 엄청난 투자를 감행하여 이미 스포티파이만의 생태계 구축을 완료하였고 2~3년 내로 흑자전환이 예상되고 있다. 그리고 지난 9월 20일에는 미국에서 처음으로 오디오북 30만 권을 출간함으로써, 스포티파이의 세번째 사업의 스타트를 끊었다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;&lt;b&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;2. 오디오북 시장의 가능성&lt;/span&gt;&lt;/b&gt;&lt;/h3&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;603&quot; data-origin-height=&quot;174&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bvMhSI/btrNwDdk580/KJ6YsUjNYaqZKkTJFaMpG1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bvMhSI/btrNwDdk580/KJ6YsUjNYaqZKkTJFaMpG1/img.png&quot; data-alt=&quot;스포티파이의 Findaway 인수 관련 기사 (출처: The Verge)&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bvMhSI/btrNwDdk580/KJ6YsUjNYaqZKkTJFaMpG1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbvMhSI%2FbtrNwDdk580%2FKJ6YsUjNYaqZKkTJFaMpG1%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;603&quot; height=&quot;174&quot; data-origin-width=&quot;603&quot; data-origin-height=&quot;174&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;스포티파이의 Findaway 인수 관련 기사 (출처: The Verge)&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;스포티파이가 현재 오디오북 사업을 진행하는 방식은 팟캐스트 사업 초기와 매우 비슷하다. 스포티파이가 팟캐스트 사업 초기에 단순히 팟캐스트 컨텐츠를 사는데 그치지 않고 앵커라는 플랫폼을 인수하여 제작자들이 자유롭게 컨텐츠를 제작, 퍼블리싱, 판매할 수 있는 시스템을 만들었던 것처럼, 2021년 11월에 Findaway라는 오디오북 플랫폼을 약 1700억 원에 인수하였다. 이 플랫폼도 앵커와 마찬가지로 &lt;b&gt;오디오북 컨텐츠 제작자가 제작, 퍼블리싱, 판매할 수 있는 환경을 제공&lt;/b&gt;한다. 그렇다면 팟캐스트와 마찬가지로 오디오북 시장의 전망도 과연 좋을까?&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;1226&quot; data-origin-height=&quot;368&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/v5Kjw/btrNzJw5Ffk/hSC76YLUBVQTxULHjB2dt1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/v5Kjw/btrNzJw5Ffk/hSC76YLUBVQTxULHjB2dt1/img.png&quot; data-alt=&quot;오디오북 시장 전망 (출처: Acumen)&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/v5Kjw/btrNzJw5Ffk/hSC76YLUBVQTxULHjB2dt1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fv5Kjw%2FbtrNzJw5Ffk%2FhSC76YLUBVQTxULHjB2dt1%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1226&quot; height=&quot;368&quot; data-origin-width=&quot;1226&quot; data-origin-height=&quot;368&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;오디오북 시장 전망 (출처: Acumen)&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;2021년 기준 전 세계 오디오북 시장의 규모는 5조 8천억 억 정도라고 한다. 현재는 팟캐스트와 비교했을 때 1/3 정도의 규모이지만, CAGR은 26.5%로 가파른 성장이 예상되는 시장이라고 볼 수 있다. 2030년에는 시장규모 40조 달성이 예상되고 있다. 스포티파이의 오디오북이 출시한 지 아직 2주도 채 되지 않았기 때문에, 스포티파이의 오디오북 서비스가 현재 어떠하다고 말을 할 수는 없다. 하지만 개인적으로 예상하자면 오디오북은 팟캐스트에 비해 투자 비용이 훨씬 적었기 때문에 투자에 대한 원금 회수가 비교적 수월하지 않을까 싶다. (물론 그만큼 오디오북 시장규모가 비교적 작긴 하다.)&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;&lt;b&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;3. 광고 수입의 증가&lt;/span&gt;&lt;/b&gt;&lt;/h3&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imagegridblock&quot;&gt;
  &lt;div class=&quot;image-container&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bbRfd8/btrNJAMgBR3/JoV8lvkY0DcTWVkHj7cmtK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bbRfd8/btrNJAMgBR3/JoV8lvkY0DcTWVkHj7cmtK/img.png&quot; data-origin-width=&quot;1000&quot; data-origin-height=&quot;743&quot; data-is-animation=&quot;false&quot; style=&quot;width: 48.2288%; margin-right: 10px;&quot; data-widthpercent=&quot;48.8&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bbRfd8/btrNJAMgBR3/JoV8lvkY0DcTWVkHj7cmtK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbbRfd8%2FbtrNJAMgBR3%2FJoV8lvkY0DcTWVkHj7cmtK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1000&quot; height=&quot;743&quot;/&gt;&lt;/span&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/egx3IN/btrNIJvPBSw/4SaosugTwkDzwNLe7DxqN1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/egx3IN/btrNIJvPBSw/4SaosugTwkDzwNLe7DxqN1/img.png&quot; data-origin-width=&quot;620&quot; data-origin-height=&quot;439&quot; data-is-animation=&quot;false&quot; data-widthpercent=&quot;51.2&quot; style=&quot;width: 50.6084%;&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/egx3IN/btrNIJvPBSw/4SaosugTwkDzwNLe7DxqN1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fegx3IN%2FbtrNIJvPBSw%2F4SaosugTwkDzwNLe7DxqN1%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;620&quot; height=&quot;439&quot;/&gt;&lt;/span&gt;&lt;/div&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;우측 자료를 통해 알 수 있듯이, 현재 스포티파이에서 가장 큰 성장률을 보여주는 항목은 '광고 매출'이다. 2021년 2분기와 비교해서 2022년 2분기의 광고 매출은 31%나 증가하였다. 팟캐스트 서비스를 통해 &lt;/span&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;광고 매출이 발생하는 경로가 하나 더 늘었고, 팟캐스트의 수요가 급격하게 증가하게 되자 광고 수익도 마찬가지로 증가하게 된 것이다. 이러한 형태의 광고 매출 증가는 오디오북을 통해서도 기대할 수 있다. 일단 오디오북 서비스가 자리잡기까지는 적어도 몇 년이 걸리겠지만, 어느 정도 활성화되면 오디오북도 광고 매출에 큰 기여를 하지 않을까 싶다. 이전까지는 단순 프리미엄 유저로 전환되기까지 디딤돌 역할을 했던 무료 서비스지만, 앞으로는 광고 형태와 수익 구조 개선을 통해 &lt;b&gt;광고 수익을 스포티파이의 중요한 매출 일원으로서 자리 잡게 할 거라 밝혔다.&lt;/b&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;1016&quot; data-origin-height=&quot;98&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/cojiVt/btrNKfnI6in/kxZdHJtKZuWyeJQKzsSnIK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/cojiVt/btrNKfnI6in/kxZdHJtKZuWyeJQKzsSnIK/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/cojiVt/btrNKfnI6in/kxZdHJtKZuWyeJQKzsSnIK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcojiVt%2FbtrNKfnI6in%2FkxZdHJtKZuWyeJQKzsSnIK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1016&quot; height=&quot;98&quot; data-origin-width=&quot;1016&quot; data-origin-height=&quot;98&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&amp;nbsp;&lt;/span&gt;&lt;/p&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style2&quot; /&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;오늘은 현재 스포티파이가 실행 중인 전략을 알아보고, 그 전략을 통해 growth point를 찾아봤는지 알아봤다. 그리고 앞으로의 스포티파이의 성장 가능성에 대해서도 예상해봤다. 스포티파이가 초기에 워낙 획기적인 '광고 수익을 통한 무료 서비스'라는 비즈니스 모델을 통해 시장 내 좋은 위치를 선점한 것은 사실이나, 10년 가까이 지난 현시점에 업계 라이벌이 애플, 아마존, 유튜브라는 점과 그들과의 경쟁에서 우위를 점하고 있다는 사실에서 정말 대단하다는 느낌을 받았다. 개인적으로 PMB를 통해 스포티파이를 다시 사용하게 되었지만 왠지 모르게 스포티파이가 나의 프로덕트인 거처럼 점점 애정이 가기 시작했다. 하루빨리 스포티파이의 서비스가 한국에서도 정상화되어 스포티파이와 오디오북을 모두 사용할 수 있으면 한다.&amp;nbsp;&lt;/span&gt;&lt;/p&gt;</description>
      <category>위클리 프로젝트</category>
      <category>PMB부트캠프 #코드스테이츠</category>
      <author>꿀벌입니다</author>
      <guid isPermaLink="true">https://honeybee8989.tistory.com/27</guid>
      <comments>https://honeybee8989.tistory.com/27#entry27comment</comments>
      <pubDate>Tue, 27 Sep 2022 22:17:10 +0900</pubDate>
    </item>
    <item>
      <title>[코드스테이츠 PMB 14기 W5D4] 어도비 A/B 테스트</title>
      <link>https://honeybee8989.tistory.com/26</link>
      <description>&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;지난 과제를 통해 어도비의 랜딩 페이지의 요소들과 그 안에 있는 메인 카피, 마이크로 카피, CTA를 통해 어도비가 사이트 방문자를 구매자로 전환하도록 어떻게 유도했는지 분석해보았다. 오늘은 이런 요소들 중 개선이 되면 좋겠다는 부분을 골라서 직접 A/B 테스트를 설계하는 연습을 해보려 한다. 사실 오늘 조별 토론에서 나의 과제를 주제로 토론을 진행했었는데, 동기분들의 좋은 의견이 너무 많아 오늘 과제에 적용을 했다. 따라서, 오늘 제안하는 개선 사항들이 지난 과제와 다르다는 점 이해를 부탁한다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style1&quot; /&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;현재 페이지 레이아웃 (As is)&lt;/b&gt;&lt;/span&gt;&lt;/h4&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;먼저 페이지의 흐름을 한눈으로 보기 위해, 최상단부터 최하단까지 화면들을 캡쳐하고 이어 붙였다. 그리고 이 많은 버튼 중 몇개가 제품 페이지로 이어지는지 보여주기 위해서다.&lt;br /&gt;&lt;br /&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;3840&quot; data-origin-height=&quot;8196&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/vQ312/btrM6Y179af/wD1dLRVMpAcKSReVraKsok/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/vQ312/btrM6Y179af/wD1dLRVMpAcKSReVraKsok/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/vQ312/btrM6Y179af/wD1dLRVMpAcKSReVraKsok/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FvQ312%2FbtrM6Y179af%2FwD1dLRVMpAcKSReVraKsok%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;3840&quot; height=&quot;8196&quot; data-origin-width=&quot;3840&quot; data-origin-height=&quot;8196&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;내 생각에 현재 레이아웃에는 두가지 문제점이 있다:&lt;/span&gt;&lt;/p&gt;
&lt;ol style=&quot;list-style-type: decimal;&quot; data-ke-list-type=&quot;decimal&quot;&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;페이지의 몇 안되는 구성 요소들이 지나치게 분산되어 있다. 각 요소들의 몰입감을 위해 일정 수준의 여백을 주는 것은 가능하다 생각하지만, 현재 레이아웃은 지나치게 대충 만들었다는 느낌을 받았다. 모바일 화면에서는 각 요소들이 세로로 정렬되어 깔끔하게 보이지만, 데스크톱의 웹 브라우저 환경에 대해서는 배려가 부족하다는 느낌이 든다.&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;현재 이벤트에서 홍보하는 포토샵과 일러스트레이터의 제품 설명이 영상 외에 부족하다는 것이다. 제품에 대한 상세 설명 페이지는 최상단 플로팅 메뉴를 제외하고는 페이지 안에 존재하지 않다.&lt;/span&gt;&lt;/li&gt;
&lt;/ol&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;두가지 문제점을 전부 다뤄보고 싶지만, 현재 밀린 과제로 인해서 2번 문제만 개선점을 제안하고 A/B 테스트를 설계 해보려 한다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;A/B 테스트 설계&lt;/b&gt;&lt;/span&gt;&lt;/h3&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;가설 수립&lt;/b&gt;&lt;/span&gt;&lt;/h4&gt;
&lt;table style=&quot;border-collapse: collapse; width: 100%;&quot; border=&quot;1&quot; data-ke-align=&quot;alignLeft&quot; data-ke-style=&quot;style12&quot;&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td style=&quot;width: 11.279%; text-align: center;&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;분류&lt;/b&gt;&lt;/span&gt;&lt;/td&gt;
&lt;td style=&quot;width: 88.721%; text-align: center;&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;내용&lt;/b&gt;&lt;/span&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td style=&quot;width: 11.279%; text-align: center;&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;목표&lt;/b&gt;&lt;/span&gt;&lt;/td&gt;
&lt;td style=&quot;width: 88.721%;&quot;&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;제품의 장점을 고객들에게 보기 쉽게 어필하여 구매 페이지 이동량을 증가한다&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td style=&quot;width: 11.279%; text-align: center;&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;문제&lt;/b&gt;&lt;/span&gt;&lt;/td&gt;
&lt;td style=&quot;width: 88.721%;&quot;&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;span style=&quot;letter-spacing: 0px;&quot;&gt;이벤트 영상 외에 제품에 대한 설명을 쉽게 찾을 수 없다 -&amp;gt; 고객이 충분한 정보를 얻지 못하여 구매를 하지 않는다&lt;/span&gt;&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td style=&quot;width: 11.279%; text-align: center;&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;솔루션&lt;/b&gt;&lt;/span&gt;&lt;/td&gt;
&lt;td style=&quot;width: 88.721%;&quot;&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;span style=&quot;letter-spacing: 0px;&quot;&gt;제품 페이지 링크를 옆에 위치시켜 각 제품에 대해서 더 상세한 정보를 얻을 수 있게 한다.&lt;/span&gt;&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td style=&quot;width: 11.279%; text-align: center;&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;예상 결과&lt;/b&gt;&lt;/span&gt;&lt;/td&gt;
&lt;td style=&quot;width: 88.721%;&quot;&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;span style=&quot;letter-spacing: 0px;&quot;&gt;제품 상세페이지 -&amp;gt; 구매 페이지 이동량 증가&lt;/span&gt;&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td style=&quot;width: 11.279%; text-align: center;&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;근거&lt;/b&gt;&lt;/span&gt;&lt;/td&gt;
&lt;td style=&quot;width: 88.721%;&quot;&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;span style=&quot;letter-spacing: 0px;&quot;&gt;제품에 관심은 있으나 원하는 정보를 얻지 못했던 고객을 추가 전환&lt;/span&gt;&lt;span style=&quot;letter-spacing: 0px;&quot;&gt;&lt;/span&gt;&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;blockquote data-ke-style=&quot;style2&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;가설 수립을 통해 A/B 테스트를 통해 얻고자 하는 목표를 설정하여, 추후에 실행될 테스트에서 나온 데이터를 통해 인사이트를 얻을 수 있도록 기반을 다졌다.&lt;/span&gt;&lt;/blockquote&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;솔루션 예시 (to be)&lt;/b&gt;&amp;nbsp;&lt;/span&gt;&lt;/h4&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;2598&quot; data-origin-height=&quot;1688&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/cX4ekC/btrM7ofn0He/L4D7gOHqLs0BMsjyi4u0gK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/cX4ekC/btrM7ofn0He/L4D7gOHqLs0BMsjyi4u0gK/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/cX4ekC/btrM7ofn0He/L4D7gOHqLs0BMsjyi4u0gK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcX4ekC%2FbtrM7ofn0He%2FL4D7gOHqLs0BMsjyi4u0gK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;2598&quot; height=&quot;1688&quot; data-origin-width=&quot;2598&quot; data-origin-height=&quot;1688&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;7258&quot; data-origin-height=&quot;4848&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/boJcrg/btrM8hGT1V2/jW3OVeGRrQhKYLT1Oor8kk/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/boJcrg/btrM8hGT1V2/jW3OVeGRrQhKYLT1Oor8kk/img.png&quot; data-alt=&quot;솔루션에 추가한 링크들의 이동 경로&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/boJcrg/btrM8hGT1V2/jW3OVeGRrQhKYLT1Oor8kk/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FboJcrg%2FbtrM8hGT1V2%2FjW3OVeGRrQhKYLT1Oor8kk%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;7258&quot; height=&quot;4848&quot; data-origin-width=&quot;7258&quot; data-origin-height=&quot;4848&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;솔루션에 추가한 링크들의 이동 경로&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;실험 진행&lt;/b&gt;&lt;/span&gt;&lt;/h4&gt;
&lt;table style=&quot;border-collapse: collapse; width: 100%; height: 93px;&quot; border=&quot;1&quot; data-ke-align=&quot;alignLeft&quot; data-ke-style=&quot;style12&quot;&gt;
&lt;tbody&gt;
&lt;tr style=&quot;height: 20px;&quot;&gt;
&lt;td style=&quot;width: 10.3489%; height: 20px; text-align: center;&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;분류&lt;/b&gt;&lt;/span&gt;&lt;/td&gt;
&lt;td style=&quot;width: 89.6511%; height: 20px; text-align: center;&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;내용&lt;/b&gt;&lt;/span&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr style=&quot;height: 20px;&quot;&gt;
&lt;td style=&quot;width: 10.3489%; height: 37px; text-align: center;&quot; rowspan=&quot;2&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;분기&amp;nbsp;&lt;/b&gt;&lt;/span&gt;&lt;/td&gt;
&lt;td style=&quot;width: 89.6511%; height: 20px;&quot;&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;원본 페이지를 보여주는 대상 (A) : 공부왕찐천재 유튜브 채널의 링크를 통해 접속하는 방문자의 50%, 이외 경로를 통해 접속하는 방문자의 50%&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;tr style=&quot;height: 17px;&quot;&gt;
&lt;td style=&quot;width: 89.6511%; height: 17px;&quot;&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;신규 페이지를 보여주는 대상 (B) : 공부왕찐천재 유튜브 채널의 링크를 통해 접속하는 방문자 중 A에 속하지 않는 대상, 이외 경로를 통해 접속하는 방문자 중 A에 속하지 않는 대상&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;tr style=&quot;height: 20px;&quot;&gt;
&lt;td style=&quot;width: 10.3489%; height: 20px; text-align: center;&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;구현&amp;nbsp;&lt;/b&gt;&lt;/span&gt;&lt;/td&gt;
&lt;td style=&quot;width: 89.6511%; height: 20px;&quot;&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;가설에서 제시한 문제점을 보완한 대안 B를 제작한다. 실제 사이트에 노출될만큼 대안B의 완성도를 꼼꼼히 검토 해야한다.&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;tr style=&quot;height: 16px;&quot;&gt;
&lt;td style=&quot;width: 10.3489%; height: 16px; text-align: center;&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;기간&lt;/b&gt;&lt;/span&gt;&lt;/td&gt;
&lt;td style=&quot;width: 89.6511%; height: 16px;&quot;&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;대안 B의 검토 완료 시점부터 14일간 A/B 테스트를 진행한다.&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;blockquote data-ke-style=&quot;style2&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;A와 B에 노출되는 대상들을 분류하고 테스트 기간을 정함으로써, 진행 조건을 명확하게 해준다.&lt;/span&gt;&lt;/blockquote&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;결과 분석&lt;/b&gt;&lt;/span&gt;&lt;/h4&gt;
&lt;table style=&quot;border-collapse: collapse; width: 99.5351%; height: 605px;&quot; border=&quot;1&quot; data-ke-align=&quot;alignLeft&quot; data-ke-style=&quot;style12&quot;&gt;
&lt;tbody&gt;
&lt;tr style=&quot;height: 20px;&quot;&gt;
&lt;td style=&quot;width: 10.5814%; height: 20px; text-align: center;&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;분류&lt;/b&gt;&lt;/span&gt;&lt;/td&gt;
&lt;td style=&quot;width: 89.4186%; height: 20px; text-align: center;&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;내용&lt;/b&gt;&lt;/span&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr style=&quot;height: 64px;&quot;&gt;
&lt;td style=&quot;width: 10.5814%; height: 145px; text-align: center;&quot; rowspan=&quot;4&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;측정지표&lt;/b&gt;&lt;/span&gt;&lt;/td&gt;
&lt;td style=&quot;width: 89.4186%; height: 64px;&quot;&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;랜딩 페이지 내 제품 상세페이지 클릭률&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;tr style=&quot;height: 64px;&quot;&gt;
&lt;td style=&quot;width: 89.4186%; height: 64px;&quot;&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;제품 상세페이지 -&amp;gt; 구매 페이지 이동량&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td style=&quot;width: 89.4186%;&quot;&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;랜딩페이지 -&amp;gt; 구매 페이지 이동량&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;tr style=&quot;height: 17px;&quot;&gt;
&lt;td style=&quot;width: 89.4186%; height: 17px;&quot;&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;구매전환율&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;tr style=&quot;height: 17px;&quot;&gt;
&lt;td style=&quot;width: 10.5814%; height: 34px; text-align: center;&quot; rowspan=&quot;2&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;결과&lt;/b&gt;&lt;/span&gt;&lt;/td&gt;
&lt;td style=&quot;width: 89.4186%; height: 17px;&quot;&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;p-value를 통한 통계적 유의성 확인&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;tr style=&quot;height: 17px;&quot;&gt;
&lt;td style=&quot;width: 89.4186%; height: 17px;&quot;&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;측정 지표 통계 확인 및 데이터 분석&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;tr style=&quot;height: 17px;&quot;&gt;
&lt;td style=&quot;width: 10.5814%; height: 34px; text-align: center;&quot; rowspan=&quot;2&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;결론&lt;/b&gt;&lt;/span&gt;&lt;/td&gt;
&lt;td style=&quot;width: 89.4186%; height: 17px;&quot;&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;구매 페이지 이동률이 저조한 경로는 실제 적용에서 배제&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;tr style=&quot;height: 17px;&quot;&gt;
&lt;td style=&quot;width: 89.4186%; height: 17px;&quot;&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;구매 페이지 이동률 상승에 도움을 주는 경로는 실제 사이트 적용&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;blockquote data-ke-style=&quot;style2&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;기존 목표 설정은 '구매 페이지 이동량 증가' 였으나, 구매전환율도 직접적인 영향을 받을 수 있기 때문에 측정 지표에 포함하였다. 또한, 구매 페이지로 이동하는 경로가 다양하기 때문에 각 경로에 대한 이동량을 측정지표로 포함하였다. 이를 통해 사이트 방문자들이 어떤 조건에서 구매 페이지로 가장 많이 이동하는지에 대한 인사이트도 얻을 수 있다.&lt;/span&gt;&lt;/blockquote&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style1&quot; /&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;</description>
      <author>꿀벌입니다</author>
      <guid isPermaLink="true">https://honeybee8989.tistory.com/26</guid>
      <comments>https://honeybee8989.tistory.com/26#entry26comment</comments>
      <pubDate>Mon, 26 Sep 2022 22:27:46 +0900</pubDate>
    </item>
  </channel>
</rss>