Contacts

작은 변화를 만들어내는 개발자, Chloé입니다.

내가 만들어가는 프로덕트를 사랑하고 몰입하는 개발자입니다. 서비스에 대한 애정을 가지고 구석구석까지 살피며 이해하고, 이를 바탕으로 개발합니다. 주어지지 않은 일을 찾아내 주도적으로 일하는 팀원입니다. 개발 뿐만 아니라 디자인과 UX, 운영 등 다양한 영역을 아우르며 프로덕트를 개선합니다.

이렇게 만들어 낸 프로덕트로 사람들의 일상에 작은 변화를 만들어내고자 합니다.

About 클로이

👩‍💻 Career 경력

리드넘버 | 노티Notiee (2023. 2 ~ 2023. 6)

모바일 웹뷰 개발

화이트큐브 | 챌린저스 (2022. 7 ~ 2022. 9)

웹 프론트엔드 개발
앱 클라이언트 개발

당근마켓 (2021. 9 ~ 2022. 3)

당근마켓 MVP 인턴십 1기 (12주)
당근마켓 윈터 Tech 인턴십 (8주)

🚀 Projects 프로젝트

산타파이브 (2021 ~ )

내 트리를 꾸며줘! (2023)
내 트리를 꾸며줘! (2022)
내 트리를 꾸며줘! (2021)

🏦 Education 교육

고려대학교 ( ~ 2020)

미디어학부 졸업

삼성 청년 SW 아카데미 (2020 ~ 2021)

4기 교육 수료

🛠️ Stacks 경험 기술

TypeScript
React
React Native

🔤 Languages 어학

영어 OPIc —— AL

Career 이력

리드넘버 | 노티Notiee 웹뷰 개발 (23. 2 ~ )

<aside> ✅ 세금 신고를 자동화하는 tax-tech 스타트업의 신규 서비스 모바일 웹뷰 개발

</aside>

서비스 소개

🔗 notiee.io

담당 역할 및 기술스택

모바일 웹뷰 개발
- Next.js
- TypeScript
- styled-components
- Zustand

기획 - 개발 - 출시 - 유지보수까지 애자일 프로세스의 개발 사이클을 경험하고, 타 직군과 협업하며 프로덕트 운영에 기여했어요.

세금 신고 자동화 서비스의 핵심 기능인 종합소득세 신고 기능의 클라이언트 파트를 혼자 담당해 설계하고 개발했어요.
2주 단위의 스프린트와 스크럼, 리뷰, 회고를 통해 애자일 프로세스를 경험했어요.
Clarity 도입을 제안해 유저 사용 경험을 분석하고, CS 대응에 도움을 주었어요. Mixpanel 이벤트 로그를 수집해 유저 퍼널을 분석하고, 이를 개선하기 위한 추가 기능을 개발하여 배포했어요.

예상치 못한 서버의 응답 및 장애 등에도 클라이언트가 잘 동작할 수 있도록 의존성을 분리하고 방어 로직을 구현했어요.

openapi-generator를 이용하여 클라이언트의 API interface를 생성했어요. 덕분에 서버의 잦은 변경 및 배포에 빠르게 대응할 수 있지만, 클라이언트의 데이터 interface가 서버에 지나치게 의존하는 문제가 발생했어요. 이를 해결하기 위해 서버에서 가져오는 데이터와 클라이언트에서 관리하는 데이터를 분리하고 두 레이어를 싱크했어요.
미리 정의된 에러가 발생할 경우 서버에서 응답하는 status code에 따라 분기하여 처리하고, 미리 정의되지 않은 에러가 발생할 경우 클라이언트에서 이를 방어할 수 있도록 방어 코드를 작성했어요.
서버에서 도메인 로직을 비동기적으로 처리할 수 있도록 클라이언트에서 polling 형태로 대기 페이지를 구현했어요.

변화에 대응할 수 있도록 디자인 시스템의 interface를 재정의하고, 웹 표준을 준수하며 컴포넌트를 개발했어요.

컬러 코드와 pixel 값 등의 디자인 요소들을 design-token으로 정의하고, 이 값들을 theme 내에서 semantic-scheme으로 재정의해 사용했어요.
- 디자인 요소들을 맥락에 따라 정의함으로써 디자이너의 의도를 명확하게 반영하고, 추후 dark-theme 도입 등 UI가 크게 변경되는 경우에도 유연하게 대응할 수 있도록 했어요.
- 실제로 리브랜딩을 거치며 Primary 컬러가 변경되는 상황이 발생했지만, scheme만을 재지정하여 짧은 시간 내에 앱 전체의 디자인을 변경할 수 있었어요.
input, select 등의 태그를 적극적으로 이용하여 Toggle Switch, Segmented Picker 등 공용 컴포넌트를 개발했어요.
- 웹 표준에 알맞은 semantic한 마크업을 구현하고, css가 작동하지 않는 환경에서도 사용자들이 form에 접근할 수 있도록 했어요.
- html 태그가 가진 본래의 기능을 이용해 컴포넌트를 스타일링하고, 입력값을 관리했어요. 따라서 불필요한 상태나 이벤트 핸들러를 걷어낼 수 있었어요.

동적인 UI를 가진 form 컴포넌트를 개발했어요.

하나의 필드가 입력됨에 따라 다음 필드가 생성되는 대화형 fom UI 컴포넌트를 개발했어요.
일련의 step으로 구성되고, 입력된 데이터에 따라 동적으로 다음 step이 정의되는 form UI 컴포넌트를 개발했어요.
- Zustand를 이용해 form 데이터를 관리했는데, 이 데이터가 asynchronous 하게 업데이트되며 form step이 의도한대로 작동하지 않는 문제가 발생했어요. 이를 해결하기 위해 stateless하게 구현되었던 form UI 컴포넌트가 내부에 state를 갖도록 리팩토링했어요.

"주어진 문제에 대해서는 적극적으로 접근하고, 창의적인 해결책을 제시하는데 능숙하십니다. 그렇기 때문에 팀의 성과에 크게 기여하셨으며, 제대로 동작하는 제품을 개발하는 데에 항상 열정을 가지고 계셨습니다. 
 예외 상황에 대한 꼼꼼한 대처력이 매우 높으셔서 팀이 예상하지 못했던 문제들도 철저히 분석하고 해결해 나가십니다. 
 이는 팀의 안정성과 신뢰도를 높여주는 역할을 하며, 프로젝트 진행 도중 발생하는 문제들을 최소화하는 데에 도움을 주셨습니다. 
 이러한 능력은 협업의 핵심이자 중요한 부분이므로 매우 가치있는 자산으로 평가됩니다."

- 리드 피드백 中

화이트큐브 | 챌린저스 웹 • 앱 프로덕트 개발 (22. 7 ~ 22. 9)

<aside> 🏳️‍🌈 건강한 습관을 만드는 챌린저스에서 영양제 커머스 웹 개발 및 앱 리팩토링

</aside>

서비스 소개

🔗 챌린저스

🔗 챌스토어

담당 역할 및 기술스택

웹 프론트엔드 개발
- Next.js
앱 클라이언트 개발
- React Native
- TypeScript
- styled-components
- Redux
- React-Query

앱 프로덕트를 리팩토링하며, 불필요한 리렌더링이 발생하지 않도록 form을 최적화했어요.

다섯 단계로 나누어진 챌린지 개설 form 화면을 개발하며 복잡한 form을 관리하고 validation을 구현했어요.
- 반드시 입력해야 할 필수 항목 설정, 기본값이 설정되어 있어야 할 항목과 없어야 할 항목 분리, 앞선 입력값에 따라 조건부로 보여지는 항목 관리, 최댓값/최솟값 설정 등 form을 관리할 때 고려해야 할 요소들을 꼼꼼하게 확인하고, 디자이너가 고려하지 못한 인터랙션을 먼저 고민하여 제안하고 적용했어요.
시시각각 변경되는 값들을 관리하고 컴포넌트 간 동기화하기 위해 ContextAPI를 사용했어요.
- 기본적으로는 Context를 이용해 form의 모든 데이터를 관리하여 불필요한 props drilling이 발생하지 않도록 했어요. 하지만 동시에, 한 항목의 데이터가 변경될 경우 Context 하위의 모든 컴포넌트들이 리렌더링 되는 것을 방지하기 위해 form의 최하단 컴포넌트들은 상위 컴포넌트로부터 필요한 데이터를 props를 전달받도록 하는 구조로 구현했어요.

프로덕트 개선을 먼저 제안하고 빠르게 반영하여, 사용자 경험과 더불어 개발 경험을 개선했어요.

커머스 웹 프로덕트를 점검하고 개선하는 버그잡기 프로젝트를 제안했어요.
- 입사 당시, 앱 프로덕트를 중심으로 운영되는 서비스기에 대부분의 리소스가 앱에 집중되어 있었고 상대적으로 웹 프로덕트에는 소홀해진 상황이었어요. 디자인 싱크도 맞지 않고, 자잘하지만 유저 경험에 치명적인 버그들도 여럿 발생하고 있었어요. 신규 기능을 개발하고 QA하는 과정에서 해당 이슈들이 제기되었고, 이를 틈틈히 반영하느라 오히려 신규 기능 개발이 더뎌지는 상황이었어요.
- 더불어 외부 광고 집행이 예정되어 있었기에 웹으로의 유입이 늘어날 것이라고 판단하고, 웹을 전반적으로 점검하고 개선하는 기간을 제안했어요.
웹 프로덕트 전체 QA 이후 총 18건의 이슈를 개선했어요. 사용자 경험에 기여한 것은 물론, 신규 기능을 개발할 때도 주어진 기능에만 집중할 수 있게 되어 더 효율적으로 개발할 수 있게 되었어요.

"회사의 서비스에 관심이 많고 개선방안에 적극적인 편"
"주어진 일 외에 주도적으로 일을 만들어 내고, 특히 필요한 일을 찾아서 하려고 해주셔서 감사"

- 리드 피드백 中

"팀 내 누구보다도 서비스를 자세하게 들여다 보며 사용하고, 개선 방안에 대해서 적극적으로 의견을 내주시므로"
"질문하거나 의견을 낼 때 '아 이 사람은 내 메시지를 오해하지 않고 이해할 거야' 하는 믿음이 있습니다. 전체적인 커뮤니케이션 스타일에서 신뢰감을 줍니다."

- PO 피드백 中

Projects 프로젝트

내 트리를 꾸며줘! (2021)

<aside> 🎄 메시지를 보내 친구의 트리를 꾸미고, 크리스마스 자정에 메시지를 확인하는 롤링페이퍼 서비스

</aside>

서비스 및 팀 소개

🔗 colormytree.me

🔗 산타파이브