미리보기

Collaboration

• 디자이너와의 원활한 소통을 통해 프로젝트 요구사항을 명확히 파악

  • 디자인 툴(Figma, Sketch 등)을 활용한 디자인 시안 검토 및 피드백 제공

  • 정기적인 회의를 통해 디자인과 개발 간의 간극을 최소화하여 효율적인 작업 진행

  • 디자이너와의 협업을 통해 사용자 경험을 최적화하고, 최종 제품의 품질을 높임

• 협업 과정에서 As-is, To-be와 같은 커뮤니케이션 룰을 도입하여 효율성 증대

  • 현재 상태(As-is)와 목표 상태(To-be)를 명확히 정의하여 팀원 간 명확한 이해 도모

  • 문서화 및 시각화를 통해 복잡한 요구사항을 체계적으로 관리

  • 리뷰 과정에서 명확한 기준을 제공하여 피드백의 질 향상 및 개발 속도 증가

Frontend

• Next.js를 이용하여 서버 사이드 렌더링 및 정적 사이트 생성 구현

• TailwindCSS를 활용하여 효율적으로 웹 페이지 퍼블리싱

• 프로젝트의 요구사항에 맞춰 적절한 외부 라이브러리 사용하여 개발 생산성 향상

• 디자이너와의 협업을 통해 디자인 시안을 검토하고 이를 코드로 구현

Backend

• NestJS를 사용한 RESTful API 개발

• Supabase와 PostgreSQL을 이용한 데이터베이스 관리

• Prisma ORM을 활용한 데이터베이스 연동 및 관리

demo url | github | notion

사용 기술

• TS, Vite, React, React Context API, React Query, Tailwind CSS, Firebase, Amazon S3, Amazon
  Cloud Front, Github Actions, Cypress

debounce 기법을 이용한 불필요한 함수 호출 해결

• 문제 상황

  • 모든 사용자들 중 특정 사용자를 검색할 수 있도록 검색 기능 구현

  • 사용자가 검색창에 입력할 때마다 onChange 호출

  • onChange가 호출될 때마다 사용자 리스트에 불필요한 filter 연산 수행

• 해결 방안 고민

  • 매 입력마다 함수가 호출되는 것을 방지

  • 사용자의 입력이 끝나면 filter 연산 실시

• 해결책

  • lodash 라이브러리의 debounce 사용

  • debounce는 특정 함수 호출 시 지정한 시간이 지나면 함수 실행

  • 사용자가 입력을 마쳤다고 예상되는 시간을 설정

  • 입력 시 호출되는 set함수의 호출 횟수를 효과적으로 개선

react-image-file-resizer 를 이용한 이미지 최적화 및 렌더링 속도 문제

→ 이미지를 최적화하여 렌더링 속도를 개선합니다.(2.4s -> 1.5s)

• 문제 상황

  • 게시물 썸네일 이미지를 업로드하고 이를 불러오는 과정에서 이미지 크기가 큰 경우 속도 렌더링 속도 저하

• 해결 방안 고민

  • 이미지 압축 툴 사용하기

  • 파일 형식 변환하기

• 해결/개선

  • react-image-file-resizer는 클라이언트 측에서 이미지를 최적화하고 서버로 전송하기 때문에 네트워크 트래픽 절약

  • 유연한 사용으로 이미지의 너비, 높이, 출력 형식, 품질 등 직접 설정 가능

  • 프로젝트에 적용하여 이미지를 최적화하여 렌더링 속도 개선(2.4s -> 1.5s)

demo url | notion

사용 기술

• React, Next.js, Django, tensorflow, nivoChart

서버와 클라이언트 환경의 CORS 및 Proxy 문제 해결

• 문제 상황

  • 배포환경에서의 서버와 API 통신 테스트 중 CORS error 발생

  • 비정상적인 동작으로 원하는 응답을 받을 수 없음

• 해결 방안 고민

  • 해당 문제는 Javascript의 보안상의 제한으로 발생

  • XMLHttpRequest, Fetch API 요청은 Same-Origin으로 기본적으로 제한

• 해결/개선

  • 서버(Django) 측에서 배포한 도메인의 요청을 허용

  • ALLOWED_HOSTS에 배포 도메인을 추가

차트 라이브러리를 활용한 시각적 데이터 제공

• 요구사항

  • 많은 양의 데이터를 사용자에게 가시적인 인터페이스로 제공

• 해결 방안 고민

  • chart.js를 이용하여 데이터 시각화

  • nivo를 이용하면 공식 사이트에서 사전에 커스터 마이징 가능

• 해결/개선

  • nivo를 이용하여 데이터 시각화를 편리하게 구현

  • 문자형 데이터를 가시적으로 사용자에게 제공

github | notion

사용 기술

• React, etri API, TS, HTML/CSS, AWS S3, Github Actions

내장 녹음 라이브러리와 wavEncoder 라이브러리를 이용한 사용자 녹음 파일 encoding

• 문제 상황

  • 기존 방법은 녹음 파일을 서비스에 사용자가 직접 업로드하는 방식

  • 사용자 사용성 측면에서 발음을 실시간으로 녹음하고 피드백을 전달해야 한다고 판단

• 해결 방안 고민

  • API 또는 라이브러리를 이용하여 실시간으로 녹음하고 서버로 전송

  • 버전 충돌 없이 npm 패키지로 사용 가능한 wavEncoder와 내장 녹음 라이브러리를 채택

• 구현

  • wavEncoder로 사용자가 실시간으로 녹음한 파일을 encoding 한 후 서버로 전달하도록 구현

SpeechSynthesisUtterance를 통한 사용자의 발음 예제의 TTS 기능 제공

• 문제 상황

  • 한글을 모르는 외국인 사용자를 고려

  • 평가 예제는 한글로 제공되어 외국인 사용자의 사용성 측면에서 실용적이지 못함

• 해결 방안 고민

  • 여러 국가의 발음 기호 삽입은 비효율적

  • 발음 소리를 추가로 제공한다면 많은 외국어 발음 기호를 해결할 수 있음

• 해결/개선

  • SpeechSynthesisUtterance 라이브러리를 이용

  • 사용자에게 평가 예제의 정확한 발음을 음성으로 제공 (TTS)

프로젝트 주제

• 치매 노인을 위한 알약 디스펜서 애플리케이션

프로젝트 개요

• PM, UI/UX 디자이너, 개발 (8인 협업 프로젝트)

• MVP(최소 기능 제품) 개발을 통해 시장 상품성을 검증하는 해커톤에 참여

• 보호자가 원격으로 하드웨어를 제어할 수 있는 웹 애플리케이션으로, 정기복용 및 비정기복용 관리, 알림 설정, 약 검색/등록 기능을 포함

주요 활동 및 성과

• 기술 스택

  • React.js, Zustand, Tanstack Query, Tailwind CSS

• 기능 구현

  • 약 검색 및 등록, 음성 알림 녹음 기능 개발

  • 음성 녹음 기능 구현 및 API 연동 작업 수행

• 협업

  • 프로젝트 매니저(PM), 디자이너, 백엔드 개발자와의 긴밀한 협업을 통해 요구사항을 명확히 이해하고, 사용자 경험을 향상시키는 데 기여

  • 팀원들과의 긴밀한 협업을 통해 기능의 완성도를 높이고, 최종 발표에서 긍정적인 피드백을 받음

• 외국인들의 한국어 발음 학습을 위한 음성 인식 웹 사이트(바름)를 개발하여 2023 하계학술대회에서 우수논문상 수여 🔗 논문링크

• 프론트엔드 개발자로 참가하여 디자인 담당 팀원과 백엔드(스마트 컨트랙트) 담당 팀원과의 원활한 의사소통에 기여
• 디자인 산출물을 고려하여 일관성 있는 웹 페이지를 개발하고 React.js를 이용한 비동기식 데이터 처리 및 SPA 개발에 집중
• Web 3.0의 블록체인 기술을 실제 프로젝트에서 사용한 경험
• 주어진 기한 내에 프로젝트를 데모까지 완료해야 하는 상황(Dead Line)을 이해하고 경험할 수 있는 기회