<div id="readability-page-1" class="page"><div>
 <div id="SE-aa77cb4b-e6b3-438a-a4cc-7a17d949d303">
 동영상 언어 (필터링) 추가​기존에는 언어에 상관없이 시간순으로 card 들이 노출됐었다. '일간 / 주간 / 월간 top 50' 페이지를 추가할까 하다가, 그것보다는 언어 필터링을 먼저 추가하는게 더 나을것 같다고 판단하여 빠르게 진행했다.​현재까지는 모든 컨텐츠가 '한국어' 혹은 '영어' 이다. 그래서, 아래 캡쳐화면과 같이 '모든 언어', '한국어', '영어' 버튼을 추가했다.
 </div> <div id="SE-3f3878a5-09d7-49b9-9b9f-d997c7d4b020">
 <a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-3f3878a5-09d7-49b9-9b9f-d997c7d4b020&quot;, &quot;src&quot; : &quot;https://mblogthumb-phinf.pstatic.net/MjAyNDEwMDhfODQg/MDAxNzI4MzgwODQ1NDQw.MJ87qhrBePwDB8idmw4sMtO7leNN55cTl4K5FS7AOIgg.I9uEmvfGJCZB_5dxG6LXfk3A3T3NipTiTqD9gad96lsg.PNG/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2024-10-08_%EC%98%A4%ED%9B%84_6.46.40.png&quot;, &quot;originalWidth&quot; : &quot;1697&quot;, &quot;originalHeight&quot; : &quot;1195&quot;, &quot;linkUse&quot; : &quot;false&quot;, &quot;link&quot; : &quot;&quot;}">
 <img src="https://mblogthumb-phinf.pstatic.net/MjAyNDEwMDhfODQg/MDAxNzI4MzgwODQ1NDQw.MJ87qhrBePwDB8idmw4sMtO7leNN55cTl4K5FS7AOIgg.I9uEmvfGJCZB_5dxG6LXfk3A3T3NipTiTqD9gad96lsg.PNG/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2024-10-08_%EC%98%A4%ED%9B%84_6.46.40.png?type=w800" data-width="693" data-height="487" alt="">
 </a>
 
 언어 필터링 버튼
 </div>
 <div id="SE-cf415b6f-0bd2-419c-a0b9-68587feae073">
 ​다들 예상 가능하겠지만 언어 버튼을 누르면 해당 언어 컨텐츠들만 나열이 되게 된다.
 </div> <div id="SE-6a14c5c0-05ae-4feb-a4bf-e1d93893d600">
 <div>
 <a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-3b6321ae-256d-472f-b2d2-0a5ffc9fbb19&quot;, &quot;src&quot; : &quot;https://mblogthumb-phinf.pstatic.net/MjAyNDEwMDhfMjM5/MDAxNzI4MzgxMDE5Nzgy.qknukiOnljQCqi75f1pgIMf2sl2cXmGvIPpLOEhXdngg.dmg97oCDRB7Gcm8sVGelVeBUIIeyM8RYMSOhV97IUn0g.PNG/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2024-10-08_%EC%98%A4%ED%9B%84_6.50.18.png&quot;, &quot;originalWidth&quot; : &quot;1699&quot;, &quot;originalHeight&quot; : &quot;1197&quot;, &quot;linkUse&quot; : &quot;false&quot;, &quot;link&quot; : &quot;&quot;}">
 <img src="https://mblogthumb-phinf.pstatic.net/MjAyNDEwMDhfMjM5/MDAxNzI4MzgxMDE5Nzgy.qknukiOnljQCqi75f1pgIMf2sl2cXmGvIPpLOEhXdngg.dmg97oCDRB7Gcm8sVGelVeBUIIeyM8RYMSOhV97IUn0g.PNG/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2024-10-08_%EC%98%A4%ED%9B%84_6.50.18.png?type=w400" data-width="693" data-height="488" alt="">
 </a>
 
 <a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-a2860a25-aa04-46fb-9e57-a5995f9d9f36&quot;, &quot;src&quot; : &quot;https://mblogthumb-phinf.pstatic.net/MjAyNDEwMDhfMjQg/MDAxNzI4MzgxMDI1NTMz.49vFsaT-GmRbwwvleH_mwaJIgdY54hybA7DvF4hvFtEg.GgCglad9YbJdAF0PbkZZweWQLkAXvcovp-nebKzWfbkg.PNG/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2024-10-08_%EC%98%A4%ED%9B%84_6.50.24.png&quot;, &quot;originalWidth&quot; : &quot;1696&quot;, &quot;originalHeight&quot; : &quot;1187&quot;, &quot;linkUse&quot; : &quot;false&quot;, &quot;link&quot; : &quot;&quot;}">
 <img src="https://mblogthumb-phinf.pstatic.net/MjAyNDEwMDhfMjQg/MDAxNzI4MzgxMDI1NTMz.49vFsaT-GmRbwwvleH_mwaJIgdY54hybA7DvF4hvFtEg.GgCglad9YbJdAF0PbkZZweWQLkAXvcovp-nebKzWfbkg.PNG/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2024-10-08_%EC%98%A4%ED%9B%84_6.50.24.png?type=w400" data-width="693" data-height="485" alt="">
 </a>
 
 </div>
 좌: 한국어 / 우 : 영어
 </div> <div id="SE-fae6ef0f-bac3-4397-afa1-11ffe9339a66">
 ​​​반응형 사이드바 수정​기존에는 화면크기 (mobile / pad / pc) 에 상관없이 모두 좌측 상단에 있는 메뉴버튼 (햄버거 버튼) 을 눌러야 사이드바가 열리는 형태였다. ​(확실하지는 않지만) 메뉴버튼이 있는지 모르는 사람도 있을수 있겠다는 생각이 들었다.​모바일의 경우, 화면크기가 작아서 어쩔수 없지만, 큰 pc 화면에서는 아예 좌측에 사이드바를 항시 보이도록 하는것도 괜찮겠다는 생각이 들어 수정했다.​아직은 메뉴에 링크가 몇개 없지만, 사용자가 사이드바 유무를 아는지 여부를 확인할 필요는 있어보인다.​
 </div> <div id="SE-659a9dc4-a0a1-4917-a992-4f69b5c6d8b4">
 <div>
 <a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-13fb37c6-79b9-4fae-beee-82fb4a3f1135&quot;, &quot;src&quot; : &quot;https://mblogthumb-phinf.pstatic.net/MjAyNDEwMDhfNDkg/MDAxNzI4MzgxMjUyMzM5.uoXNAIZN-Wno5Am-6uo_YSjvvJkE3eOVcPzBiKWmxFMg.XCk60IYIflJKnPJXv7b4LXkDdwuLHUuM24nbA72F4v8g.PNG/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2024-10-08_%EC%98%A4%ED%9B%84_6.54.01.png&quot;, &quot;originalWidth&quot; : &quot;481&quot;, &quot;originalHeight&quot; : &quot;1199&quot;, &quot;linkUse&quot; : &quot;false&quot;, &quot;link&quot; : &quot;&quot;}">
 <img src="https://mblogthumb-phinf.pstatic.net/MjAyNDEwMDhfNDkg/MDAxNzI4MzgxMjUyMzM5.uoXNAIZN-Wno5Am-6uo_YSjvvJkE3eOVcPzBiKWmxFMg.XCk60IYIflJKnPJXv7b4LXkDdwuLHUuM24nbA72F4v8g.PNG/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2024-10-08_%EC%98%A4%ED%9B%84_6.54.01.png?type=w400" data-width="481" data-height="1199" alt="">
 </a>
 
 <a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-286d5d19-02a2-481f-b2e0-2b5b418f36de&quot;, &quot;src&quot; : &quot;https://mblogthumb-phinf.pstatic.net/MjAyNDEwMDhfMjI3/MDAxNzI4MzgxMjU3NzQ0.TIFEtrlBjSgurMQBfvDjMx-3_N8RIFhcNmxXynNXRBAg.6k-LUgTxfWxv3KZoPiqfR_985SKCdEYwSSBdCgOJW7gg.PNG/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2024-10-08_%EC%98%A4%ED%9B%84_6.52.00.png&quot;, &quot;originalWidth&quot; : &quot;1630&quot;, &quot;originalHeight&quot; : &quot;1200&quot;, &quot;linkUse&quot; : &quot;false&quot;, &quot;link&quot; : &quot;&quot;}">
 <img src="https://mblogthumb-phinf.pstatic.net/MjAyNDEwMDhfMjI3/MDAxNzI4MzgxMjU3NzQ0.TIFEtrlBjSgurMQBfvDjMx-3_N8RIFhcNmxXynNXRBAg.6k-LUgTxfWxv3KZoPiqfR_985SKCdEYwSSBdCgOJW7gg.PNG/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2024-10-08_%EC%98%A4%ED%9B%84_6.52.00.png?type=w800" data-width="693" data-height="510" alt="">
 </a>
 
 </div>
 메뉴 버튼을 눌러야 사이드바가 나오는 형태
 </div> <div id="SE-793c57f5-c23d-4ebe-a643-59aa16b21380">
 <a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-793c57f5-c23d-4ebe-a643-59aa16b21380&quot;, &quot;src&quot; : &quot;https://mblogthumb-phinf.pstatic.net/MjAyNDEwMDhfMTQy/MDAxNzI4MzgxMjYyMjQ1.zmJM7NkTJeF57dYhTdy4MDlyPq0yFzeirpePnxfQPdQg.bdyn7INSOcUkLRCrK520QeeFeFhrkFR4ig2EZNhTaCkg.PNG/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2024-10-08_%EC%98%A4%ED%9B%84_6.52.08.png&quot;, &quot;originalWidth&quot; : &quot;2583&quot;, &quot;originalHeight&quot; : &quot;1195&quot;, &quot;linkUse&quot; : &quot;false&quot;, &quot;link&quot; : &quot;&quot;}">
 <img src="https://mblogthumb-phinf.pstatic.net/MjAyNDEwMDhfMTQy/MDAxNzI4MzgxMjYyMjQ1.zmJM7NkTJeF57dYhTdy4MDlyPq0yFzeirpePnxfQPdQg.bdyn7INSOcUkLRCrK520QeeFeFhrkFR4ig2EZNhTaCkg.PNG/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2024-10-08_%EC%98%A4%ED%9B%84_6.52.08.png?type=w800" data-width="693" data-height="320" alt="">
 </a>
 
 (큰 pc 화면) 좌측에 사이드바가 항상 노출되는 형태
 </div>
 <div id="SE-8904e040-538b-4b80-a6bb-f20f62ce600e">
 ​​​​#데브허브 #devhub #사이드프로젝트 #개발일지 #언어선택 #언어필터링 #사이드바 #반응형
 </div> </div></div>

나만의공간。

KIM JUNGHWAN

동영상 언어 (필터링) 추가 기존에는 언어에 상관없이 시간순으로 card 들이 노출됐었다. '일간 / 주간 / 월간 top 50' 페이지를 추가할까 하다가, 그것보다는 언어 필터링을 먼저 추가하는게 더 나을것 같다고 판단하여 빠르게 진행했다. 현재까지는 모든 컨텐츠가 '한국어' 혹은 '영어' 이다. 그래서, 아래 캡쳐화면과 같이 '모든 언어', '한국어', '영어' 버튼을 추가했다. 다들 예상 가능하겠지만 언어 버튼을 누르면 해당 언어 컨텐츠들만 나열이 되게 된다. 반응형 사이드바 수정 기존에는 화면크기 (mobile / pad / pc) 에 상관없이 모두 좌측 상단에 있는 메뉴버튼 (햄버거.......

[데브허브] DEVHUB 진행상황 (언어 선택 추가) - 2024.10.06

댓글