미리보기
기본 정보

사용자 중심의 개발을 추구하는 프론트엔드 개발자입니다. B2B에서 B2C로 전환하는 과정에서 풍부한 경험을 쌓았고, 이를 통해 사용자의 필요와 기대를 정확히 이해하고 만족시키는 방법을 학습했습니다. 인공지능 및 서비스 산업 데이터를 활용하여 다양한 기능을 구현하고, 사용자 경험을 우선시하는 개발에 집중해왔습니다. 협업적인 소통과 민첩한 문제 해결 능력으로 팀 프로젝트에 기여하고 있으며, 효율적인 코드 개발과 지속적인 피드백을 통해 프로젝트의 품질을 높이고자 합니다. 제 최종 목표는 사용자가 원하는 서비스를 현실로 만드는 것이며, 이를 위해 계속해서 성장하고자 합니다.
기술 스택
TypeScript, JavaScript, Python, React, Next.js, HTML/CSS, Git, Notion, Slack
경력
주식회사 스테이폴리오
팀원 | 프로덕트팀
2022.08. ~ 2024.03. (1년 8개월)
프로덕트팀 사원/팀원 (2년차)
- 일본 페이지 신규 개설 및 도메인 분리 시 프론트 개발 진행
- 매거진 등 콘텐츠 관리 페이지 신설 및 가격 관련된 시스템 추가 개발
- 플랫폼, 어드민 , 호스트 , 플러그인 등 스테이폴리오에 해당 하는 페이지 유지 보수 및 정리
- 프로젝트명 : 스테이폴리오
- 주요 업무 : 프론트 전담
- 담당 역할 : 프론트로써 해야 하는 일 전체
- 기술 스택 : React, html, CSS 등 사용
- 업무 기간 : 2022.08 ~ 현재 재직중
- 개발 인원 : 프론트 1명 , 백엔드 1명 , 기획자 1명으로 대부분 구성
- 상세 내용 :
- 숙박 큐레이터 예약 플랫폼, 어드민, 호스트 페이지에 대한 페이지 신규 / 유지
- 일본 도메인 페이지 분리 ( 다국어 프론트 지원 : translation )
- 마케팅 및 미디어팀의 홍보를 위한 프리오더, 프로모션 페이지에 관련된 페이지 유지 보수
(주)딥노이드
대리 | 산업AI사업팀
2021.04. ~ 2022.08. (1년 5개월)
- KAC 3차년도 웹개발
- 관세청 2차년도 웹개발
프로젝트명 : 관세청 불법 복제품
주요 업무 : 프론트엔드
담당 역할 : 프론트로써 해야 하는 일 전체 ( 유사도 분석)
기술 스택 : React, html, CSS 등 사용
업무 기간 : 2021.09 ~ 2021.12
개발 인원 : 프론트 3명, 백엔드 1명으로 구성
상세 내용 : 융합 불법 복제품 판독시스템 구축을 위해 유사도와 디자인권을 통해 불법 제품을 어느 부분에 대해서 복사 및 복제를 하여 진행을 할 것 인지에 대한 부분을 인공 지능으로 판독을 하였습니다. 이 때 리액트로 유사도 분석 파트의 카메라 부분을 개발을 진행 하였으나 안정성 평가 제출 때문에 코틀린 언어로 변경하여 개발 진행하였습니다.
프로젝트명 : KAC_DEEP SECURITY
주요 업무 : 프론트엔드
담당 역할 : 프론트로써 해야 하는 일 전체 (로그인, 설정, 통계, 아이콘 등)
기술 스택 : React, html, CSS 등 사용
업무 기간 : 2021 ~ 2022년 / 1 ~ 3개월 마다 유지 및 갱신 업데이트
개발 인원 : 프론트 3명, 백엔드 1명으로 구성
상세 내용 : 바닐라 자바스크립트로 되어 있는 프로그램을 통해서 운영이 되어 있는 부분을 리액트로 진행을 하였습니다. 그리고 개발 주기는 3개월에서 1개월 사이로 해당되는 프로젝트에 맞게 목표 설정을 하여 진행 하였습니다.
포트폴리오
교육
가톨릭대학교
대학교(학사) | 컴퓨터정보공학부
2019.03. ~ 2021.02. | 졸업
대외활동
스위그 직짱건강 프로젝트
스위그
직장인 건강 관리 웹사이트 개발 참여
SWYP-3rd-period-1-team / JopJjangHealth-frontend | zigzzang.site
프로젝트 소개: 직장인 대상으로 건강 설문과 건강 캘린더 기능을 통해 사용자 맞춤형 병원 정보를 제공하는 웹사이트 개발에 참여.
건강 설문 ~ 온보딩 및 홈화면 추가
회원 관리 시스템 구축과 질병 정보 제공 등의 기능을 담당.
기술 스택: React, Recoil, React Query, Google API 등 최신 프론트엔드 기술을 활용하여 SPA(Single Page Application) 개발.
주요 역할:
사용자 인증 및 관리: 회원가입, 로그인, 아이디/비밀번호 찾기, 프로필 수정 및 사진 업로드 기능 구현.
데이터 관리: Recoil을 사용한 상태 관리 및 React Query를 이용한 서버 데이터 캐싱 및 동기화.
UI/UX 디자인: 반응형 웹 디자인을 통한 다양한 해상도 화면 대응 및 사용자 경험 개선 작업 진행 중.
성취 및 학습: 신규 기술 스택 적용을 통한 현대적 웹 개발 방법론에 대한 이해 증진. 다양한 API 사용 경험으로 외부 서비스와의 통합 능력 강화.
https://github.com/SWYP-3rd-period-1-team/JopJjangHealth-frontend
https://www.zigzzang.site
자기소개
사용자 중심의 혁신을 이끄는 프론트엔드 전문가
조직에 어떤 가치를 가져다 줄 수 있는가?
일본 도메인 페이지를 편성을 하면서 한국어, 영어 페이지에 대해서 일본어 페이지를 추가를 해야하는 업무 였습니다. 일본어 페이지까지 삼향 연산자로 진행을 하기에는 너무 코드 양도 많고 데이터 양도 무거워져서 고민 중에 있었습니다.백엔드 개발자와 함께 translation이라는 표현을 통해서 한 단어에 대해서 한국어, 영어, 일본어의 표현을 내포하기로 약속을 하고 업데이트를 하였습니다. 하지만 모든 단어에 3개 국어가 있는 페이지만 생각을 하고 일본어가 아직 어드민에서 저장이 안된 단어에 대해서는 처음에 인지를 하지 못하여 사용자가 사용하기에는 편안하지 못한 상태에 도달을 한 바가 있었습니다. 다행히 여러 고민 끝에 구조 할당 문법과 옵셔널 체이닝 기술을 통해서 해결을 완료 하였으며 이러한 문법과 기술을 직접 적용을 하면서 다양한 경험과 지식을 키워 사용자가 사용하기 안정적인 서비스를 이용할 수 있도록 성장하는 개발자가 되고 싶습니다.내가 가진 독특한 기술 또는 전문 지식은 무엇인가?
사용자 인터페이스에 대한 특별한 접근 방식을 보여주는 경험 중 하나로 페이지네이션에서 무한 스크롤로의 전환 작업이 있습니다. 무한 스크롤을 구현하면서, 데이터가 많을 때 사용자의 스크롤 횟수를 줄이는 장점을 활용했습니다. 그러나, 사용자가 헤더와 푸터에 쉽게 접근할 수 있도록 하는 것도 고려해야 했었습니다.이 문제를 해결하기 위해, 함께 일하는 비개발자 분들께 스크롤탑 버튼을 도입하는 아이디어를 제안하고 구현했습니다. 이는 사용자 경험을 향상시키는 동시에, 기술적으로도 효율적인 솔루션이었습니다. 이 경험을 통해 사용자 인터페이스 개발에 있어서의 전문성과 창의적인 문제 해결 능력을 보여줄 수 있었습니다.내가 이전 직장에서 달성한 주요 성과는 무엇인가?
스테이폴리오에서 주요 업무 중 하나는 프리오더 시스템의 업데이트였습니다. 프리오더는 소비자들에게 공간에 대한 정보를 미리 제공하고, 알림 신청 및 공유 기능을 통해 관심을 유도하는 시스템입니다. 이 시스템의 핵심 업데이트로는 사진 표시 방식을 단순한 형태에서 슬라이드 형태로 전환하였으며, 공유 기능에는 UTM 링크를 추가하여 마케팅 실험에 유용한 데이터를 수집할 수 있도록 개선했습니다. 또한, 백엔드 개발자와 협력하여 엑셀을 통한 추가 작업 기능을 도입했습니다. 개발 과정에서 국가 코드에 대한 인지 부족으로 일부 난관에 부딪혔지만, 철저한 테스트를 통해 성공적으로 해결했습니다. 이러한 업데이트 덕분에 미디어 팀은 알림 주기를 1달에서 2주로 단축하는 등의 성과를 달성했습니다. 이러한 프리오더 시스템 업데이트를 주도하며 기술적인 해결책을 찾고 팀 간 협력을 이끌어낸 효과적인 사례로 남아있습니다.팀워크 또는 리더십에서 내가 보여준 특징은 무엇인가?
코드 리뷰를 통해 팀워크를 발휘하는 게 개발자에게 중요하다고 생각합니다. 이 과정을 통해 이슈를 예방하고, 다양한 개발자들의 관점을 배운다고 생각합니다. 코드 리뷰는 주로 세 가지 주요 사례에 중점을 둡니다. 첫째, 기능 구현의 적합성을 검토합니다. 기능이 제대로 구현되었다면, 그 코드는 그 자체로 중요한 의미를 지닌다고 판단합니다. 둘째, 코드의 구조적 측면을 리뷰합니다. 기능이 이미 구현되었더라도, 문법적 오류나 비효율적인 코드 구조에 대해 검토합니다. 마지막으로, 동료의 코드를 존중하면서 타협할 수 있는 방법을 모색합니다. 구체적인 예로, 관광권역 업데이트 프로젝트에서 코드 리뷰를 진행했을 때, 이전에 미처 발견하지 못했던 코드 오류를 식별하고 해결할 수 있었습니다. 또한, 이 과정에서 useEffect 의 의존성에 대한 제 이해를 더욱 깊게 다질 수 있는 기회가 되었습니다. 이러한 경험을 통해, 기술적 지식을 향상시키고, 팀 내에서의 핵심 개발자로 성장 할 수 있었습니다. 오늘도 코드 리뷰를 원활하게 진행할 수 있는 개발자로 성장하고자 경험과 공부로 채워 나가고 있습니다.내가 직면했던 도전적인 상황은 무엇이며, 이를 어떻게 극복했는가?
가격 할인 페이지를 업데이트를 하기 전에 따로 피그마로 나온 시안이 없었습니다. 지금 상태의 페이지대로 진행을 하게 되면 한 페이지에 사이즈가 넘쳐나서 스크롤을 하게 됩니다. 스크롤을 진행을 하게 되면 사용자가 모든 내용을 알고 있는 상태가 아니라면 반복적으로 스크롤을 해야하는 피로도가 생길 것 같았습니다. 이러한 점을 토대로 백엔드 개발자와 함께 각 리스트 목록에 대한 값을 추가하여 대분류, 중분류, 소분류에 대해서 처리 할 수 있도록 배수 값이나 나머지 값을 사용하여 마무리를 진행한 바가 있습니다. 이 경험을 통해, 끊임없이 변화하는 기술 환경에 적응하고, 사용자 경험을 최우선으로 생각하는 솔루션을 제공하는 능력을 갖춘 개발자로 성장하고 싶습니다.