채용공고 올리기

남궁은선님을 응원해보세요!

지금 만족하고 있어요

미리보기

기본 정보

이름
남궁은선
직업
간단 소개

2년경력의 프론트엔드 개발자로 React, AWS, MSA환경에 익숙하며 의사결정에 맞추어 협업하는 환경에서 경력을 쌓았습니다. 예비창업을 한 경험을 통해 서비스 중심의 개발마인드를 가지고 있습니다. 더 나은 코드를 고민하고 개선하는 것을 즐기며, PR 리뷰 과정을 통해 팀원들과 적극적으로 소통하고 발전하는 개발 문화를 선호합니다.

기술 스택

기술 스택

JavaScript, HTML/CSS, React, AWS, ChatGPT, 서비스 기획, TypeScript, 영어, Next.js, frontend, CI/CD, 반응형 웹, 인터랙티브 웹, MSA

경력

회사명

(주)아임웹

직급 | 부서 | 근무 유형

매니저 | 프론트엔드

근무 기간

2022.06. ~ 2024.03. (1년 10개월)

담당 업무

웹빌더 서비스 회사에서 주문관리, 연동서비스, 다국어 처리 등 다양한 백오피스 페이지 구축 경험이 있으며

Tanstack Query, Shadcn UI을 활용한 UI 라이브러리 작업 등을 통해 사용자 경험을 지속적으로 개선해왔습니다.

레거시 페이지를 React 기반으로 신속하게 리빌드하고, Supabase를 활용해 주문관리 시스템의 MVP를 단기간에 구현한 경험이 있습니다.

또한 디자인시스템 환경에서 개발을 하였고 팀원들과 함께 사내 디자인시스템 구축에도 기여한 경험이 있습니다.

예비창업자로서 진행한 DIY KITTEN 프로젝트에서는 웹 서비스를 기획 및 개발, 운영했습니다.

또한 GitHub Actions를 활용한 CI/CD 파이프라인 구축을 하여 배포를 용이하게 하였습니다.

프로젝트

프로젝트명

모루인형, 비즈발 디자인 및 시안 생성 웹서비스

소속/기관명

DIY KITTEN(예비창업)

프로젝트 기간

2024.07. ~ 2024.10.

프로젝트 내용

제품 판매 및 서비스 체험부스운영

2024.10.4-2024.10.5

  • 할로윈을 테마로 모루인형 꾸미기 서비스를 런칭

  • 작가와 협업하여 플리마켓에서 실제 제품을 판매

  • 커스텀한 모루인형 디자인을 웹서비스를 통해 체험할 수 있는 부스 운영

모루인형 꾸미기

2024.8-2024.10

  • 회원가입, 로그인 기능(구글 Oauth) 제공

  • intersection observer 무한스크롤 구현

  • react-konva 를 이용한 캔버스 위 파츠들 컨트롤 기능 제공

  • 캔버스 위 파츠의 위치, 레이어순서, 크기정보를 저장 및 데이터화

  • 파츠 관리 구조 설계 및 UI UX 구성

  • 화면 너비에 따른 캔버스 및 파츠 비율 변수화를 통한 반응형 구현

픽셀 디자인 수정 기능

2024.7-2024.8

  • 팔레트의 색상을 상태관리 하여 사용자가 직접 변경할 수 있는 기능 개발

  • GitHub Actions를 활용한 CI/CD 파이프라인 구성

  • 모바일 디바이스에서도 자연스러운 터치 및 제스처 지원을 구현하여 사용자 경험을 향상

  • 작업 기록 저장 및 복원될 수 있게 상태관리를 통한 히스토리 기능 개발

  • 워터마크가 포함된 완성 디자인 사진, 도안 다운로드 기능 개발

사진으로 비즈발 디자인 생성하기

2024.7-2024.8

  • python 서버로 픽셀 처리된 데이터를 통해서 캔버스에 픽셀 각 위치에 해당하는 색깔데이터가 있는 csv를 생성

  • 생성된 csv 데이터를 활용하여 캔버스에 비즈발 시안 인터렉티브 애니메이션 구현

  • 캔버스 내의 비즈발이 사용자들에게 전체적으로 나타나게 반응형 처리

  • Caman을 통해서 이미지 크롭, 회전, 사진 밝기 수정 기능 추가

프로젝트명

Oauth 로그인과 외부연동 서비스 관리자 페이지 리빌드

소속/기관명

imweb/integration squad

프로젝트 기간

2024.02. ~ 2024.03.

프로젝트 내용
  • PHP로 된 페이지를 React앱으로 리빌드하고 MSA로 관리

  • MSA로 관리하는 레포지토리를 모노레포로 관리

  • GHA로 production브랜치에 머지할때 배포 및 Cloudfront cache 무효화

  • GNB LNB를 제외한 영역을 iframe으로 교체.

  • 데이터를 window.postMessage로 전달.

  • api 통신을 postMessage로 하기위한 api통신 mocking Promise객체 생성

  • Tanstack query를 이용한 데이터 캐싱

  • React-hook-form, zod로 유효성검증 및 폼데이터 제출 페이지 구현

프로젝트명

브이리뷰 연동 백오피스 페이지

소속/기관명

imweb/integration squad

프로젝트 기간

2023.12. ~ 2024.01.

프로젝트 내용

리뷰연동서비스 브이리뷰를 연동하는 백오피스 페이지 개발

  • 랜딩페이지

  • 연동 상태에 따른 분기처리

  • 설정 페이지

  • 반응형 작업

프로젝트명

주문관리 백오피스 페이지 리빌드 프로덕션 개발

소속/기관명

imweb/주문관리 tf

프로젝트 기간

2023.06. ~ 2023.12.

프로젝트 내용
  1. 주문단계를 변경할 수 있는 인터페이스 개발

  • Tanstack Query로 변경되어야하는 부분만 데이터 패칭을 하여 UX 개선

  • 주문상태에 따른 사용자의 행동에 제한을 주는 분기처리

  • 배송지 수정모달

  • 사용자 액션 모달 및 토스트

  1. 주문관리 페이지의 주문상세페이지, 취소 추가 반품의 금액계산페이지 작업.

  • 상품 추가시 쿠폰유효성체크, 금액 유효성 검사

  1. 결제내역 및 관리하는 카드 및 상세정보 Side Sheet 추가

  • 현금영수증 발급 상태 관리 및 수정 인터페이스 개발

  • 입금완료 처리 및 되돌리기 인터페이스 개발

  • 결제처리(취소확인, 입금확인 등) 계산 및 처리 모달 개발

  1. Weblate를 이용한 i18n 다국어처리

  • 다국어 관리 레포에 동기화

  • AWS auto translating 사용하여 번역적용

  • i18n template로 언어, 국가, 화폐단위에따른 동적 다국어처리 적용

프로젝트명

주문관리 백오피스 페이지 리빌드 MVP 개발

소속/기관명

imweb/주문관리 tf

프로젝트 기간

2023.03. ~ 2023.06.

프로젝트 내용
  • supabase 로 가상의 관계형 데이터베이스 구조 생성

  • supabase에서 제공하는 graphql query및 mutate을 이용한 CRUD로 섹션단위 주문관리 기본 기능 구현


  • shadcn 커스텀으로 ui구현 및 npm library화

  • rollup으로 컴포넌트 빌드하여 npm publish

  • UI 라이브러리 semantic versioning 협업

포트폴리오

URL

link

DIY KITTEN

URL 링크
link

All of Art

깃허브
link

쓰랭

깃허브

교육

소속/기관명

한양대 창업지원단 린스타트업

종류 | 전공

사설 교육 | 1, 2단계

재학 기간 | 재학 상태

2024.07. ~ 2024.11. | 수료

소속/기관명

엘리스

종류 | 전공

사설 교육 | AI 개발트랙

재학 기간 | 재학 상태

2021.06. ~ 2021.12. | 졸업

소속/기관명

국민대학교

종류 | 전공

대학교(학사) | 임산생명공학과

재학 기간 | 재학 상태

2016.03. ~ 2021.02. | 졸업

외국어

외국어명

영어

점수

일상 회화 가능

자기소개

자기소개

1. 자기소개

[실패를 통해 배우고 성공으로 나아가기]

저는 실패를 통해 얻은 교훈을 바탕으로 개선하며 성공을 쌓아가는 과정에 큰 가치를 두고 있습니다. 창업을 시작하며 고객의 니즈를 정확히 파악하는 것이 중요하다는 점을 깨달아, 린 스타트업 방식을 도입했습니다. 처음에는 코칭 서비스에 집중했으나, 고객의 니즈가 명확하지 않다는 한계를 느끼고 사업 방향을 과감히 피봇했습니다.

그 후, 시장 트렌드 분석을 통해 비즈발 디자인을 쉽게 제작할 수 있는 서비스를 구상했습니다. 한양대 창업지원단의 도움으로 웹 기반 디자인 시안을 제공하는 서비스를 구현하며 플리마켓에서 90명의 팔로워를 확보하는 성과를 거두었습니다. 하지만, 이후 마케팅 전략 부족과 팀원 확보 등의 어려움을 겪으며 창업 준비가 미흡했음을 실감했습니다.

이러한 경험을 통해 저는 개발자로서 기술 역량뿐 아니라 팀워크와 소통, 꾸준한 학습과 실행의 중요성을 깊이 이해했습니다.

앞으로 동료들과 적극적으로 소통하고 협업하며, 주도적으로 문제를 해결하는 개발자로서 회사의 성장에 기여하며 함께 발전해 나가고 싶습니다.

2.협업역량

[정기적인 상황 공유로 빠른 문제 해결]

프로젝트를 스프린트 단위로 진행하며 매일 회고를 통해 팀원들과 문제를 공유하고 해결 방안을 논의했습니다.

예를 들어, 서버 데이터 변동으로 화면이 리로드되는 문제를 해결하기 위해 tanstack-query를 도입해 필요한 데이터만 패치하는 방식을 적용했습니다. 이를 통해 UX를 개선하고 서버 부하를 줄이며 효율적인 시스템을 구축할 수 있었습니다.

[디자이너와의 소통으로 개발 공수 최소화]

iframe으로 들어가는 MSA의 반응형 breakpoint를 화면너비에서 container 기준 디자인으로 변경하며 디자이너와 협력해 작업했습니다. 특히, LNB(Open 상태)에 따른 예외 처리를 간소화하는 방안을 도출하며 디자인과 개발 간 효율적인 협업을 이끌어냈습니다. 이 과정은 개발 공수를 최소화하고 시스템의 일관성을 높이는 데 큰 기여를 했습니다.

[기획 단계의 불확실성을 협력으로 극복]

주문관리 리빌드 프로젝트 초기, 명확하지 않은 기획서를 기반으로 팀원들과 논의하며 supabaseGraphQL을 활용해 DB 구조를 유추하고 MVP를 빠르게 구현했습니다. 개발 과정에서 기획 단계의 부족한 부분을 보완하고 지속적으로 피드백을 주고받으며, 팀의 협력을 통해 초기 불확실성을 극복했습니다.

[디자인 시스템 협업으로 일관성 강화]

디자인 시스템이 미완성된 상황에서 Shadcn-ui를 활용해 임시 UI 라이브러리를 구축했습니다. 이 과정에서 디자이너들과 적극적으로 의견을 나누며 디자인시스템의 일관성을 강화하고, 디자인 시스템 팀에 필요한 개선 사항과 피드백을 전달해 더욱 체계적인 시스템으로 발전시키는 데 기여했습니다.

3. Why에서 What을 결정하는 능력

[기술 스택 선택의 이유: 최적의 해결책을 위한 고민]

기술 선택에서 항상 "왜 이 기술을 사용해야 하는가?"를 깊이 고민했습니다.

예를 들어, 주문 관리 프로젝트에서는 서버 데이터 패칭이 주요한 부분이었고, 클라이언트 상태 관리의 복잡도는 상대적으로 낮았습니다.

그래서 Tanstack Query를 사용하여 서버 상태를 효율적으로 관리했고, 이 선택이 서버와 클라이언트 간의 효율적인 통신과 UX개선을 가능하게 했습니다. 각 기술이 프로젝트에 적합한 이유를 깊이 고민하며, "왜 이 기술을 선택해야 하는지?"에 대한 답을 찾았습니다.

[UI/UX 설계에서의 고민]

저는 디자인이 단순히 시각적인 요소를 넘어서 사용자 경험을 고려해야 한다는 점을 항상 고민합니다.

사용자 중심의 경험을 제공하기 위해, 디자인의 목적과 사용자 흐름을 면밀히 분석하고, 이를 어떻게 구현할 것인지를 고민했습니다. 이를 통해 더 나은 사용자 경험을 제공할 수 있었습니다.

[회사의 비전과 목표 이해]

개발 과정에서 "왜 이 기능을 개발하는가"에 대한 고민을 함께 합니다.

예를 들어, 제가 참여한 주문 관리 프로젝트에서는 각 기능이 고객 경험과 효율성 향상에 어떻게 기여하는지를 고민했습니다. 백엔드와의 협업에서 중요한 결정들을 내릴 때, 그 기술이 회사의 장기적인 목표와 일치하는지, 각 기능이 고객에게 어떤 가치를 제공할지를 고민했습니다. "왜 이 기능이 필요한가?"에 대한 깊은 이해가, 내가 맡은 일을 책임감 있게 수행하고 회사의 비전에 부합하는 방향으로 나아가게 했습니다.

4. UX 개선에 대한 열정과 피드백에서 얻은 즐거움

[직관적이고 효율적인 유저 플로우 설계]

비즈발모루인형 만들기 프로젝트를 기획하면서, 유저 플로우에 대해 많은 고민을 했습니다.

특히, 디자이너와 외주 작업을 진행하며, 어떻게 하면 사용자가 서비스를 직관적이고 편리하게 이용할 수 있을지에 대해 의견을 주고받았습니다.

플리마켓에서 사용자 피드백을 통해 유의미한 개선점을 발견하고, 이를 바탕으로 유저 플로우를 더 효과적으로 다듬을 수 있었습니다. 사용자 이탈을 줄이고, 편리함을 극대화하는 방법을 찾는 데 집중했습니다.

[기술적 도전과 창의적인 문제 해결]

비즈발 프로젝트에서 애니메이션을 추가하고 인터랙션을 구현하는 작업은 처음 시도한 도전이었습니다.

유튜브에서 비즈발 디자인 및 시안 작업이 오래 걸린다는 문제를 발견하고, 이를 개선할 수 있는 방법을 모색했습니다. CodeSandbox에서 다중진자운동(multi pendulum)을 구현한 예시를 참고하고, 이를 비즈발 애니메이션에 적용하여 보다 동적인 사용자 경험을 제공할 수 있었습니다.

또한 ChatGPT를 활용해 애니메이션 최적화색상 추출의 효율성을 높이는 방법을 찾았습니다. 실험을 통해 어떤 변수들이 더 자연스럽고 매끄러운 애니메이션을 만드는지 분석하며, 창의적이고 실용적인 해결책을 도출할 수 있었습니다. 기술적 도전 속에서 발생한 문제들을 해결하는 과정에서 기술적 성장과 함께 문제를 해결하는 즐거움을 경험할 수 있었습니다.

모루인형 만들기 프로젝트에서는 캔버스 크기 조정과 관련된 반응형 문제를 해결하는 데 큰 도전이 있었습니다. 캔버스가 화면에서 차지하는 비율에 따라 크기를 동적으로 조정하는 과정에서 비율 기반 레이아웃을 적용하여 반응형 디자인을 구현했습니다. 캔버스 너비에 따른 비율 등 변수를 고려해가며 각 파츠의 위치를 동적으로 저장하고 갱신하도록 개선했습니다. 또한, 뒤쪽 파츠 자동 반전 기능을 추가하여, 앞면과 뒷면의 디자인이 자연스럽게 이어지도록 했습니다.

기술적 도전이 많았지만 많은 것을 배운 프로젝트였습니다.

[고객 중심의 아이디어 구현]

비즈발모루인형 꾸미기 프로젝트피드백을 통해 고객들이 원하는 개선점을 파악하고, 레퍼런스 사이트를 참고하며 기획을 다듬었습니다.

이 과정을 통해 완성된 결과물이 고객에게 어떻게 받아들여질지 상상하며 작업을 했고, 실제 고객들이 그 결과물을 보고 만족하는 모습을 보며 큰 즐거움을 느꼈습니다.

그들이 내가 만든 제품에 대해 긍정적인 반응을 보였을 때, 제게 큰 동기부여가 되었습니다.

댓글