안녕하세요!
개발자 원아영입니다.
한땀한땀,
아름다운 디자인을
화면으로 구현하는 것을 좋아하고,
직면한 문제를 풀어나가는 것에 개발의
재미를 느끼고 있습니다.
Personal Info
- Email. wayinwayne@gmail.com
- Phone. 010-2874-4750
Contact
- Github. https://github.com/AyoungWon
- Blog. https://ayoungwon.github.io
Channel
Skills
Frontend :
- React
- Typescript
- Next
- React-query
- React Native
- Zustand
- Redux
- CSS-in-JS
Backend :
- NestJS
- NodeJS
- Typeorm
- PostgreSQL
- AWS-S3
Introduce
현재 아트 커머스 스타트업에서 주로 웹/앱 프론트를 맡고 있으며, 일부 백엔드 개발도 겸하고 있습니다. 프로젝트의 설계부터 함께 참여하여, 조금씩 발전해나가는 프로덕트에 애정과 즐거움을 느끼고 있습니다.
디자인과 기술을 포함하여 급변하는 프론트엔드 개발 측면에서, 변경 요구 사항에 신속하게 대응하고 유지 보수성을 향상시키기 위한 최선의 아키텍처와 구조란 무엇인지 고민하고 있습니다. 또한 최근에는 동료들과의 협업을 위해 개발자 경험(DX)에도 많은 관심을 가지고 있습니다.
사용자의 서비스 이용 경험의 개선과 그에 기반한 프로덕트의 성장과 매출 향상에 기여하기 위해 꾸준히 노력하고 있습니다.
업무 시간 외에도 개발자로 성장하기 위해 꾸준히 노력해왔습니다. 개발자 개인의 성장이 회사에 기여할수 있다는 것을 경험을 한 뒤, 스터디 참여와 사이드 프로젝트를 진행하고 있으며, 개발 교육에도 지속적으로 참여하고 있습니다.
Experience
프로젝트의 전체 기술 스택이 아닌 본인 사용 기술 스택만 작성하였습니다.
아비투스어소시에이트
2022년에 설립된 아트테크 스타트업으로, 예술가들과 미술 애호가들을 연결하고, 전통적인 미술 시장을 디지털화하여 더 많은 사람들이 예술에 쉽게 접근할 수 있도록 하고자 합니다. 소프트뱅크와 500글로벌에서 52억원 시드 투자를 유치하여 글로벌 서비스 확장을 추진하고 있습니다.
Artue
2023.04 ~ 현재
Description
글로벌 온라인 아트 플랫폼으로 디지털 기술을 통해 예술 작품의 거래를 간편하게 만들고, 미술 작품을 실제 오프라인에서 체험하듯 온라인 공간에서 재현하여 더 많은 사람들이 예술에 접근할 수 있도록 돕습니다. 이를 통해 예술가들에게 글로벌 시장에서 작품을 선보일 기회를 제공합니다.
- Artue.io의 초기 설정 및 커머스 상품, 결제, 전시, 인터랙션 UI를 포함한 프론트엔드 개발, 리딩 및 유지보수, 백엔드 일부 서비스 개발
- SSR 및 오픈그래프를 활용한 동적 메타 정보 적용으로 상품 및 아티스트별 미리보기 구현하여, 공유하기를 통한 유저 유입률 직전 월 대비 92% 증가
- 성능 최적화를 위한 리팩토링을 통해 빌드와 초기 로드에 대한 사이즈 약 40% 감소
- 글로벌 유저를 위한 다국어 및 다중 통화 지원, 결제 서비스 도입으로 결제 건수 증가
- 이미지 및 비디오 로드 최적화로 로딩 시간 최대 1/3 감소
- 스켈레톤 UI 적용을 통한 사용자 경험 향상
- React Query 도입을 통한 API 캐싱 최적화
- 회원가입과 로그인, 사용자 인증을 위한 토큰 기반 서비스에 대한 UI 및 서버 API 구현
- Exhibition 및 About 페이지의 인터랙티브 UI 개발 및 react-spring을 사용하여 애니메이션 성능 최적화
- cypress를 활용해 주요 로직에 대한 테스트 코드 작성으로 디버깅 및 테스팅 시간 감소
- API 응답 데이터와 데이터를 활용한 뷰 상태 분리로 코드 유지보수성 개선
- Twilio, Mailchimp 이용해 회원가입 및 구매 등 알림 시스템 구현
- 사이트맵 작성 및 SEO 최적화 작업을 통해 검색 엔진 효율성 및 검색 순위 향상 도모
- 일관된 입력 처리 및 에러 핸들링을 위해 react-hook-form을 도입하고 에러 메시지 관리를 위한 공통화 코드 및 문서 개발
- AWS S3에 파일 업로드를 위한 인터셉트 데코레이터 개발, 파일에 대한 검증 및 규칙 통합
- 사용자 인증을 위한 토큰 기반 로직 전략 및 interceptor 구현
- 코드리뷰 문화를 위한 PR 및 브랜치 작성 규칙 문서화
- 네이버페이 결제 프론트 연동 및 보안 검수 진행 및 관리
Works
- React, Next, Typescript, React Query, Zustand, Emotion, react-hook-form
- NestJS, Typeorm, PostgresQL, AWS S3
Skills
viewee.ai
(2021.04 ~ 2023.04, 아비투스어소시에이트에 인수)
AI와 블록체인을 통한 새로운 가치를 추구하는 스타트업입니다. 유저의 참여를 통해 쌓인 데이터를 분석하여 유의미한 정보를 창출해 클라이언트에게 제공하고, 참여한 유저들에게 블록체인을 통해 보상하여 모두에게 이익이 되는 서비스를 제공하고자 합니다.
Earntube
2022.08 ~ 2023.04
Description
Earntube는 유저 참여형 앱 서비스로, 유튜브와 연동되어 영상을 시청하면서 토큰을 획득할 수 있는 플랫폼입니다. Web3 요소를 통합하여 사용자의 관심과 참여에 보상하며, Play to Earn 개념을 도입했습니다. 정식 서비스 오픈 전 pre등록 기간 약 10만명의 유저 가입자 수를 달성하였습니다.
- React Native를 사용하여 앱내 뷰 및 컴포넌트 개발
- 사용자들이 아이템을 구매하고 판매할 수 있는 UI 및 로직을 구현
- SVG를 활용한 커스텀 버튼 컴포넌트 개발, 아날로그 게임 형식 버튼 스타일을 유지하며 재사용 가능한 컴포넌트 구축
- 다양한 입력 양식을 지원하는 공통 인풋 컴포넌트 제작
- 메세지 기반의 웹뷰 콘텐츠 업데이트 및 데이터 송수신 처리
- 사용자 회원가입 화면 및 로직 구현
- Splash와 Lottie를 이용한 초기 로딩 실행 화면 구현
Works
- React Native, React, Typescript, Zustand, Emotion
- NestJS, postgreSQL, AWS S3
Skills
View3
2022.03 ~ 2022.08
Description
Chrome 확장 프로그램을 통해 유튜브에 대한 자막 및 피드백 등을 제공하는 서비스입니다. 고객은 다양한 언어로 자막과 피드백을 의뢰하며, 참여자는 Chrome 확장 프로그램을 통해 다양한 이 서비스는 글로벌 접근성을 높이고 콘텐츠 품질을 향상시키며, 참여자에게 경제적 인센티브를 제공합니다.
- Youtube 컨텐츠 분석 및 생성에 대한 원활한 참여를 위해 Chrome Extension을 통해서 자사 서비스를 Youtube 페이지내에 직접 구현하여 유저 참여의 편리성을 높임
- 수천 개의 자막 입력과 수정 성능을 개선하기 위해 React-Window를 도입하여, 화면 렌더링 최적화를 통해 자막 수정 UI를 향상
- StoryBook을 도입하여 컴포넌트 관리 효율성을 향상시키고, 디자이너 및 기획자와의 협업 편의성을 증대시킴
- Chrome Extension 전체 개발 및 프로덕트 웹 랜딩 페이지 일부 개발
Works
- React, Typescript, Chrome Extension, Redux-toolkit, Emotion, StoryBook
Skills
KlayTV
2021.11 ~ 2022.03
Description
특정 방송 시간의 NFT 블록을 소유함으로서 방송 시간 동안 독점적인 광고 및 홍보가 가능하게 하는 서비스입니다. 소유한 NFT 블록은 추후 거래가 가능하여 추가적인 경제적 인센티브를 제공합니다.
- 5760개의 이미지 로딩에 대한 유저 경험 개선을 위해 Image-sprite 기법을 통해 전체 이미지 로딩 시간 85% 감소
- KonvaJs를 사용하여 확대/축소가 가능한 이미지 맵을 구현 및 동적 라인 그리기 구현
- Klaytn NFT 민팅 화면 및 트랜잭션 검증 구현
- SSE + Axios 조합을 이용하여 이벤트 송수신 구현
- NFT 소유권 변경을 추적을 위한 Node 이벤트 서버 개발, Transaction 이벤트 추적 및 실시간 반영 구현
- 유저의 동시간대 이미지 업로드에 대한 문제를 해결하기 위해 이미지 프로세스용 Node 서버 개발, AWS SQS를 활용해 메세지 큐잉을 구현, 이미지 업로드 순서 보장
- 프로덕트 웹 프론트 파트 및 API 개발
Works
- React, Typescript, Redux, Styled-component
- NestJS, NodeJS, Typeorm, PostgreSQL, MongoDB, AWS S3, SQS
Skills
Voost
2021.04 ~ 2021.10
Description
AI 기반 유튜브 영상 최적화 컨설팅 서비스로, 고객이 올린 영상, 제목, 설명, 태그, 자막 등을 분석하여 더 매력적이고 검색 최적화된 제목과 설명을 추천합니다. 최신 트렌드를 반영한 인기 태그를 제안하고, 부족한 요소를 보완하여 영상의 노출과 조회수를 극대화합니다.
- 동영상 업로드의 긴 대기 시간을 개선하기 위해 Redux-saga를 사용한 비동기 업로드를 구현하여, 사용자가 해당 단계에서 기다리지 않도록 사용자 경험을 개선
- 컨설팅 서비스를 위한 다수의 Form/Input 컴포넌트 공통화
- 튜토리얼 화면을 React-portal을 사용하여 구현하여, 튜토리얼에 대한 사용자 경험 향상
- 프로덕트 웹 프론트 다수 파트 개발
Works
- React, Typescript, Chrome Extension, Redux, styled-component
Skills
사이드 프로젝트
Pic-pik
2024.10 ~ 현재
Description
이미지 선택 및 업로드 오픈소스 라이브러리 (개인 프로젝트)
- pic-pik/core와 pic-pik/react 모듈 분리로 JavaScript와 React 환경 모두에서 사용 가능
- 이미지 업로드 전 미리보기 제공 및 최적화 처리로 성능 개선
- 이미지 처리 및 커스터마이징 옵션을 다양하게 제공하여 확장성 강화
- TypeScript 타이핑과 문서화를 통해 코드 이해도와 사용 편의성 향상
- 코드 커버리지 70% 이상 달성하여 안정성과 신뢰성 확보
Works
- React, TypeScript, Cypress
Skills
MOA
2022.09 ~ 2023.04
Description
My OKR App. 목표 관리 OKR 서비스 앱
- React Native을 이용한 프로덕트 전체 프론트 설계/개발/배포
- 일정한 디자인 스타일 유지화 코드 최소화를 위해 Text 및 Input 컴포넌트 제작
- Zustand를 사용하여 상태 분리 및 화면 리렌더링 최소화로 애플리케이션 성능 최적화
- iOS와 Android 플랫폼에 맞춘 Google 및 Apple 로그인/회원가입 구현
Works
- React Native, Typescript, Zustand, Emotion
Skills
Education
2022.03 ~ 현재
한성대학교 경영학부 졸업
2013.03 ~ 2022.02