우테코

사실상 코드잽에 합류하게 된 이유인 모노레포! 그걸 도입하기로 한 이유와 그 과정을 설명해보자 합니다.   🌐 기존 코드잽 프로젝트 구조현재 코드잽 프로젝트는 다음과 같은 구조로 이루어져 있습니다:backendfrontendchrome-extension (서브 모듈로 관리)또한 앞으로 추가될 예정인 패키지들:vscode-extensionintellij-plugin이러한 구조에서는 프론트엔드에서 이미 구축한 디자인 시스템을 크롬 익스텐션에서 전혀 사용할 수 없는 상황입니다. 이로 인해 크롬 익스텐션에서 디자인 시스템을 별도로 작업해야 했고, API 스펙에 변경 사항이 생길 경우 프론트엔드와 크롬 익스텐션 코드를 각각 수정해야 하는 불편함이 있었습니다. 이러한 문제를 해결하기 위해 디자인 시스템과 공통 모..

불필요한 리렌더링 문제 해결하기프로젝트를 진행하다 보면 성능 이슈 중 하나로 페이지 리렌더링 문제가 자주 발생합니다. 특히, 우리 방끗과 같이 여러 개의 인풋 필드가 있는 폼을 제공하는 서비스에서 사용자가 입력할 때마다 페이지 전체가 리렌더링 되는 경우 성능 저하를 유발할 수 있습니다. 우리도 같은 문제를 겪었고 이번 글에서 우리 팀이 이러한 문제를 해결한 과정을 공유하고자 합니다.   1. 문제 정의: 페이지 전체 리렌더링문제가 발생한 페이지는 방의 기본 정보를 입력하는 약 10개의 인풋 필드가 있는 폼 페이지였습니다. 초기 작업할 때는 빠르게 작업을 진행하려다보니 발견하지 못했지만 레벨 3 이후 프로젝트 회고를 통해 이러한 이슈가 있다는 것을 발견했습니다. 발견된 문제는 폼의 각 인풋 필드가 변경될 ..

1. 프로젝트 배경문제 인식: 사용자 피드백과 개선 필요성모니터링을 진행하며 우리 팀은 최근 서비스 내에서 질문 커스텀 기능의 사용자 클릭률이 저조하다는 문제를 발견했습니다.특히, 유저 테스트를 통해 이 기능을 잘 모르거나 사용에 어려움을 느끼는 사용자가 많다는 사실이 드러났습니다. 이러한 피드백을 바탕으로 사용자 경험을 최적화할 필요성을 느꼈고, 이를 통해 기능 사용률을 높이기로 했습니다.목표 설정: UX 최적화와 사용자 경험 향상프로젝트의 목표는 단순한 기능 추가가 아닌, 사용자들이 직관적으로 해당 기능을 발견하고 활용할 수 있도록 UX를 개선하는 것이었습니다. 이를 위해 여러 차례의 A/B 테스트와 사용자 피드백 수집을 통해 사용자 경험을 지속적으로 향상하기로 했습니다. 2. 사용자 피드백 수집 과..

모든 팀 프로젝트 폴더를 날려버렸다, 내가... 지난 팀 프로젝트 중, 정말 아찔한 실수가 있었다. GA 설정 작업을 위해 팀원들과 모여 작업을 진행하고 있었고, 모든 세팅을 마친 후 AWS S3에 배포하려고 했다. 배포를 위해 우리는 프로젝트 폴더인 'bang-ggood' 안으로 들어갔다고 생각했다.배포 시 종종 기존 파일이 덮어씌워지는 문제 때문에, 나는 늘 하던 대로 기존 파일들을 모두 삭제한 후 새 파일을 업로드하는 방식으로 진행했다. 그날도 다르지 않았다. 우리 프로젝트 폴더 안의 파일을 모두 선택하고 삭제를 진행했다. 아니 진행한 줄 알았다. 폴더에 잘 들어간 줄 알았다.순간적인 착오로 우리는 'bang-ggood' 폴더가 아닌 S3 버킷 내부 폴더 전체, 즉 모든 팀의 프로젝트 폴더를 삭제해..

우리가 기획하고 있는 서비스는 처음 방을 구하거나, 방을 많이 구해본 경험이 없는 사용자들이 방을 구할 때 꼼꼼하게 체크하여 더 좋은 방을 찾을 수 있도록 돕는 서비스이다.자세한 이야기는 기획 단계에 대해 작성한 글을 참고하자! 그러다 보니 우리 서비스의 목적은 “사용자가 우리 서비스를 통해 이전보다 더 꼼꼼하게 방을 체크할 수 있고, 이를 통해 더 좋은 방을 선택할 수 있다”는 것이다. 이 목표를 위해 지난 스프린트 기간 동안 기획과 기능 구현을 진행했고, MVP 기능이 모두 구현된 후에는 팀과 함께 직접 사용자가 되어 유저 테스트를 진행하기로 했다.부동산과 방을 함께 보는 유저가 페르소나였기 때문에, 팀원들을 두 팀으로 나누어 각자의 페르소나를 설정하고 부동산에 들러 집을 보기로 했다.팀을 구상한 과..

지치지 않고 협업하는 법팀 프로젝트는 `팀플빌런`, `무임승차`과 같은 말이 나올 정도로 여러 갈등과 고난을 겪는 경우가 많다. 사람과의 협업은 필수적이지만, 팀플은 왜 이렇게 어려운 걸까? 팀플을 하면 생각보다 지치기 쉽고, 갈등이나 어려움에 빠지는 경우가 많기 때문이다.나는 이번 우테코 팀플을 준비하면서 이전과는 다른 지치지 않는 팀플을 꿈꿔왔다.그렇다면, 어떻게 해야 지치지 않고 좋은 협업을 할 수 있을까?같이 소통하고 동일하게 이해하기협업은 다양한 사람들과의 소통이 핵심이다. 서로 다른 생각을 가진 팀원들이 모이다 보니 의견이 다를 때가 많지만, 이를 조율하는 과정에서 팀워크가 강화된다고 믿는다. 이전 팀플에서의 경험을 토대로, 이번 팀플을 시작할 때는 모든 팀원이 동일한 이해를 바탕으로 작업을 ..

** 이 글은 레벨 3 시작 2주차 진행 과정 중 작성한 글입니다. 유저 플로우 설계, 왜 중요할까?프로젝트를 시작하면서 가장 먼저 했던 일은 MVP(최소 기능 제품)를 정의하는 것이었어요. 그다음으로 중요한 건 유저 플로우를 정리하는 것이었죠.유저 플로우는 간단히 말해, 우리 서비스를 어떻게 사용할지에 대한 유저 시나리오라고 생각합니다. 이 과정은 개발자의 시선이 아닌, 유저의 시선에서 서비스를 바라볼 수 있도록 도와줍니다. 결국, 유저들이 어떤 흐름으로 서비스를 이용할지 미리 그려보는 작업이죠. 기존 여러 프로젝트를 진행하면서 기획자들이 이 페르소나를 가장 먼저 설정하고 생각하는 걸 보고 배운 후 적용해보고 있어요. 서비스를 기획하는 과정은 꽤나 흥미로운거 같습니다.가상 유저, 페르소나 설정우리 팀은..

** 이 글은 레벨 3 시작 2주차 진행 과정 중 작성한 글입니다. 프로젝트를 시작하기 앞서 주어진 요구사항에 맞게 기본 프로젝트를 세팅해야 했다.진행해야 하는 것은 다음과 같았다. 프로젝트 환경 세팅개발 컨벤션 정하기스타일링 방법 선택 등 사용할 기술 스택 정하기타겟 환경 정하기 프로젝트 환경 세팅가장 먼저, 프로젝트 환경 세팅에서는 기존에 Vite나 CRA를 주로 사용했던 것과 달리, 이번에는 Webpack을 기반으로 React와 TypeScript 환경을 세팅하기로 결정했다. Webpack은 자바스크립트 모듈을 번들링 하는 도구로, 다양한 로더와 플러그인을 사용해 코드 최적화와 빌드 환경을 구성할 수 있다. webpack을 선택한 이유는, 물론 요구사항이기도 했지만, Webpack이 모듈 번들러로서..

디자인을 처음 접하는 개발자들에게 이 글을 바칩니다. 근데 사실 본인도 디자이너는 아니고 그냥 UI/UX에 관심 있는 개발자이기 때문에 디자인 처음하는 개발자만 보시길~ ❌ 디자이너들은 출입금지입니다… ❌   이 글은 개발자인 우리가 울며 겨자 먹기로 디자인을 해야 할 때 도움이 될 만한 팁들로 채워져 있습니다. 아마 읽고 있는 당신도 디자이너 없이 프로젝트를 시작해서 개발자인데도 디자인을 해야 하는 상황일 겁니다.디자인에 대해 아무것도 모르지만, 이 가이드를 따라 하면  야 너두 디자인할 수 있어…~~~!  🍀  먼저 프로젝트 디자인을 진행하는 일반적인 과정은 다음과 같습니다. 1. IA(정보 구조) 작성하기2. 레퍼런스 찾기3. 와이어프레임 작성하기4. 디자인 시스템 설정하기5. GUI(그래픽 사용..