채용공고 올리기

이우성님을 응원해보세요!

지금 만족하고 있어요
성실함
협업 지향
꼼꼼함
커뮤니케이션
문제 해결사

미리보기

기본 정보

이름
이우성
직업
소통과 구현을 통해 최선의 선택을 찾아가는 프론트엔드 개발자
이메일
useong1996@gmail.com
간단 소개

"PoC 구현을 통해 최선의 선택을 찾아가고자 합니다." 문제 해결을 위해 다양한 상황들을 PoC(Proof of Concept) 형태로 직접 구현해보며 최선의 해결책을 찾고자 노력합니다. 구현을 통해 다양한 케이스의 동작 과정과 적용 기술의 원리에 대해 이해도를 높이고, 이를 기반으로 여러 케이스들을 비교 분석하며 현재 상황에 가장 적합한 해결책이 무엇일지에 대해 고민합니다. "자동화 및 적극적인 의사소통 환경을 추구합니다." 이에 더해 효율적인 환경 구축과 함께 해결하는 자세를 지향합니다. GitHub Actions와 Husky를 이용한 자동화 환경 구축과 같이 효율적인 업무 환경을 구축하길 지향하고, 프론트엔드라는 직군에 얽매이지 않고 문제가 있다면 적극적으로 소통하며 함께 문제를 해결하고자 합니다.

자기소개

자기소개

주식회사 더블유쓰리컴퍼니 자기소개서


"소통과 구현을 통해 최선의 선택을 찾아가는 프론트엔드 개발자"

문제 해결을 위해 다양한 상황들을 PoC(Proof of Concept) 형태로 직접 구현해보며 최선의 해결책을 찾고자 노력합니다. 구현을 통해 다양한 케이스의 동작 과정과 적용 기술의 원리에 대해 이해도를 높이고, 이를 기반으로 여러 케이스들을 비교 분석하며 현재 상황에 가장 적합한 해결책이 무엇일지에 대해 고민합니다.

이에 더해 효율적인 환경 구축과 함께 해결하는 자세를 지향합니다. GitHub Actions와 Husky를 이용한 자동화 환경 구축과 같이 효율적인 업무 환경을 구축하길 지향하고, 프론트엔드라는 직군에 얽매이지 않고 문제가 있다면 적극적으로 소통하며 함께 문제를 해결하고자 합니다.


지원동기 및 입사 후 포부.


"World Wide Web 기술을 통해 더블유쓰리 컴퍼니의 가치를 전 세계로 연결하겠습니다."

Moji 서비스는 단순한 언어교환을 넘어 글로벌 커뮤니티를 형성하고, 문화적 장벽을 허무는 역할을 합니다. 저는 웹 기술을 통해 더 많은 사람들이 원활히 소통하고 연결될 수 있도록 기여해 보고자 이번 기회에 지워하게 되었습니다.

프론트엔드 개발자로서 다양한 직군과 협업하며, 단순한 UI 구현을 넘어 사용자 경험을 깊이 이해하고 서비스의 완성도를 높이는 데 집중해 왔습니다. 특히, Zustand와 WebSocket API를 활용한 실시간 채팅 기능 개발 과정에서 UI/UX 요소의 일관성을 유지하는 동시에, 사용자의 몰입도를 높이는 데 주력했습니다. 이 과정에서 코드 모듈화 및 Custom Hook을 활용한 관심사 분리를 적용하여 유지보수성을 높였고, 백엔드와의 협업 효율도 개선할 수 있었습니다.
또한, Next.js 기반 인증 시스템을 개발하면서 기존 API의 제약을 해결하기 위해 BFF(Backend for Frontend) 방식을 도입하였고, 이를 통해 API 수정 없이도 보안성과 SSR 환경을 유지하는 최적의 해결책을 마련할 수 있었습니다.

이러한 경험들을 바탕으로, Moji 서비스가 추구하는 원활한 소통과 글로벌 연결을 기술적으로 뒷받침하는 데 기여하고 싶습니다. 단순한 기능 구현을 넘어 실시간 커뮤니케이션 환경을 더욱 효율적으로 개선하고, 사용자 간의 원활한 상호작용을 돕는 최적의 솔루션을 고민하는 개발자로 성장해 나가겠습니다.

입사 후엔 단순한 유지보수가 아닌 새로운 기능 개발과 최적화를 지속적으로 시도하는 경험을 할 수 있을 것으로 기대됩니다. 글로벌 사용자들이 실시간으로 소통하는 서비스 특성상 성능 최적화와 안정성이 요구되는 만큼, 다양한 기술적 도전을 통한 최선의 솔루션 적용 및 글로벌 사용자들에게 최적의 사용자 경험 제공을 위해 고민하며 전 세계를 하나로 잇는 더블유쓰리컴퍼니의 글로벌 서비스 확장에 기여하고자 합니다.

관련 경험 1.


"직군의 벽을 허물고, 완성도를 높이다"

프론트엔드 개발자는 단순한 UI 구현을 넘어 다양한 직군을 연결하며 사용자 경험을 최적화하는 다리라고 생각합니다. 저는 프로젝트에서 팀 전체가 사용자 경험을 최우선으로 바라볼 수 있도록 소통을 이끌며 협업 역량을 강화해왔습니다.

Mo or Do 프로젝트를 통해 React 환경에서 Zustand와 WebSocket API 기반 실시간 채팅을 개발하였습니다. 직접 디자인에 참여하며 대기방과 게임 중 채팅 UI/UX를 통일시키고, 게임 환경을 고려한 배경 투명화 및 resize 기능을 제안하여 사용자의 게임 몰입도 향상에 기여하였습니다.

또한 API 문서 작성에 참여하며 백엔드와의 소통 역량을 높이고, 실시간 기능 테스트 과정에서 코드 모듈화 및
Custom Hook을 활용한 관심사 분리를 통해 의사소통 효율을 높였습니다. 이로 인해 확인 및 변경해야 할 코드량을 50% 이상 줄여 프로젝트를 효율적으로 진행하였습니다.

관련 경험 2.


"맨땅에 헤딩: 될 때까지 구현해보고 될 때까지 물어보며 인증 시스템 개발하기"

교육기관에서 제공된 API를 이용해 NextJS 기반 인증 시스템 개발을 담당한 경험이 있습니다. 제공된 로그인 API는 토큰을 response body로만 전달해 서버 사이드 렌더링(SSR)을 활용할 수 없는 문제가 있었습니다. API 수정 요청은 다른 팀의 개발 일정 지연과 보안상 이유로 거절되었고 NextJS 경험이 부족한 저로서 이런 환경에서 인증 시스템을 개발하는 것은 큰 도전으로 다가왔습니다.

이 난관을 극복하기 위해 공식 문서, 깃헙 이슈 및 블로그를 통해 해결 방안을 탐색했고, 각 방법을 PoC(Proof of Concept) 형태로 구현하며 페이지 접근 제한과 서버에서의 토큰 관리에 대한 다양한 접근법들의 실효성을 검토했습니다. 또한, 노션을 이용해 멘토님과 팀원들에게 진행 상황마다 피드백을 요청했고 이를 통해 견고한 논리를 쌓아가며 문제 해결 방향을 조정했습니다.

여러 시행착오 끝에 Next.js의 Route Handler와 미들웨어를 활용한 BFF(Backend for Frontend) 방식을 도입하여, API 변경 없이도 SSR의 장점을 유지하면서 보안성까지 강화하는 쾌거를 이룰 수 있었습니다.

프로젝트

프로젝트명

같이 달램

소속/기관명

코드잇

프로젝트 기간

2025.01. ~ 2025.02.

프로젝트 내용

:: 프로젝트 소개

휴식을 위한 다양한 모임 개설 및 참여 서비스


:: 프로젝트 환경

- 프로젝트 기간: 25.01.02 - 25.02.13 (6주)

- 프로젝트 인원: FE 4명

- FE 개발 환경: NextJS 14+, React 18+, TypeScript, Tailwind, React-Query v5, Zustand

- URLs: Deploy | Github | Refactoring


:: 프로젝트 개발 사항

"NextJS의 다양한 기술들을 적용해보면서, vercel을 이용한 배포까지 경험해볼 수 있었던 프로젝트입니다.

현재는 리팩토링을 진행하며 서비스 개선 중에 있습니다."

1. BFF 방식의 인증 시스템 구현 (링크)

  • 인증 관련 api의 보안 제약 사항을 극복하기 위해 middleware와 route-handler를 이용해 cookie 방식으로 토큰을 관리하도록 인증 방식 개선

2. react-hook-form과 zod를 이용해서 form 개발 개선하기

  • NextJS에서 동적인 크기의 캘린더 구현하기 (NextJS Client Component와 React Component의 랜더링 방식 차이 체감하기) (링크)

  • react-hook-form을 이용해 로그인, 모임 생성 모달 form 개발

  • validation 관심사 분리를 위한 zod 적용

3. 협업 환경에 자동화 시스템 도입 (링크)

  • husky & github actions를 이용해 기능 개발 브랜치 내용에 문제 없는 코드만 반영하기

  • github actions를 이용해 원격 develop, main 브랜치 보호 및 vercel 배포 자동화

4. 브랜치 전략 변경으로 개발 환경 개선하기 (링크)

  • base, feature 브랜치 전략 도입을 통해 리뷰할 코드양 60% 감소 및 기능 개발 PR 마다 발생하던 conflict 문제 해결

  • develop to main을 base to main으로 변경하여 배포 환경과 개발 버전 분리해서 main 브랜치에 테스트 되지 않은 코드가 유입되는 문제 개선

프로젝트명

Mo or do

소속/기관명

삼성 청년 소프트웨어 아카데미(SSAFY)

프로젝트 기간

2024.04. ~ 2024.06.

프로젝트 내용

:: 프로젝트 소개

실시간 소켓 통신을 활용한 3D 멀티 플레이 퀴즈 게임으로 친구와 함께 즐기면서 배우는 스피드 게임 학습 플랫폼입니다.


:: 프로젝트 환경

- 프로젝트 기간: 24.04.08 - 24.05.17 (6주)

- 프로젝트 인원: FE 3명, BE 3명 (6명)

- FE 개발 환경: NextJS 14, TypeScript, Tailwind, React 18, React-Query v5, Zustand

- URL: Github (교육 기관에서의 리소스 지원 중단으로 현재 배포 링크는 만료된 상태입니다.)


:: 프로젝트 개발 사항

"NextJS App router를 이용하여 페이지 개발을 해보고 React 환경에서 소켓 통신을 전담해서 작업해볼 수 있었던 프로젝트입니다."

1. ReactJS를 이용한 소켓 통신 구현
  • ReactJS의 hook, zustand, WebSocket API를 이용하여 소켓 통신 환경 구현

  • 게임 소켓 수신 로직 외 모든 소켓 작업 전담

2. 기타 개발 내용

  • 대기방 페이지 개발

  • 채팅 기능 개발

프로젝트명

꿈:틀

소속/기관명

삼성 청년 소프트웨어 아카데미(SSAFY)

프로젝트 기간

2024.01. ~ 2024.02.

프로젝트 내용

:: 프로젝트 소개

자신의 버킷 리스트를 공유하고, 나와 유사한 관심사를 가진 사용자들을 추천받으며 교류하는 SNS 서비스입니다.


:: 프로젝트 환경

- 프로젝트 기간: 24.1.03 - 24.02.16 (7주)

- 프로젝트 인원: FE 2명, BE 4명 (6명)

- FE 개발 환경: React 18, React-Query, TypeScript, Tailwind, Zustand

- URL: Github (교육 기관에서의 리소스 지원 중단으로 현재 배포 링크는 만료된 상태입니다.)


:: 프로젝트 개발 사항

"사용자 관점에서 프로젝트를 개선점을 고민해보며 다양한 기술 스택을 도입해볼 수 있었던 프로젝트입니다."

1. UX 경험 향상을 고려한 개발 진행

  • 버킷리스트 생성 및 수정에 대한 퍼널 페이지 구현을 위해 react-router-dom의 Outlet을 활용해 페이지 분할 기능을 적용 및 state 방식으로 추가 개선 적용 (링크)
    버킷 리스트 생성 시 FileReader를 이용하여 이미지 미리보기 기능을 제공
    버킷리스트의 달성을 결정하는 달성 페이지에서 Web Animations API를 이용해 CSS in JS 방식에 비해 랜더링 효율 90% 개선 및 부드러운 애니메이션 경험 제공 (링크)

2. 기타 개발 내용

  • React-query를 활용해 프로젝트 내 무한 스크롤 적용
    버킷리스트 달성 상세 페이지 및 댓글 기능 구현
    버킷리스트 후기 작성을 위한 React-Quill 에디터 적용

프로젝트명

FasTravel

소속/기관명

삼성 청년 소프트웨어 아카데미(SSAFY)

프로젝트 기간

2024.02. ~ 2024.04.

프로젝트 내용

:: 프로젝트 소개

여행 후기 블로그들의 URL을 기반으로 주변 지역 맞춤 유사한 여행지를 추천해주고 여행 계획 작성을 도와주는 서비스입니다.


:: 프로젝트 환경

- 프로젝트 기간: 23.02.19 - 24.04.05 (7주)

- 프로젝트 인원: FE 3명, BE 3명 (6명)

- FE 개발 환경: Vite, TypeScript, Tailwind, React 18, React-Query v5, Zustand

- URL: Github (교육 기관에서의 리소스 지원 중단으로 현재 배포 링크는 만료된 상태입니다.)


:: 프로젝트 개발 사항

"FE 팀의 리더를 맡으며 팀 리딩에 있어 많은 노력을 기울였던 프로젝트입니다."

1. 여러 api 동시 호출 시 waterfall을 막기위해 useQueries 활용하기

  • 설문조사 페이지 내에서 각 분야별 장소 정보를 한번에 표시하기 위해 react-query의 useQueries 활용을 통해 API 응답 시간 1초 대로 개선 (링크)

2. 기타 개발 내용

  • OAuth 인증 방식을 사용한 카카오, 구글 로그인 구현

  • Vite 환경에서 PWA 적용

  • 로그인 페이지, 검색 페이지 및 여행 생성 페이지 개발

포트폴리오

URL

link

Github - leewooseong

깃허브

기술 스택

기술 스택

Next.js, React, react-query, zustand, TypeScript, JavaScript, HTML/CSS, TailwindCSS, Git, GitHub, Jest, react-testing-library, Framer

자격증

자격증명

OPIc

점수 | 발급기관

IM1 | 미국 외국어교육위원회(ACTFL)

취득연월

2025.03.

자격증명

SQLD

점수 | 발급기관

pass | 한국데이터산업진흥원(KDI)

취득연월

2024.12.

교육

소속/기관명

코드잇

종류 | 전공

사설 교육 | 컴퓨터공학과

재학 기간 | 재학 상태

2024.12. ~ 2025.02. | 수료

소속/기관명

삼성청년소프트웨어아카데미(SSAFY)

종류 | 전공

사설 교육 | 컴퓨터공학과

재학 기간 | 재학 상태

2023.07. ~ 2024.06. | 수료

소속/기관명

금오공과대학교

종류 | 전공

대학교(학사) | 컴퓨터공학과

재학 기간 | 재학 상태

2015.03. ~ 2022.02. | 졸업

댓글