[우테코 6기] 불필요하게 리랜더링 되는 문제 해결하기
·
우테코
불필요한 리렌더링 문제 해결하기프로젝트를 진행하다 보면 성능 이슈 중 하나로 페이지 리렌더링 문제가 자주 발생합니다. 특히, 우리 방끗과 같이 여러 개의 인풋 필드가 있는 폼을 제공하는 서비스에서 사용자가 입력할 때마다 페이지 전체가 리렌더링 되는 경우 성능 저하를 유발할 수 있습니다. 우리도 같은 문제를 겪었고 이번 글에서 우리 팀이 이러한 문제를 해결한 과정을 공유하고자 합니다.   1. 문제 정의: 페이지 전체 리렌더링문제가 발생한 페이지는 방의 기본 정보를 입력하는 약 10개의 인풋 필드가 있는 폼 페이지였습니다. 초기 작업할 때는 빠르게 작업을 진행하려다보니 발견하지 못했지만 레벨 3 이후 프로젝트 회고를 통해 이러한 이슈가 있다는 것을 발견했습니다. 발견된 문제는 폼의 각 인풋 필드가 변경될 ..
[우테코 6기] 사용자 피드백 반영 및 A/B 테스트로 UX 개선하기
·
우테코
1. 프로젝트 배경문제 인식: 사용자 피드백과 개선 필요성모니터링을 진행하며 우리 팀은 최근 서비스 내에서 질문 커스텀 기능의 사용자 클릭률이 저조하다는 문제를 발견했습니다.특히, 유저 테스트를 통해 이 기능을 잘 모르거나 사용에 어려움을 느끼는 사용자가 많다는 사실이 드러났습니다. 이러한 피드백을 바탕으로 사용자 경험을 최적화할 필요성을 느꼈고, 이를 통해 기능 사용률을 높이기로 했습니다.목표 설정: UX 최적화와 사용자 경험 향상프로젝트의 목표는 단순한 기능 추가가 아닌, 사용자들이 직관적으로 해당 기능을 발견하고 활용할 수 있도록 UX를 개선하는 것이었습니다. 이를 위해 여러 차례의 A/B 테스트와 사용자 피드백 수집을 통해 사용자 경험을 지속적으로 향상하기로 했습니다. 2. 사용자 피드백 수집 과..
[우테코 6기] 모든 팀의 AWS S3 프로젝트 폴더를 날렸다고..?
·
우테코
모든 팀 프로젝트 폴더를 날려버렸다, 내가... 지난 팀 프로젝트 중, 정말 아찔한 실수가 있었다. GA 설정 작업을 위해 팀원들과 모여 작업을 진행하고 있었고, 모든 세팅을 마친 후 AWS S3에 배포하려고 했다. 배포를 위해 우리는 프로젝트 폴더인 'bang-ggood' 안으로 들어갔다고 생각했다.배포 시 종종 기존 파일이 덮어씌워지는 문제 때문에, 나는 늘 하던 대로 기존 파일들을 모두 삭제한 후 새 파일을 업로드하는 방식으로 진행했다. 그날도 다르지 않았다. 우리 프로젝트 폴더 안의 파일을 모두 선택하고 삭제를 진행했다. 아니 진행한 줄 알았다. 폴더에 잘 들어간 줄 알았다.순간적인 착오로 우리는 'bang-ggood' 폴더가 아닌 S3 버킷 내부 폴더 전체, 즉 모든 팀의 프로젝트 폴더를 삭제해..
[우테코 6기] 개발자가 현장 유저 테스트에서 깨달은 것: 불편함을 개선하다
·
우테코
우리가 기획하고 있는 서비스는 처음 방을 구하거나, 방을 많이 구해본 경험이 없는 사용자들이 방을 구할 때 꼼꼼하게 체크하여 더 좋은 방을 찾을 수 있도록 돕는 서비스이다.자세한 이야기는 기획 단계에 대해 작성한 글을 참고하자! 그러다 보니 우리 서비스의 목적은 “사용자가 우리 서비스를 통해 이전보다 더 꼼꼼하게 방을 체크할 수 있고, 이를 통해 더 좋은 방을 선택할 수 있다”는 것이다. 이 목표를 위해 지난 스프린트 기간 동안 기획과 기능 구현을 진행했고, MVP 기능이 모두 구현된 후에는 팀과 함께 직접 사용자가 되어 유저 테스트를 진행하기로 했다.부동산과 방을 함께 보는 유저가 페르소나였기 때문에, 팀원들을 두 팀으로 나누어 각자의 페르소나를 설정하고 부동산에 들러 집을 보기로 했다.팀을 구상한 과..
[우테코 6기] 방끗의 페르소나와 유저 플로우 짜기
·
우테코
** 이 글은 레벨 3 시작 2주차 진행 과정 중 작성한 글입니다. 유저 플로우 설계, 왜 중요할까?프로젝트를 시작하면서 가장 먼저 했던 일은 MVP(최소 기능 제품)를 정의하는 것이었어요. 그다음으로 중요한 건 유저 플로우를 정리하는 것이었죠.유저 플로우는 간단히 말해, 우리 서비스를 어떻게 사용할지에 대한 유저 시나리오라고 생각합니다. 이 과정은 개발자의 시선이 아닌, 유저의 시선에서 서비스를 바라볼 수 있도록 도와줍니다. 결국, 유저들이 어떤 흐름으로 서비스를 이용할지 미리 그려보는 작업이죠. 기존 여러 프로젝트를 진행하면서 기획자들이 이 페르소나를 가장 먼저 설정하고 생각하는 걸 보고 배운 후 적용해보고 있어요. 서비스를 기획하는 과정은 꽤나 흥미로운거 같습니다.가상 유저, 페르소나 설정우리 팀은..
[우테코 6기] 프로젝트 환경 세팅 및 기술 스택 정하기
·
우테코
** 이 글은 레벨 3 시작 2주차 진행 과정 중 작성한 글입니다. 프로젝트를 시작하기 앞서 주어진 요구사항에 맞게 기본 프로젝트를 세팅해야 했다.진행해야 하는 것은 다음과 같았다. 프로젝트 환경 세팅개발 컨벤션 정하기스타일링 방법 선택 등 사용할 기술 스택 정하기타겟 환경 정하기 프로젝트 환경 세팅가장 먼저, 프로젝트 환경 세팅에서는 기존에 Vite나 CRA를 주로 사용했던 것과 달리, 이번에는 Webpack을 기반으로 React와 TypeScript 환경을 세팅하기로 결정했다. Webpack은 자바스크립트 모듈을 번들링 하는 도구로, 다양한 로더와 플러그인을 사용해 코드 최적화와 빌드 환경을 구성할 수 있다. webpack을 선택한 이유는, 물론 요구사항이기도 했지만, Webpack이 모듈 번들러로서..
[우테코 6기] 디자인 하는 개발자 되는 법 (feat. 디자인 처음하는 개발자를 위한)
·
우테코
디자인을 처음 접하는 개발자들에게 이 글을 바칩니다. 근데 사실 본인도 디자이너는 아니고 그냥 UI/UX에 관심 있는 개발자이기 때문에 디자인 처음하는 개발자만 보시길~ ❌ 디자이너들은 출입금지입니다… ❌   이 글은 개발자인 우리가 울며 겨자 먹기로 디자인을 해야 할 때 도움이 될 만한 팁들로 채워져 있습니다. 아마 읽고 있는 당신도 디자이너 없이 프로젝트를 시작해서 개발자인데도 디자인을 해야 하는 상황일 겁니다.디자인에 대해 아무것도 모르지만, 이 가이드를 따라 하면  야 너두 디자인할 수 있어…~~~!  🍀  먼저 프로젝트 디자인을 진행하는 일반적인 과정은 다음과 같습니다. 1. IA(정보 구조) 작성하기2. 레퍼런스 찾기3. 와이어프레임 작성하기4. 디자인 시스템 설정하기5. GUI(그래픽 사용..
[우테코 6기] 레벨3 팀플 진행 과정; 내가 디자이너야, 개발자야?
·
우테코
** 이 글은 레벨 3 시작 1주차 진행 과정 중 작성한 글입니다. ((아직도 1주차임))  우테코에서는 프론트엔드, 백엔드, 안드로이드 트랙만 있기 때문에 기획자나 디자이너가 따로 없다.그 말인즉, 팀을 이루는 프론트와 백엔드 개발자들이 기획부터 디자인, 그리고 개발까지 모두 맡아야 한다는 뜻이다. 사실 기획 부분은 크게 부담스럽지 않았다. 비즈니스 모델을 고려하지 않고, 사용자에게 필요한 아이디어를 중심으로 기획할 수 있다고 생각했기 때문이다. 팀 프로젝트에서는 수익보다는 사용자 경험과 아이디어의 가치가 더 중요하다고 느끼기 때문이다. 하지만 디자인은 전혀 다른 이야기였다.여러 팀 프로젝트를 거치면서, 디자인의 퀄리티가 프로젝트 전체의 퀄리티에 얼마나 큰 영향을 미치는지 이해하고 있었다. 특히, 같은..
[우테코 6기] 레벨3 팀플 아이디어 기획 및 주제 선정 과정
·
우테코
** 이 글은 레벨 3 시작 1주차 진행 과정 중 작성한 글입니다.  팀 프로젝트 시작 전..우테코 레벨 3에서는 내가 직접 기획하고 개발하며 협업하는 팀 프로젝트를 진행한다.그래서 방학 기간 동안 어떤 프로젝트를 하고 싶은지, 어떤 기능을 구현해보고 싶은지 고민하며 시간을 보냈다. 내가 떠올린 프로젝트 아이디어는 현재 우리 팀이 진행 중인 자취방 체크리스트 서비스와 아직 공개되지 않은 기타1 프로젝트였다. 그리고 구현해보고 싶은 기능으로는 웹 푸시 알림, 애니메이션 효과, 결제 시스템이 있었다. 방학 동안 나는 다양한 아이디어를 떠올리며 아이디어 수첩에 정리했다.((여담이지만, 이렇게 모은 아이디어들을 나는 ‘아이디어 쿠키’라고 부르며, 기회가 될 때마다 하나씩 실현해 나가고 있다.))    이전에 자..