미리보기
기본 정보
안녕하세요, 신입 프론트엔드 개발자를 지망하는 조용원입니다. 제 스스로의 개발 가치를 높히기 위해 끊임없이 학습하고, 타인의 의견을 담백하게 경청합니다. 사용자가 바라보는 프로젝트의 시선을 중요하게 생각합니다. 이 시선을 인지하고 개발에도 투영하려 노력하고 있습니다.
교육
국립순천대학교
대학교(학사) | 컴퓨터공학과
2021.03. ~ 현재 | 재학 중
기술 스택
React, JavaScript, TypeScript, Next.js
프로젝트
전남청년 문화복지카드 사용처 검색 서비스
순천대학교 웹 개발 동아리 웨이버스(wavers)
2023.03. ~ 2023.04.
프로젝트 설명
전라남도에서 시행하는 사업인 '전남청년 문화복지카드 지원사업'에서, 사업 기관의 사용처 정보 제공 부실로 개발하게 된 서비스 입니다. 사용자들에게 문화복지카드를 사용할 수 있는 사용처들을 지도 기반으로 제공하며, 검색 키워드를 통하여 검색하는 기능도 제공하고 있습니다.
기여 내용
React 기반 프론트엔드 개발 환경 구축
Figma를 통한 서비스 레이아웃 설계 및 UI/UX 디자인
네이버 지도 API의 마커 및 이벤트를 이용한 지도 검색 기능 구현
React Query 라이브러리를 이용한 검색 Infinite Scroll 기능 구현
Sentry 도입으로 사용자 트랜젝션 분석과 체계적인 에러 모니터링 가능
기술 스택
React, Styled Components, React Query, Naver Maps API
관련 링크
전남청년 문화복지카드 사용처 검색 서비스 v2
순천대학교 웹 개발 동아리 웨이버스(wavers)
2024.02. ~ 2024.03.
프로젝트 설명
웨이버스 팀에서 진행한 '전남청년 문화복지카드 사용처 검색 서비스'의 프론트엔드 프레임워크 마이그레이션 및 디자인 개편 작업을 담당하여 진행하였습니다. 기존 서비스 UI/UX가 여러 사용자에게 쾌적하지 못한 사용자 경험을 제공하는 것 같다는 의견이 있어, 이를 개편하고자 진행한 마이그레이션 프로젝트 입니다.
주 기능이 키워드 검색이고 부 기능이 지도 검색이였던 기존 서비스에서, Sentry 모니터링을 통해 사용자들이 이용률이 높았던 지도 검색 기능을 주축으로 UI/UX를 개편하였습니다.
또한 네이버 지도 API에서 제공하는 커스텀 오버레이를 이용하여 마커 위에 해당 가맹점 정보가 노출되도록 개편하였습니다.
기여 내용
기존 서비스 프레임워크 마이그레이션 (React -> Next.js)
UI/UX 디자인 개편 담당
네이버 지도 API의 마커 및 커스텀 오버레이를 이용한 지도 검색 기능 구현 및 개편
기술 스택
Next.js, Styled Components, React Query, Naver Maps API
관련 링크
MBTI Lens
순천대학교 웹 개발 동아리 웨이버스(wavers)
2023.07. ~ 2023.11.
프로젝트 설명
자신의 MBTI를 타인에게 공유하고 평가 받을 수 있는 서비스 입니다. 프론트엔드 개발을 담당하였습니다.
타인에게 MBTI를 공유하기 위해 유저 정보를 생성하는 과정에서, 백엔드 팀과 협업하여 Kakao OAuth를 도입하였습니다. 이를 통해 사용자가 별도의 아이디/비밀번호를 생성하지 않아도 간편하게 서비스를 이용할 수 있었습니다.
이 프로젝트의 프론트엔드 개발 팀장을 맡게 되어, 팀원들에게 개인의 능력에 맞춰 담당 파트를 배분하였습니다. 각 파트의 개발이 진행되는 동안에 다양한 피드백을 제공하였고, 코드 리뷰를 진행하며 서로의 코드를 체크해보고 피드백을 가지며 팀과의 협업과 프로젝트의 완성도를 높히려 집중하였습니다.
기여 내용
Next.js 기반 프론트엔드 개발 환경 구축
Figma 이용한 서비스 레이아웃 및 UI/UX 디자인
백엔드 카카오 OAuth API 연동 및 로그인 페이지 구현
기술 스택
Next.js, Styled Components, Recoil
관련 링크
코리아 클래시 기업 소개 페이지 개발
개인
2024.01. ~ 2024.01.
프로젝트 설명
개인적으로 외주 요청을 받아 개발한 기업 소개 페이지 개발 프로젝트 입니다.
기업 인삿말, 슬로건, 오시는 길, 제품 소개 페이지를 개발하였으며, 서드 파티 SMTP API를 연동하여 문의하기 기능을 개발하였습니다.
Styled Component 라이브러리를 이용하여 웹 페이지 레이아웃과 서비스에 사용되는 컴포넌트들을 디자인하였고, 클라이언트 요청에 따라 데스크톱/모바일 반응형 레이아웃을 구현하였습니다.
최종 배포 단계에서, 정적 페이지 배포 환경 제약으로 인해 이를 정적으로 배포할 수 있는 Express 서버를 구축하였습니다.
기여 내용
데스크톱/모바일 반응형 레이아웃 및 UI/UX 디자인
서드 파티 SMTP API를 이용한 문의하기 기능 개발
섹션 헤더 및 컴포넌트 동적 애니메이션 구현
메인화면 이미지 Carousel 컴포넌트 개발
기술 스택
React, Styled Components, Express
관련 링크
*웹 페이지가 변경되어 이미지 캡처본으로 대체합니다.
자기소개
역지사지(易地思之)
입장바꿔 생각하는 것을 좋아합니다. 사용자의 입장에서의 서비스를 생각하고, 서비스와 사용자의 상호작용을 중심으로 개발합니다.
대표적인 사례로 '문화복지카드 사용처 검색 서비스' 프로젝트의 프레임워크 마이그레이션 및 디자인 리뉴얼이 있습니다.
이를 통해 서비스 초기 로딩 시간이 단축되었고, 이전 버전의 서비스에서의 불필요한 기능 삭제로 좀 더 일원화된 서비스를 제공할 수 있었습니다.
MBTI Lens 프로젝트의 경우, 별도의 알파/베타 테스트를 진행하며 테스터들에게 다양한 오류 제보와 추가 기능들에 대한 건의를 받았습니다. 사용의 불편함을 줄이기 위해 오류들의 즉각적인 핫픽스를 진행했고, 추가 기능 건의들은 서비스의 전반적인 플로우와 수용 가능성을 판단하여 적극적인 기능 도입을 진행하였습니다.
팀 보기를 유저 같이
팀원의 의견 또한 사용자의 의견만큼 중요하게 여깁니다.
대학교 내 웹 서비스 개발 동아리의 프론트엔드 팀장을 맡으면서 서비스 레이아웃 구성 및 개발 컨벤션을 정할 때, 팀원의 의견을 경청하고 상충되는 부분을 도출해 내며 팀원과의 원활한 협업을 진행할 수 있었습니다.
또한, 백엔드 팀과도 끊임없이 소통하며 완성도 있는 서비스를 개발하려 노력했습니다. 백엔드 팀과 함께 서비스 API 설계 회의를 진행하며 프로젝트에서 설계하는 API의 구조 및 작동 방식 등을 최대한의 이해도까지 끌어올리며 사용하였습니다.
자존심보단 자신감을
팀과 협업을 하면서 내 코드가 다른 사람의 코드가 나을 것 같다는 근거없는 자존감이 무의식 내에 존재했습니다.
이 자존감은 팀과의 협업과 최종 결과물에 영향을 줄 수 있다는 것을 여러 프로젝트를 진행해보며 깨닫게 되었고, 이 단점을 고치기 위해 타인과의 코드를 내 코드와 비교해보고 끊임없이 로직에 대한 질의를 나누었습니다.
이는 제가 자신감 있게 웹 서비스를 개발할 수 있는 원동력이 되었고, 또한 이는 결과적으로 제 전반적인 삶에도 자신감을 부여하며 긍정적인 영향을 주었습니다.
