본문 바로가기

3D3

[프론트엔드]3D 웹앱 깊이 빠져보기 - 2: webGL 퍼포먼스 향상시키기 안녕하세요, 빅픽처인터랙티브 서비스 개발 크루 프론트엔드(FE) 박성렬입니다. 아직도 🌍3D 웹앱 깊이 빠져보기 1부를 읽지 않으셨다면 보고 오시기를 추천드립니다! 1부에서는 3D 웹앱 기획과 디자인, 개발시 고려할 사항에 대해서 간단하게 살펴 보면서, 2부에서 어떤 내용을 다룰지 간단히 암시드렸습니다. 이번 글에서 다룰 내용은 조금 더 심도있고 기술적인 이해가 필요합니다. 따라서 기술적인 자신이 없는 분들은 건너뛰실 수 있도록 다른 챕터로 나누게 되었습니다. 이번에는 실제 코드 중심으로 어떻게 3D 웹앱을 최적화하고 구현했는지 알아보겠습니다. 제가 기존에 작성해오던 내용과 달리, 통일되지 않은 영어표현이 제법 많습니다. 한글로 번역했을 때 해당 의미가 다소 명확하게 전달되지 않는 부분이 있어, 읽기 쉽.. 2022. 6. 7.
[프론트엔드/기획/디자인]3D 웹앱 깊이 빠져보기 - 1 안녕하세요, 빅픽처인터랙티브 서비스 개발 크루 프론트엔드(FE) 박성렬입니다. 시간이 믿을 수 없이 빠르네요. 🎉빅픽처인터랙티브의 서비스인 게임코치온라인이 새 해를 맞이한 것이 벌써 3개월 전입니다!🎉 이미 2022년 초입은 지나간지 오래입니다. 프로젝트를 진행하고 이를 별도로 정리하다 보니 새해 마무리가 늦었습니다. 3D 웹 기술🧑🏻‍💻에 좀더 깊게 접근해 보고자 약 2.5주간 게임코치온라인(이하 GCO)의 한 해를 정리하는 3D 인터랙션 웹페이지를 직접 기획부터 디자인, 개발까지 해 보느라고 바빴거든요. 만들어진 프로젝트의 영상과 링크를 먼저 보시죠. 게임코치온라인을 한 번 방문해 보시면 더욱 좋을 것 같구요😉 👉3D 인터랙션 웹페이지 링크 주의 - 화면에 보시는 내용은 실제 GCO의 통계와 무관합니.. 2022. 4. 11.
[프론트엔드]데이터 시각화-닥지지 리더보드 개선 완성된 분포도 먼저 보기(새 창으로 열립니다) 안녕하세요, 빅픽처 인터랙티브에서 프론트엔드 및 대회 데이터 시각화를 맡고 있는 박성렬입니다.👋🏼 저번에는 dak.gg(이하 닥지지)의 PUBG rating 분포 그래프📈를 개선해 보았습니다. 이번에는 닥지지의 리더보드📊를 개선해 보려고 합니다. 웹 스크레이핑(웹 크롤링) 우선 리더보드에 있는 자료를 가져와서 재활용하기 위해 자료 추출을 시도했습니다. 이 과정을 좀 더 전문적으로는 웹 스크레이핑 또는 웹 크롤링이라고 합니다. 보통은 별도의 API 엔드포인트로부터 자료를 가져옵니다. 이번에는 자료가 서버 사이드 렌더링을 통하여 바로 HTML에 렌더되고 있습니다. 따라서 HTML을 다운로드하고 HTML 내용을 해석하는 과정을 거쳐서 자료를 추출합니다. 제가 자바.. 2021. 9. 28.