레벨업의 테크노트28 [애자일로 빅픽처를 그리다] 유저에게 효과적인 프로덕트를 전달하는 개발팀의 업무 흐름 ‘애자일로 빅픽처를 그리다’ 빅픽처인터렉티브가 애자일 문화와 실천법으로 일하면서 프로덕트를 만들어 나가는 여정에 대한 이야기를 담고 있습니다. 빅픽처인터렉티브는 프로덕트 중심으로 크루를 구성하여, 하나의 개발팀은 하나의 프로덕트를 담당합니다. 게임 코칭을 서비스 하는 프로덕트의 개발팀은 다음과 같은 고민이 있었습니다. 어떻게 하면 게임 코칭 서비스를 더 많은 게이머들이 이용할까? 게임 코칭 서비스는 지속적으로 게이머들이 이용하고 있는 프로덕트 입니다. 서비스가 더 많은 유저가 재미있게 게임을 즐길 수 있도록 도움을 주는 서비스로 발전하고 싶었습니다. 우리는 관성적으로 프로덕트를 개발하는 것이 아니라, 유저 공감을 바탕으로 한 문제와 해결책 발견이 선행되어야 한다는 것에 동의했습니다. 이에 유저의 문제를 .. 2022. 1. 18. [프론트엔드]Node.js 메모리 누수 탐지하기 *사내 내부 공유를 위해 작성되었던 글이기 때문에 내부 코드를 유추할 수 있는 내용은 일부 숨김 처리하거나 의사 코드로 처리하였습니다. 안녕하세요, 빅픽처 인터랙티브 프론트엔드(Frontend) 챕터 소속 개발자 박성렬입니다. 저희 개발팀은 올해(2021년) 하반기에 FE 리뉴얼 작업을 진행하고 있습니다. 기존에 운영하던 웹앱은 Vue Single Paged App(이하 SPA) 기반 앱에 정적으로 생성된 페이지 몇 개를 일부 섞은 일종의 하이브리드 SPA+SGP(이하 Statically Generated Page) 앱이었는데요, 이번에 서버 사이드 렌더링(Server Side Rendering, SSR)로 전환하며 널리 알려진 SSR 도구를 사용하지 않고 직접 개발하는 시도를 진행했습니다. 그 덕분에 .. 2022. 1. 17. [애자일로 빅픽처를 그리다] 데이터 대시보드 들어가면서 우리는 레벨업코칭(https://online.gamecoach.pro/) 서비스를 애자일 하게 개발하고 있다. 애자일의 가치와 효과를 경험하면서 목적지를 향해 (애자일 코치님의 팀 건강 검진 결과에 따르면🩺) 즐겁게 항해하고 있으며 K-애자일로 변질되지 않도록 부단히 노력하고 있다. 애자일은 함께 일하기 위한 관점으로써 우리가 무엇을-어떻게 만들어야 할지 안내하는 눈이 되어준다. 우리의 시야를 더욱 분명하게 개선하기 위한 노력 중 하나로 데이터 대시보드를 만들고 있으며, 현재까지의 과정을 공유한다. 애자일을 위한 데이터 대시보드? 스타트업은 모호함을 명확함으로 바꿔가는 과정이라고 생각한다.(by 모호좌👨💻) 우리는 끊임없이 무엇을 할 수 있는지, 언제까지 할 수 있는지에 대한 물음에 대답을 .. 2022. 1. 17. [프론트엔드/디자인]디자인이 프론트엔드와 figma로 대화하는 법 - 빅픽처 인터랙티브 프론트엔드(Frontend) 챕터 소속 박성렬 개발자 뜻을 모르겠습니다. 잘 생각해보면 알아차릴 수 있는 것도 아닙니다. 답답해서 지식인에 물어보고 싶다는 생각도 듭니다. 모로 누워서 뒤척이다가 어영부영 밤이 넘어갑니다. 차라리 듣지나 말았을걸. 의도가 분명하지 않은 표현들은 늘 당혹스럽습니다. 그게 무의식의 하수구에서 끌어올려 별 생각없이 내뱉은 아주 하찮은 소리였을지라도요. 표현은 왜곡되고 말들은 엇나갑니다. 의사소통이 많은 곳에서는 그만큼 많은 오해가 발생합니다. 개발팀은 말할 것도 없습니다. 그 중에서도 하물며 서로 말하는 방식이 다른 디자인과 프론트엔드(FE)와 디자인은 최악의 관계가 될 가능성이 매우 높습니다. 디자인의 언어만으로는 의도를 명확하게 전달하기 어렵기 때문입니.. 2022. 1. 14. [프론트엔드] ClientOnly 컴포넌드 개발 여행 📌 목차 서론 Vue SSR의 기본적인 설명 코드 설명 결론 참고자료 📌 서론 안녕하세요. 프론트엔드 개발자로 일하는 최종선이라고 합니다. 저희 회사는 Nuxt를 사용하는 대신 Vue를 자체 커스터마이징을 하여 SSR을 구현하여 사용하고 있습니다. 따라서 필요에 따라 컴포넌트 전체의 랜더링 시점을 결정하는 Nuxt에서의 컴포넌트를 따로 제작하게 되었습니다. 그에 따라 이 글에서는 사용방법 및 구현 방식을 설명하고자 합니다. 그럼 재밌게 읽어주세요~! 🙇🏻♂️ 💡 Nuxt에서 client-only 컴포넌트란? ClientOnly 컴포넌트는 자식요소들을 client-side에서 랜더링 시킵니다. 📌 Vue SSR의 기본적인 설명 일단 해당 컴포넌트에 대해서 조금 더 깊게 이해를 하자면 먼저 customiz.. 2022. 1. 12. [프론트엔드]웹 표준 지키기 - 포커스 표시기 A guide to designing accessible, WCAG-compliant focus indicators를 바탕으로 작성되었습니다. 안녕하세요, 빅픽처 인터랙티브 개발팀 프론트엔드(FrontEnd) 챕터 소속 박성렬입니다. 이번에는 웹 표준과 포커스 표시기에 대해서 알아보도록 하겠습니다. 우리 사이에 낯선 사람들이 삽니다. 같은 공기를 마시고 같은 공간에 사는 것은 분명합니다. 하지만 우리와는 다른 방식으로 살아갑니다. 이들이 인터넷을 사용하는 모습도 다릅니다. 머릿속에 당장 떠오르는 웹페이지는 당연히 마우스로 조작해야 하고 그렇지 않으면 응당 손가락으로라도 터치해야 합니다. 그러나 이 낯선 사람들은 마우스도 손가락도 사용할 수가 없습니다. 그러나 낯선 존재는 분명히 곁에 숨쉬며 살아있습니다... 2022. 1. 12. [프론트엔드]Vue build time 최적화 해보기 feat.Vite - 2탄 📌 목차 요약 서론 레벨업 나라의 역사 Vite 무기를 찾아서 Vite 무기 휘둘러 보기. (회사 프로젝트 적용하기) 결론 📌 요약 기존 vite 적용후 build time 34,897ms 548ms re-build time 3,310ms 100ms 이하 📌 서론 안녕하세요! 빅픽처에서 종선버를 맡고 있는 최종선이라고 합니다. 🙇🏻♂️ 저번 1탄을 쓴지 시간이 많이 흘렀네요. 그동안 레벨업 프론트 프로젝트에는 많은 변화가 있었고 빌드 타임또한 최대한 줄이려는 노력들이 있었습니다. (조금의 코드 수정후 매번 기다리는 시간이 아깝고 금붕어 집중을 가진 종선버는 쉽게 집중도 깨지기 때문입니다.) 그럼 이제 어떻게 3,4897ms에서 548ms까지 줄일 수 있었는지에 대해서 알아보겠습니다. 그럼 출발! 🚀 📌.. 2022. 1. 11. 블로그 사이트 재구성하기 2 - 개발하기 안녕하세요, 빅픽처 인터랙티브 개발본부 프론트엔드(FrontEnd)챕터 소속 개발자 박성렬입니다. 이번에 우연한 기회에 자가격리로 블로그 사이트를 기획부터 디자인, 개발까지 재구성하며 느꼈던 점들을 공유해 보고자 합니다. 기획과 디자인에 이어서 이번에는 개발을 어떻게 진행했는지 이야기를 나눠보도록 하겠습니다. 개발하기 작업에 앞서 미리 지정한 개발 목표는 아래와 같습니다. Server Side Rendering(이하 SSR)을 적용할 것 monorepo(이하 모노레포)를 완벽히 구현할 것 통일된 커맨드로 전체 패키지를 빌드할 수 있을 것 다른 패키지 간에도 버전 관리를 할 수 있을 것 @xyz/abc 형태의 scoped 패키지로 배포하고 재활용할 수 있을 것 yarn workspace를 사용할 것 CI-.. 2022. 1. 11. 블로그 사이트 재구성하기 1 - 기획과 디자인 안녕하세요, 빅픽처 인터랙티브 개발본부 프론트엔드(FrontEnd)챕터 소속 개발자 박성렬입니다. 이번에 우연하게 자가격리로 업무를 잠시 쉬게 되어, 이 시간동안 블로그 사이트를 기획부터 디자인, 개발까지 재구성하며 느꼈던 점들을 공유해 보고자 합니다. 시작하며 세상엔 가치있는 것들이 너무나 많습니다. 리셀샵에서 구매한 나이키 조던👟도 중요하고, 어렸을 때 쓰던 박찬호 썬칩 열쇠고리가 달린 다이어리도 중요합니다. 제 어머니는 “별 쓸데없는 걸 다 중요하게 생각한다”고 투정을 부리기도 했습니다. 그렇게 사소한 것에 애착을 쉽게 가지는 제게도 블로그는 생각보다 그렇게 중요한 것이 아니었던 것 같습니다. 호스팅 비용이 밀려서 청구서 메일💸이 쌓일 때에도 귀찮다는 생각밖에 들지 않았습니다. 각종 오류들이 쌓여가.. 2022. 1. 11. [2편] 개발 7년차에서 매니저 3년차로(개발팀 7명에서 33명이 되기까지) 들어가면서 [1편]에서 매니저로서 피해야 할 길(절망 편)에 대해서 이야기했다. 2편에서는 반대로 마주하고 나아가야 할 길(희망 편)에 대해서 말해보려 한다. 초보 매니저에게 도움이 되는 글이 되었으면 좋겠다. 마주하고 나아가야 할 길 작은 목소리에 귀 기울이기 매니저가 된 이후 가장 어려웠던 부분은 구성원의 기분과 컨디션을 파악하는 일이었다. 팀원들에게 나의 의견을 강하게 전달하거나 회의에서 구성원과 반대되는 목소리를 내고 난 후에는 하루 종일 회의가 떠오르고 신경 쓰여 편히 쉴 수가 없었다. 구성원의 사기가 꺾이거나 실망하진 않았을지, 더 부드럽게 전달할 수 있는 방법은 없었는지 고민이 고민을 낳아 잠을 이루기 어려운 적도 많았다.(소심함이 문제였을지도...) 매니저로서 의사결정에 확신이 있었더라면 .. 2021. 11. 8. [1편] 개발 7년차에서 매니저 3년차로(개발팀 7명에서 33명이 되기까지) 들어가면서 실무자가 매니저로 넘어가는 길에 도움이 되는 이정표를 작게나마 더하고 싶었다. 개발자로 7년을 일하다 7명을 팀원을 맡게 되고(자기소개의 글), 2년간 팀과 함께 성장하며 33명이 되기까지 경험을 바탕으로 피해서 돌아가야 할 것과 마주하고 정면 돌파해야 하는 것들을 정리해 보았다. 피하고 돌아가야 할 길 비교형 문장 우리 팀은 반기마다 서라운드 리뷰(협업했던 동료를 서로 리뷰하고 평가함)를 진행한다. 팀을 리드하는 입장에서 좀처럼 받기 어려운 동료들의 피드백을 들을 수 있는 소중한 시간이다. 서라운드 리뷰를 통해 나는 "프런트엔드와 백엔드를 비교하며 표현하지 말아 달라."라는 피드백을 받았다. 할 일을 계획하는 부서회의 때 "A라는 기능은 트랜잭션 관리 때문에 프런트엔드 개발보다 백엔드 개발이.. 2021. 11. 4. [프론트엔드]데이터 시각화-닥지지 리더보드 개선 완성된 분포도 먼저 보기(새 창으로 열립니다) 안녕하세요, 빅픽처 인터랙티브에서 프론트엔드 및 대회 데이터 시각화를 맡고 있는 박성렬입니다.👋🏼 저번에는 dak.gg(이하 닥지지)의 PUBG rating 분포 그래프📈를 개선해 보았습니다. 이번에는 닥지지의 리더보드📊를 개선해 보려고 합니다. 웹 스크레이핑(웹 크롤링) 우선 리더보드에 있는 자료를 가져와서 재활용하기 위해 자료 추출을 시도했습니다. 이 과정을 좀 더 전문적으로는 웹 스크레이핑 또는 웹 크롤링이라고 합니다. 보통은 별도의 API 엔드포인트로부터 자료를 가져옵니다. 이번에는 자료가 서버 사이드 렌더링을 통하여 바로 HTML에 렌더되고 있습니다. 따라서 HTML을 다운로드하고 HTML 내용을 해석하는 과정을 거쳐서 자료를 추출합니다. 제가 자바.. 2021. 9. 28. 이전 1 2 3 다음
