조은서 (Eunseo Jo)

💌 Contacts.

👋 Introduce.

사용자 중심 설계로 최적의 사용자 경험 제공을 목표로 합니다.

댄서와 수강생 매칭 플랫폼을 기획하는 과정에서 예상 유저를 대상으로 구글폼 설문조사를 진행하였습니다. 이 결과를 바탕으로 사용자의 필요와 선호에 부합하는 사용자 중심 설계로 기능들을 기획하였습니다.
사용자에게 최적의 경험을 제공하기 위해 웹 성능 최적화에 관심을 갖고 있습니다. Dynamic Import와 Lazy Loading을 활용하여 필요한 리소스만을 필요한 시점에 로드함으로써 초기 로딩 시간을 단축시키고, 캐싱 전략을 통해 재방문 시 더욱 빠른 접속을 가능하게 하였습니다. 이러한 최적화 작업으로 LCP(Large Contentful Paint)와 TBT(Total Blocking Time) 등의 주요 웹 성능 지표를 개선하여 UX를 향상시켰습니다.

혼자보단 같이 서비스에 대해 고민하며 서비스를 만들어 가고 있습니다.

디자이너와의 협업 과정에서 버튼의 패딩 값이 같은 미세하게 다른 부분과 같은 일관성 없는 디자인 요소들이 발견되었습니다. 컴포넌트의 재사용성과 사용자 경험의 일관성을 위해 디자인 시스템의 도입과 Storybook을 사용하여 일관된 디자인 요소를 관리하고 디자이너와 효율적인 협업을 하였습니다.
코드 리뷰 과정을 통해 단순한 오류 수정을 넘어서 서로의 생각과 접근 방식을 공유하며 함께 성장하고 있습니다. 팀원들이 이해할 수 있는 명확하고 간결한 코드 작성을 위해 지속적으로 노력하고 있으며 서로의 코드를 더 잘 이해할 수 있어 효율적인 협업을 하였습니다.

🚀 Projects.

Connection

댄서와 수강생을 매칭 서비스

FE 2인, BE 2인, 디자이너 1인

(23.09 - 개발 중)

🔗 개발 서버🔗 레포지토리🔗 개발 과정

NextJS(App)

Typescript

React-Query

Tailwind CSS

Zustand

Storybook

Github Actions

프로젝트 목적

수강생들에게 다양한 댄스 수업 선택지를, 강사들에게 편리한 수업 예약 및 관리 서비스를 제공하여 댄스 수업 정보의 불균형 해소 및 수요와 공급 사이의 연결성 강화

API 요청 분리 및 병렬 처리를 통한 시간 단축

  • 클래스 상세페이지에서 많은 데이터를 한 번에 받아오면서 사용자 인터랙션 적용까지의 오랜 시간 소요
  • 하나의 API 요청을 클래스 기본 정보, 상세정보(커리큘럼), 스케쥴로 나누어 Promise.all 을 이용하여 요청 시간 단축
  • 데이터 로딩 동안 Suspense를 적용하여 로딩 UI 렌더링
  • API 요청 시간 50~70% 감소 및 TBT가 840ms에서 80ms로 개선

Http-Only 쿠키를 이용한 토큰 관리로 보안성 강화

  • 사용자의 로그인 과정 편의성을 위해 소셜 로그인(카카오,구글) 도입
  • 사용자 인증 후 발급된 토큰을 Route Handlers를 통해 Http-Only 쿠키에 저장
  • 클라이언트 사이드 스크립트를 통한 토큰 접근 차단 및 보안성 강화

번들 크기 최적화를 통한 성능 개선

  • 번들 크기 증가로 인한 로딩 시간 증가 문제 발생
  • Dynamic Import, Tree-Shaking를 활용한 번들 크기 최적화
  • 기존 대비 번들 크기 약 30% 감소 및 로딩 시간 단축

Github Actions CI/CD 구축 및 속도 최적화

  • 브랜치 보호를 위해 빌드 테스트 진행 및 스토리북 배포를 위한 CI/CD 구축
  • 프로젝트 규모 증가에 따른 빌드 시간 증가 (약 7분)
  • 패키지 설치와 도커 이미지 캐싱을 활용하여 빌드 시간 단축 (약 2분)

Storybook을 활용한 컴포넌트 문서화 및 UI 리뷰 간편화

  • 디자인 시스템 구축과 디자이너와의 효율적인 협업을 위한 스토리북 도입
  • 총 34개의 공통 컴포넌트를 추상화하고 개발 및 문서화하여 원활한 협업과 효율적인 작업 진행
  • 독립된 컴포넌트 UI 테스팅을 통해 디자이너의 변경사항이나 요구사항을 신속하게 반영
  • Github Actions와 연동하여 Github Pages에 자동 배포 구축

Connection-Health

개인 맞춤형 AI 건강 관리 어시스턴트

(Prompt-er Day Seoul 2023예선 진출작)

FE 2인, BE 1인, 디자이너 1인

23.08~23.09

🔗 배포서버🔗 레포지토리🔗 개발 과정

React

Typescript

Styled Component

Axios

Vite

프로젝트 목적

사용자가 보유한 질병, 알레르기 정보와 음식 및 의약품 성분을 GPT 프롬프터를 활용하여 개인 맞춤형 건강 관리 서비스를 제공하여 사용자들의 삶의 질 향상

동적 로딩 최적화를 통한 UX 개선

  • API 응답 시간의 불규칙성(15초~최대 2분)으로 인한 로딩 퍼센테이지를 실제 진행 상태에 맞춰 증가시키기 어려운 문제 인식
  • 데이터 수신이 완료될 때까지 로딩 바가 랜덤한 시점과 시간 동안 멈추었다가 수신 완료 시에는 즉시 로딩 퍼센테이지를 100%로 증가시키는 로직을 구현
  • 자연스러운 로딩 과정으로 사용자가 로딩 시간을 짧게 느끼게 하여 사용자 경험 개선

키워드 기반 검색으로 UX 향상

  • 사용자가 찾고자 하는 질병을 빠르게 식별할 수 있도록 사용자가 입력한 키워드를 포함하는 목록 필터링 및 키워드와 일치하는 부분의 색상 변경
  • 질병 목록이 약 460개로 데이터 셋의 크기가 비교적 작고 데이터가 변경되지 않으므로 Trie나 트리 대신 JS의 내장 기능인 includes와 정규 표현식 사용하여 구현

Notion Cloning

VanillaJS를 이용하여 노션과 유사한 온라인 에디터

개인 프로젝트

23.07

🔗 배포서버🔗 레포지토리

JavaScript

CSS3

프로젝트 목적

프레임워크나 라이브러리에 의존하지 않고 Vanilla JS를 사용함으로써 JavaScript의 기본적인 동작 방식 및 원리 이해

MVC 패턴 기반의 설계 및 개발

  • MVVM 패턴과 같은 다른 패턴들을 고려하였지만 단방향성과 데이터 바인딩을 고려하여 MVC 패턴이 가장 적절하다고 판단
  • Model(DocumentStore, SidebarStore), View(Sidebar, Document), Controller(App)로 역할 및 책임 분리
  • MVC 패턴 설계로 코드의 구조화 및 확장성 향상

입력 처리 성능 향상을 위한 debounce 활용

  • 매 사용자 입력마다 서버에 해당 내용을 전송 시 서버 과부하 우려
  • 문서 편집 시 사용자 입력 발생할 때마다 처리하지 않고 사용자가 일정 시간 동안 입력을 멈추면 이벤트 처리
  • debounce를 활용하여 입력 처리 성능 향상 및 서버 과부하 문제 완화

이벤트 위임을 활용한 이벤트 처리

  • UI 요소 간의 복잡한 상호작용 관리를 위한 이벤트 위임 사용
  • 사이드 바에서 하위 문서 목록 처리, 검색 결과 목록 렌더링, 텍스트 옵션 처리에 이벤트 위임 활용
  • 독립적인 이벤트 처리 로직을 각 요소(리스트)에 작성하는 대신 상위 요소에만 이벤트를 할당하여 코드를 간소화하고 유지 보수성 향상

🌱 Experience.

🏫 Education.