레벨업의 테크노트28 [Next.js] Context API 를 활용하여 Modal, Toast 개발 우리가 서비스를 만들다보면 Modal 이나 Toast 메세지를 구현해야하는 경우가 흔히 발생합니다. 기존 우리 회사가 쓰던 프레임웍인 Vue 프레임웍에서는 이러한 Modal이나 Toast를 plugin으로 개발하여 전역적으로 사용하기 쉽게 만들었어서 굉장히 간편했었는데 이번에 React 라이브러리로 전환하면서 전역적으로 쉽게 사용할 수 있도록 Modal과 Toast를 만들어보았는데 그 과정을 여러분께 공유해볼까하여 글을 작성하게 되었습니다. 1. Redux? Context API? 둘 중에 어떤걸 선택해야하나..? 사실 이 부분을 가장 공유해보고 싶었던 것 같습니다. 모달을 열고 닫을때나 토스트 메세지를 띄울때 모달 state와 토스트 state를 mutation 해야하는데 이럴려면 함수를 호출해야하고 .. 2022. 10. 25. [프론트엔드]3D 웹앱 깊이 빠져보기 - 2: webGL 퍼포먼스 향상시키기 안녕하세요, 빅픽처인터랙티브 서비스 개발 크루 프론트엔드(FE) 박성렬입니다. 아직도 🌍3D 웹앱 깊이 빠져보기 1부를 읽지 않으셨다면 보고 오시기를 추천드립니다! 1부에서는 3D 웹앱 기획과 디자인, 개발시 고려할 사항에 대해서 간단하게 살펴 보면서, 2부에서 어떤 내용을 다룰지 간단히 암시드렸습니다. 이번 글에서 다룰 내용은 조금 더 심도있고 기술적인 이해가 필요합니다. 따라서 기술적인 자신이 없는 분들은 건너뛰실 수 있도록 다른 챕터로 나누게 되었습니다. 이번에는 실제 코드 중심으로 어떻게 3D 웹앱을 최적화하고 구현했는지 알아보겠습니다. 제가 기존에 작성해오던 내용과 달리, 통일되지 않은 영어표현이 제법 많습니다. 한글로 번역했을 때 해당 의미가 다소 명확하게 전달되지 않는 부분이 있어, 읽기 쉽.. 2022. 6. 7. [유저리서치4] 결과 정리하고 활용하기 안녕하세요, 새우🦐입니다. 드디어 유저 리서치의 마지막 글이네요!😭 이전 글에서 실제 인터뷰까지 모두 마쳤다면 마무리로 인터뷰 결과를 정리하고 데이터를 활용하는 방법에 대해 이야기해보겠습니다. 📌 인터뷰 결과 데이터화 하기 인터뷰 결과 정리는 녹취록을 작성하는 것에서 시작합니다. 저는 주로 구글 스프레드시트를 사용하여 인터뷰당 하나의 시트를 사용하여 녹취록을 작성합니다. 처음부터 끝까지 다시 들으면서 시간의 흐름에 따라 놓치지 않고 작성해주세요. 클로바 노트를 사용하시면 조금 더 수월하게 작업하실 수 있습니다.😁 이렇게 구어체로 작성된 녹취록은 요약본으로 한번 더 정리하는 작업을 합니다. 이번에는 한 시트에 전체 인터뷰 내용을 넣고 주제를 카테고라이징 해서 내용의 요점만 짧게 정리합니다. 일종의 데이터 .. 2022. 4. 29. [프론트엔드]Image Lazy Load 디렉티브 구현 & 사용법 안녕하세요! 빅픽처인터렉티브(주)에서 프론트엔드 개발자로 재직 중인 김종완입니다. 이번 글에서는 이미지를 브라우저 뷰포트에 들어왔을때 lazy load 할 수 있게 해 주도록 만든 imglazyLoad 디렉티브에 대한 구현 방법과 사용 설명에 대해 간략히 적어보려고 합니다. 이번에 작성하는 글은 다른 프론트엔드 팀원분들도 아주 쉽게 이해를 할 수 있을 거라 판단하여 정말 간략히 만 설명드리고자 하여 글이 조금 짧을 수도 있습니다 ^^;; 구현 배경 페이지가 나타날때 스크롤이 어떻든 보통 페이지 전체를 랜더링을 하게 되며 이미지 또한 전부 가져오게 됩니다. 하지만 스크롤이 긴 페이지의 경우 즉, 리스트가 굉장히 많은 페이지의 경우 그리고 그 리스트에 용량이 클 수도 있는 이미지들이 섞여 있다면 한 번에 많.. 2022. 4. 29. [유저리서치3] 고객을 만나고 인터뷰 하기 안녕하세요, 새우🦐입니다. 이전 글에 이어 이번에는 유저 인터뷰의 꽃💐 인터뷰 질문지 작성과 인터뷰 과정에 대한 이야기를 하려고 합니다. 📌 인터뷰 질문지 작성 인터뷰를 하기 앞서 인터뷰에서 사용할 구체적이고 상세한 질문 리스트가 필요합니다. 질문지를 작성하기 전에 인터뷰이들이 경험했을 서비스 과정에 대한 간단한 유저 플로우를 작성해 봅니다. 각 상황에 대한 질문을 놓치지 않고 또 인터뷰이들이 자연스럽게 서비스 이용 경험을 떠올리고 답변할 수 있게 돕기 위해서입니다. 저는 다음과 같이 간단히 유저 플로우를 작성해 보았습니다. 이렇게 작성했으면 이제 유저 플로우의 각 테스트에 따라 본격적인 질문을 작성합니다. 이전 글에서 인터뷰 계획을 잡을 때 고객에게 궁금한 내용에 대해 큰 줄기를 잡아놨으니 어렵지 않습.. 2022. 4. 22. [프론트엔드/기획/디자인]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. [유저리서치2] 본격적인 계획 세우기 안녕하세요, 새우🦐입니다. 이전 글에서는 유저 리서치를 시작하기 전에 큼지막한 에픽을 만드는 과정을 소개했는데요, 다음으로 에픽을 토대로 본격적인 계획을 세우고 진행해 나가는 과정을 공유하려고 합니다!🙂 📌 리서치 방식 선정하기 - 인뎁스 인터뷰 전 글에서 설정했던 3가지 큰 가닥, 리서치 대상과 목표, 리소스를 생각하며 조사 방법과 계획을 세웁니다. 우선 리소스와 목표를 생각해 봤을 때 기존에 생각해두었던 아이디어에 대한 반응을 보거나 가설에 대한 검증이 아닌 ‘발견'이 목표이므로 이에 가장 적합하다고 생각되는 ‘인뎁스 인터뷰'를 진행하기로 결정하였습니다. 인뎁스 인터뷰는 고객 한 명에게 제품 사용 경험에 대한 내용을 깊게 인터뷰하는 기법으로 가장 많이 실행되는 유저 리서치 방법이기도 하죠!😃 크게 나.. 2022. 3. 31. [유저리서치1] 어떻게 시작해야 할까? 안녕하세요, 1:1 온라인 게임 강의 서비스 '게임코치온라인' 프로덕트 매니저 새우🦐입니다. '게임코치온라인'은 LoL코치님들과 수강을 원하는 수강생들을 연결해, 1:1 수업을 받을 수 있도록 해 드리는 게임・교육 C2C 프로덕트입니다🙂 우선 저희 제품의 상황에 대해 간략히 공유드리자면 e스포츠 플랫폼 '레벨업지지'내에서 6개월간 최소 기능 제품(MVP)으로 서비스하다가 최근 22년 3월 '게임코치온라인'으로 ⭐️단독 서비스로 출시⭐️하게 되었습니다. 단독 서비스 출시 이후 그동안 미뤄 왔던 유저 리서치를 진행하게 되었고, UX디자이너로 경력을 쌓아온 제가 해당 에픽을 담당하게 되었습니다. 📌 유저 리서치를 시작하기 전 고려해야 할 세가지 유저 리서치는 사실 '하자!'라고 하기는 쉽지만 막상 시작하려면 .. 2022. 3. 31. [애자일로 빅픽처를 그리다] 데이터 대시보드 #2 들어가면서 지난 데이터 대시보드 1편에서 공유한 데이터 대시보드를 고도화하고 당시 아쉬웠던 부분들(고객군 분리, 유저 획득 경로 상세화, 리소스 데이터 추가)을 보완한 내용을 공유한다. 데이터 대시보드 생성 이후 프로덕트를 담당하는 팀원들의 아이디어가 더해지면서 조금 더 실용적인 지표들이 추가되었다. 정답이 없는 질문에 최선의 답을 구하기 위해, 계속해서 데이터와 결과물을 조정해야 하는 작업이다 보니 소심해지고🤭, 집단지성🧠에 기대게 된다. 이 글도 집단지성이라는 호수에 한 방울💧 보탬이 되기를, 그리고 다음 단계를 제안하고 발전할 수 있는 발판이 될 수 있기를 바란다.🙏 대시보드 추가 기존에 구축했던 데이터 대시보드에는 프로덕트 사용자의 흐름을 전반적으로 살펴보는 AARRR 분석만 존재했다. 동료들에게.. 2022. 3. 7. [프론트엔드]구글 시트로 현지화 문자열 업데이트 자동화하기 안녕하세요, 빅픽처 인터랙티브 프론트엔드(FE) 박성렬입니다. 개발자에게 현지화(localization)는 매우 수고로운 일입니다. 현지화에 사용될 문자열을 관리하는 일은 말할 것도 없습니다. 현지화 관리가 왜 어려운지, 그리고 이를 빠른 속도로 진행되는 애자일 환경에서 어떻게 대처할지에 대해 소개합니다. 왜 현지화 문자열 관리가 어려운가요? 현지화는 매우 깊고 넓은 영역입니다. 현지화 자체의 어려움에 대해서는 나중에 별도의 문서로 다루도록 하겠습니다. 여기서는 현지화 문자열 관리가 왜 어려운지만 다루어 보겠습니다. 현지화 문자열은 일반적으로 개발팀의 외부에서 관리합니다. 규모가 있고 분업이 충분히 이루어진 개발팀일수록 세부 서비스(혹은 정책)의 복잡도는 매우 높기 때문입니다. 그리고 문자열의 배치는 보.. 2022. 3. 4. [더 나은 서비스를 위한 고민] 모달.. 어떻게 사용해야할까? 2015년부터 2021년까지 에이전시를 운영하거나 자사 서비스를 기획/개발하며 여러 서비스를 만들어본 것 같습니다. 여러 서비스들을 만들어보면서 다른 서비스들을 벤치마킹하다보니 여러 가지를 배우고 느끼고 고민해보게 되었는데 제가 고민했던 것 중 이번엔 모달(Modal)에 대해서 저의 개인적인 생각을 말씀드리고 적절한 구성 방법 등을 알아보며 여러분들의 다양한 의견을 나누고 고민해보려고 합니다. 1. 모달(Modal)의 개념 모달(Modal)은 사용자의 이목을 끌기 위해 사용하는 화면전환 기법을 의미합니다. 모달 창이 팝업창과 다른 차이점은 기존의 브라우저 페이지 위에 새로운 윈도 창을 띄우는 팝업창과는 다르게 현재 띄워져있는 화면에 또 하나의 레이어를 까는 것입니다. 기존의 팝업창은 띄워놓으면 닫기 위해.. 2022. 1. 26. 이전 1 2 3 다음
