<div id="readability-page-1" class="page"><div>
 <div id="SE-50ea219d-edb4-4f33-862d-00cec224bc7f">
 (mobile) video player 크기 최적화​개인적으로 출퇴근 시간에 모바일에서 devhub 를 이용하다 보면 video player 크기가 너무 작은것 같다는 생각이 들었다. 모바일이니 어쩔수 없다고 자기 위로를 하다가, 어느 순간 Youtube App 에서 영상을 재생하는 본인을 발견​하고 이건 아니다 싶어 수정을 하기로 마음 먹었다.​아래 캡쳐화면을 보면 좌측이 기존화면, 우측이 수정한 화면이다.​기존에는 일괄적으로 좌우에 padding 을 넣다보니 안그래도 작은 video player 가 더 작아보이는듯 하다.하여 video player 좌우 padding 을 제거하고 aspect-ratio 값도 수정했다.​수정을 하고나니 확실히 이전보다 화면이 시원시원해진 느낌이 든다.​
 </div> <div id="SE-5f1adcd9-e8f1-4afa-b63f-af089c249de2">
 <a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-5c9f3d40-ba7c-4142-a583-dc20721bdd63&quot;, &quot;src&quot; : &quot;https://mblogthumb-phinf.pstatic.net/MjAyNDEwMDlfMjIz/MDAxNzI4NDgzMzg5MjEx.dtP5chQCEl2Xx5_VipiiYO4lQowFoye1TJ3as0U0G9cg.3o-Vs1ex0yPzDxSlNVAWVGHuA0RUMXom-lBfswPUaAsg.JPEG/KakaoTalk_Photo_2024-10-09-23-16-13_002.jpeg&quot;, &quot;originalWidth&quot; : &quot;665&quot;, &quot;originalHeight&quot; : &quot;1440&quot;, &quot;linkUse&quot; : &quot;false&quot;, &quot;link&quot; : &quot;&quot;}">
 <img src="https://mblogthumb-phinf.pstatic.net/MjAyNDEwMDlfMjIz/MDAxNzI4NDgzMzg5MjEx.dtP5chQCEl2Xx5_VipiiYO4lQowFoye1TJ3as0U0G9cg.3o-Vs1ex0yPzDxSlNVAWVGHuA0RUMXom-lBfswPUaAsg.JPEG/KakaoTalk_Photo_2024-10-09-23-16-13_002.jpeg?type=w400" data-width="665" data-height="1440" alt="">
 </a>
 
 <a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-8d1d695a-713f-420c-8ebc-894b577fd26c&quot;, &quot;src&quot; : &quot;https://mblogthumb-phinf.pstatic.net/MjAyNDEwMDlfOCAg/MDAxNzI4NDgzMzg5MjEy.m3XCzL-l6x9huSDrCAhD7fryJBr3ySuyhNAMkB2Q9kgg.GZSeXYiUoEBz9n5RkDU8ImUwf54P4GL1zkgGUYR2Y3og.JPEG/KakaoTalk_Photo_2024-10-09-23-16-13_001.jpeg&quot;, &quot;originalWidth&quot; : &quot;665&quot;, &quot;originalHeight&quot; : &quot;1440&quot;, &quot;linkUse&quot; : &quot;false&quot;, &quot;link&quot; : &quot;&quot;}">
 <img src="https://mblogthumb-phinf.pstatic.net/MjAyNDEwMDlfOCAg/MDAxNzI4NDgzMzg5MjEy.m3XCzL-l6x9huSDrCAhD7fryJBr3ySuyhNAMkB2Q9kgg.GZSeXYiUoEBz9n5RkDU8ImUwf54P4GL1zkgGUYR2Y3og.JPEG/KakaoTalk_Photo_2024-10-09-23-16-13_001.jpeg?type=w400" data-width="665" data-height="1440" alt="">
 </a>
 
 </div> <div id="SE-2356f616-ca99-4141-9729-0fabfa8a6b1b">
 ​​​Google Analytics​이전 포스팅에서 Vercel Analytics 와 함께 Google Analytics 도 추가했다는 글을 썼다.Google Analytics 를 통해 이틀간의 트래픽을 확인해봤는데 mobile 에서의 활성 시간이 pc 에서의 활성 시간에 비해 절반밖에 되지 않았다. (더 정확히는 pc 나 mobile 모두 동영상을 끝까지 다 보지 않는듯 하다. 이 이슈는 뒤로 하고..)​"mobile 에서의 활성 시간이 pc 보다 왜 적을까" 를 생각해봤는데 위에서 말했듯이 화면을 보기가 불편해서이지 않을까 조심스레 추측해본다.​Google Analytics 데이터를 보고나서야 그동안 미루고 미루던 mobile 에서의 player 화면 최적화를 진행했다. 확실히 데이터에는 사람을 움직이는 힘이 있는듯 하다.​물론 이번 수정이 좋은 결과로 이어질지는 지켜봐야하겠지만..​​​검색엔진 검색결과​구글에서는 한동안 검색결과에 안나오는 이슈가 있었다. 아마도 SEO 색인 문제인것 같은데 어찌저찌 해결이 된듯하다.현재는 '데브허브' 로 검색하면 아래 화면처럼 구글에서는 세번째, 네이버에서는 첫번째 에 나오고 있다.​구글도 좀 더 힘내서 올라가보자구!!​
 </div> <div id="SE-32c8e3ef-fc71-4dca-bd18-c7620e639691">
 <div>
 <div>
 <a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-630d3180-526d-44d4-832f-7f81da93657f&quot;, &quot;src&quot; : &quot;https://mblogthumb-phinf.pstatic.net/MjAyNDEwMDlfODcg/MDAxNzI4NDg0Mzc4OTUz.u0QpDfvefmyMOQyz-shz0Fb-g3Nf6xWS3pTzHwstqnEg.436bQo10J-GSk8Uk4vP5wM99YqKOkpmw_kqBIe0Xprwg.JPEG/KakaoTalk_Photo_2024-10-09-23-32-26_001.jpeg&quot;, &quot;originalWidth&quot; : &quot;665&quot;, &quot;originalHeight&quot; : &quot;1440&quot;, &quot;linkUse&quot; : &quot;false&quot;, &quot;link&quot; : &quot;&quot;}">
 <img src="https://mblogthumb-phinf.pstatic.net/MjAyNDEwMDlfODcg/MDAxNzI4NDg0Mzc4OTUz.u0QpDfvefmyMOQyz-shz0Fb-g3Nf6xWS3pTzHwstqnEg.436bQo10J-GSk8Uk4vP5wM99YqKOkpmw_kqBIe0Xprwg.JPEG/KakaoTalk_Photo_2024-10-09-23-32-26_001.jpeg?type=w400" data-width="665" data-height="1440" alt="">
 </a>
 
 </div>
 <div>
 <a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-570e129a-46e9-490f-ae4e-1378e6f72c88&quot;, &quot;src&quot; : &quot;https://mblogthumb-phinf.pstatic.net/MjAyNDEwMDlfMjQ4/MDAxNzI4NDg0Mzc4OTUz.dnC-Zw1VGD6nME_EjV7CzkGN1ZPlKBq5DvYNKh9apy4g.YqQEC-8gfaY2yJduSTn_spw-0lZKPhivs1GhIVkQxrcg.JPEG/KakaoTalk_Photo_2024-10-09-23-32-26_002.jpeg&quot;, &quot;originalWidth&quot; : &quot;665&quot;, &quot;originalHeight&quot; : &quot;1440&quot;, &quot;linkUse&quot; : &quot;false&quot;, &quot;link&quot; : &quot;&quot;}">
 <img src="https://mblogthumb-phinf.pstatic.net/MjAyNDEwMDlfMjQ4/MDAxNzI4NDg0Mzc4OTUz.dnC-Zw1VGD6nME_EjV7CzkGN1ZPlKBq5DvYNKh9apy4g.YqQEC-8gfaY2yJduSTn_spw-0lZKPhivs1GhIVkQxrcg.JPEG/KakaoTalk_Photo_2024-10-09-23-32-26_002.jpeg?type=w400" data-width="665" data-height="1440" alt="">
 </a>
 
 </div>
 </div>
 
 
 구글 / 네이버 검색 결과
 </div> <div id="SE-1dd4bbb4-880b-45aa-a16e-5c0d37645950">
 ​​​​#데브허브 #devhub #사이드프로젝트 #개발일지 #모바일최적화 #모바일플레이어최적화 #모바일화면최적화 #googleAnalytics #GA4 #SEO #구글검색결과 #네이버검색결과
 </div> </div></div>

나만의공간。

KIM JUNGHWAN

(mobile) video player 크기 최적화 개인적으로 출퇴근 시간에 모바일에서 devhub 를 이용하다 보면 video player 크기가 너무 작은것 같다는 생각이 들었다. 모바일이니 어쩔수 없다고 자기 위로를 하다가, 어느 순간 Youtube App 에서 영상을 재생하는 본인을 발견하고 이건 아니다 싶어 수정을 하기로 마음 먹었다. 아래 캡쳐화면을 보면 좌측이 기존화면, 우측이 수정한 화면이다. 기존에는 일괄적으로 좌우에 padding 을 넣다보니 안그래도 작은 video player 가 더 작아보이는듯 하다. 하여 video player 좌우 padding 을 제거하고 aspect-ratio 값도 수정했다. 수정을 하고나니 확실히 이전보다 화면이 시원시원해진 느낌이 든다. Google .......

[데브허브] DEVHUB 진행상황 (video player 크기 최적화) - 2024.10.09

댓글