프론트엔드8 [프론트엔드]3D 웹앱 깊이 빠져보기 - 2: webGL 퍼포먼스 향상시키기 안녕하세요, 빅픽처인터랙티브 서비스 개발 크루 프론트엔드(FE) 박성렬입니다. 아직도 🌍3D 웹앱 깊이 빠져보기 1부를 읽지 않으셨다면 보고 오시기를 추천드립니다! 1부에서는 3D 웹앱 기획과 디자인, 개발시 고려할 사항에 대해서 간단하게 살펴 보면서, 2부에서 어떤 내용을 다룰지 간단히 암시드렸습니다. 이번 글에서 다룰 내용은 조금 더 심도있고 기술적인 이해가 필요합니다. 따라서 기술적인 자신이 없는 분들은 건너뛰실 수 있도록 다른 챕터로 나누게 되었습니다. 이번에는 실제 코드 중심으로 어떻게 3D 웹앱을 최적화하고 구현했는지 알아보겠습니다. 제가 기존에 작성해오던 내용과 달리, 통일되지 않은 영어표현이 제법 많습니다. 한글로 번역했을 때 해당 의미가 다소 명확하게 전달되지 않는 부분이 있어, 읽기 쉽.. 2022. 6. 7. [프론트엔드]Image Lazy Load 디렉티브 구현 & 사용법 안녕하세요! 빅픽처인터렉티브(주)에서 프론트엔드 개발자로 재직 중인 김종완입니다. 이번 글에서는 이미지를 브라우저 뷰포트에 들어왔을때 lazy load 할 수 있게 해 주도록 만든 imglazyLoad 디렉티브에 대한 구현 방법과 사용 설명에 대해 간략히 적어보려고 합니다. 이번에 작성하는 글은 다른 프론트엔드 팀원분들도 아주 쉽게 이해를 할 수 있을 거라 판단하여 정말 간략히 만 설명드리고자 하여 글이 조금 짧을 수도 있습니다 ^^;; 구현 배경 페이지가 나타날때 스크롤이 어떻든 보통 페이지 전체를 랜더링을 하게 되며 이미지 또한 전부 가져오게 됩니다. 하지만 스크롤이 긴 페이지의 경우 즉, 리스트가 굉장히 많은 페이지의 경우 그리고 그 리스트에 용량이 클 수도 있는 이미지들이 섞여 있다면 한 번에 많.. 2022. 4. 29. [프론트엔드/기획/디자인]3D 웹앱 깊이 빠져보기 - 1 안녕하세요, 빅픽처인터랙티브 서비스 개발 크루 프론트엔드(FE) 박성렬입니다. 시간이 믿을 수 없이 빠르네요. 🎉빅픽처인터랙티브의 서비스인 게임코치온라인이 새 해를 맞이한 것이 벌써 3개월 전입니다!🎉 이미 2022년 초입은 지나간지 오래입니다. 프로젝트를 진행하고 이를 별도로 정리하다 보니 새해 마무리가 늦었습니다. 3D 웹 기술🧑🏻💻에 좀더 깊게 접근해 보고자 약 2.5주간 게임코치온라인(이하 GCO)의 한 해를 정리하는 3D 인터랙션 웹페이지를 직접 기획부터 디자인, 개발까지 해 보느라고 바빴거든요. 만들어진 프로젝트의 영상과 링크를 먼저 보시죠. 게임코치온라인을 한 번 방문해 보시면 더욱 좋을 것 같구요😉 👉3D 인터랙션 웹페이지 링크 주의 - 화면에 보시는 내용은 실제 GCO의 통계와 무관합니.. 2022. 4. 11. [프론트엔드] React 뒤로가기 시 상태값 & 스크롤 위치 유지 안녕하세요! 빅픽처인터렉티브(주)에서 프론트엔드 개발자로 근무하고 있는 김종완 개발자입니다! 이번에 개인화앱 TF에 배정이 되어 재밌게 새로운 서비스를 만들어가고 있는데요. 사내에 많은 프론트엔드 개발자분들이 React를 활용하여 프로젝트를 진행하고 싶다는 Needs가 있다고 판단하여 이번에 들어가는 개인화앱은 React를 활용하여 모바일 웹뿐만 아니라 안드로이드도 하이브리드 앱으로 개발을 진행하기로 했습니다. 이전에도 많은 하이브리드앱을 개발해본 경험이 있는데요. Vue 프레임웍을 활용해서 하이브리드 앱을 개발해본 경험은 다수 존재하는데 React 라이브러리를 활용해서 하이브리드 앱을 개발해본 경험은 별로 없는 거 같습니다. 하이브리드 앱뿐만 아니라 커머스 같은 서비스를 개발하면서 제가 제일 많이 고민.. 2022. 4. 5. [프론트엔드]구글 시트로 현지화 문자열 업데이트 자동화하기 안녕하세요, 빅픽처 인터랙티브 프론트엔드(FE) 박성렬입니다. 개발자에게 현지화(localization)는 매우 수고로운 일입니다. 현지화에 사용될 문자열을 관리하는 일은 말할 것도 없습니다. 현지화 관리가 왜 어려운지, 그리고 이를 빠른 속도로 진행되는 애자일 환경에서 어떻게 대처할지에 대해 소개합니다. 왜 현지화 문자열 관리가 어려운가요? 현지화는 매우 깊고 넓은 영역입니다. 현지화 자체의 어려움에 대해서는 나중에 별도의 문서로 다루도록 하겠습니다. 여기서는 현지화 문자열 관리가 왜 어려운지만 다루어 보겠습니다. 현지화 문자열은 일반적으로 개발팀의 외부에서 관리합니다. 규모가 있고 분업이 충분히 이루어진 개발팀일수록 세부 서비스(혹은 정책)의 복잡도는 매우 높기 때문입니다. 그리고 문자열의 배치는 보.. 2022. 3. 4. [프론트엔드]웹 표준 지키기 - 포커스 표시기 A guide to designing accessible, WCAG-compliant focus indicators를 바탕으로 작성되었습니다. 안녕하세요, 빅픽처 인터랙티브 개발팀 프론트엔드(FrontEnd) 챕터 소속 박성렬입니다. 이번에는 웹 표준과 포커스 표시기에 대해서 알아보도록 하겠습니다. 우리 사이에 낯선 사람들이 삽니다. 같은 공기를 마시고 같은 공간에 사는 것은 분명합니다. 하지만 우리와는 다른 방식으로 살아갑니다. 이들이 인터넷을 사용하는 모습도 다릅니다. 머릿속에 당장 떠오르는 웹페이지는 당연히 마우스로 조작해야 하고 그렇지 않으면 응당 손가락으로라도 터치해야 합니다. 그러나 이 낯선 사람들은 마우스도 손가락도 사용할 수가 없습니다. 그러나 낯선 존재는 분명히 곁에 숨쉬며 살아있습니다... 2022. 1. 12. [프론트엔드]데이터 시각화-닥지지 리더보드 개선 완성된 분포도 먼저 보기(새 창으로 열립니다) 안녕하세요, 빅픽처 인터랙티브에서 프론트엔드 및 대회 데이터 시각화를 맡고 있는 박성렬입니다.👋🏼 저번에는 dak.gg(이하 닥지지)의 PUBG rating 분포 그래프📈를 개선해 보았습니다. 이번에는 닥지지의 리더보드📊를 개선해 보려고 합니다. 웹 스크레이핑(웹 크롤링) 우선 리더보드에 있는 자료를 가져와서 재활용하기 위해 자료 추출을 시도했습니다. 이 과정을 좀 더 전문적으로는 웹 스크레이핑 또는 웹 크롤링이라고 합니다. 보통은 별도의 API 엔드포인트로부터 자료를 가져옵니다. 이번에는 자료가 서버 사이드 렌더링을 통하여 바로 HTML에 렌더되고 있습니다. 따라서 HTML을 다운로드하고 HTML 내용을 해석하는 과정을 거쳐서 자료를 추출합니다. 제가 자바.. 2021. 9. 28. [프론트엔드] 데이터 시각화-분포도 시각화 개선하기 안녕하세요, 빅픽처 인터랙티브에서 프론트엔드 및 대회 데이터 시각화를 맡고 있는 박성렬입니다.👋🏼 최근에 에드워드 터프트(Edward Tufte)의 유명한 저작인 The Visual Display of Quantitative Information(이하 VQ)을 읽고 있습니다. 에드워드 터프트는 통계학자이자 예일대 명예교수로, 위키백과에 별도의 페이지가 있을 정도로 데이터 시각화계에서 상당한 유명인입니다. 터프트의 책 역시 그만큼 데이터 시각화에서 중요한 위치를 가지고 있습니다. VQ는 그 중에서도 핵심적인 생각들을 간추려서 표현하고 있는 저작물입니다. 이번에는 책의 내용을 간단히 리뷰하면서, 책에서 소개된 개념을 바탕으로 dak.gg 게임 통계 사이트에서 제공되는 통계 차트를 개선해 보도록 하겠습니다. .. 2021. 7. 8. 이전 1 다음
