미리보기

더컴퍼스는 인지심리학을 기반으로 한 비즈니스 웹 디자인을 강점으로 하는 웹에이전시입니다.

더컴퍼스에서 프론트엔드 개발자로 재직 중이며, 현재 총 8건의 프로젝트를 수행했습니다.
주로 프로젝트의 규모에 따라 Vue.js, Nuxt.js, Webflow와 같은 프레임워크를 활용해 웹 개발을 진행했습니다.

웹 개발뿐만 아니라 사내 문의량 증대를 위한 브랜딩이나 회사의 성장을 위한 방향을 함께 고민합니다.
클라이언트가 요구하는 기술스택과 요구사항에 따라 금액별로 프로젝트 견적을 작성하고 기간을 산정합니다.

여러 프로젝트에 참여하다 보니 상황에 따라 다른 기술을 필요로 했기 때문에 빠르게 성장하는 법을 익힐 수 있었습니다.
프로젝트를 진행하는 중 다양한 문제 상황을 마주했으며, 이를 기술적으로 해결하기 위한 다양한 노력들을 했습니다.
또한 유지보수를 통해 클라이언트와 주기적으로 응대하면서 소프트 스킬을 익혔고 지속 가능한 코드를 작성하기 위해 노력하고 있습니다.

현재는 이전 프로젝트에 대한 유지보수와 사내 개발자 및 디자이너분들이 조금 더 편리하게 일을 할 수 있도록 컨벤션을 정리하고 사내 라이브러리를 제작하고 있습니다.

사내 사이드 프로젝트로 Webflow에서 사용가능한 유틸함수 라이브러리를 설계 및 개발하고 있습니다.

사내 직원들이 Webflow 프로젝트를 수행하면서 느낀 문제점을 해결하고 여러 곳에서 반복되는 JS 코드를 줄이고자 합니다.

[사용 기술 및 도구]

Typescript, jsdelivr CDN

[주요 기여]

• 주로 포매팅과 이벤트 관련 기능들을 제작.

• Typescript를 활용해 타입을 명확히 해 버그를 최소한 하고자 함.

• Custom Attribute를 사용해 적용할 요소를 지정하고, Value를 통해 적용할 기능을 선택할 수 있게 구현함.

• Webflow에서 DOM을 조작하기 위해선 라이프사이클 관리를 필요로 하는데, 이벤트 처리를 유용하게 하기 위해 옵저버 패턴을 활용. 이를 통해 공통된 이벤트 처리 로직을 중앙에서 관리해, 중복 코드를 줄이고 재사용성을 향상함.

광고 마케팅을 수행하는 종합 디지털 마케팅 회사

인터렉션 개발을 할 때 즐거움을 느껴 재밌게 작업한 프로젝트입니다.
페이지 전반에 걸쳐 작업했으며 처음 사용해 보는 Webflow와 GSAP을 빠르게 익혀 구현하는 것이 관건이었습니다.

[사용 기술 및 도구]

Webflow, Javascript, GSAP, Google Apps Script

[주요 기여]

• Webflow를 사용하면서 발견한 자체적인 결함에 대해 문의하여 생태계 기여에 노력함.

• CSS 캐스케이딩에 대한 이해를 바탕으로 복잡한 요소들 간의 스타일 충돌을 방지함.

• 웹 구조에 대한 트릭을 이용하여 인터렉션에 사용되던 메모리 사용량을 효과적으로 줄임.

• Google Apps Script를 활용해 홈페이지 문의 내용을 클라이언트가 쉽게 확인 및 관리 할 수 있도록 제작.

• 클라이언트의 개발팀이 관리 가능하도록 가이드 제작.

2001년부터 서비스를 이어온 대중음악 웹진

이즘 웹사이트 리뉴얼에 참여해 현재 2차 개발 및 유지보수를 하고 있습니다.
기존 개발의 문제점들을 해소하기 위해 다양한 방법들을 고안하고 있습니다.

[사용 기술 및 도구]

Vue.js, Nuxt.js, Typescript, Pinia, AWS EC2

[주요 기여]

• 기존의 양방향 바인딩과 props drilling 을 통해 관리되던 GNB, LNB를 Pinia를 활용한 전역 상태 관리로 전환함. page-layout-gnb,lnb 형태로 복잡하게 관리되던 상태를 개선할 수 있었음.

• 강하게 결합된 형태의 컴포넌트를 아토믹 디자인 패턴에 따라 분리해 유지보수 및 재활용을 높임.

• 이미지의 기본 영역을 만들어 레이아웃 깨짐을 방지하였고 이미지 용량을 줄이기 위해 노력함. aws에서 받아온 이미지를 렌더링 과정에서 고유 크기가 아닌 렌더링 크기로 불러와 kb 단위로 이미지들을 관리 할 수 있게끔 개선.

• 클라이언트와의 주기적인 응대를 통해 개발 진행 상황을 공유 및 피드백 사항 반영.

커뮤니티를 통해 일반인끼리 모여 진행한 사이드 프로젝트입니다.
제로 웨이스트 샵의 정보 확인, 리뷰 등록 및 공유를 제공하는 서비스입니다.

[사용 기술 및 도구]

React.js, Typescript, React-Query, Tailwind CSS, Storybook, Vite, Kakao map

[주요 기여]

• Figma를 활용한 UI/UX 설계 및 Storybook을 통한 컴포넌트 문서화로 개발 생산성을 향상.

• Kakao map API 연동 및 해시태그 기능 구현.

• 제로웨이스트 가게의 위치 정보를 시각화하고 가게를 클릭 시 모달을 띄워 정보를 보여줄 수 있게 함.

• 스프린트, 코드 리뷰, CI/CD 파이프라인 등 체계적인 개발 프로세스를 만들기 위해 노력함.

카카오와 구름이 공동 주관한 해커톤에 프론트엔드 개발자로 참여하여 개발했습니다.
제주를 방문하는 관광객들이 맛있고 가성비 좋은 식당을 찾을 수 있도록, 제주시의 "착한가격업소" 데이터를 활용하여 유저로 부터 응답을 받아 추천 업소와 동선을 알려주는 서비스를 제작했습니다.

[사용 기술 및 도구]

React, styled-component, framer-motion

[주요 기여]

• 랜딩 페이지와 스토리를 통해 유저의 입력값을 서버에 넘기는 기능을 구현.

• framer-motion을 활용한 인터렉션을 구현.

• 일러스트레이터를 활용해 앱의 마스코트 캐릭터를 디자인함.

나눔 서포터즈는 교내 학생들의 쉽고 재밌는 기부를 독려하기 위한 단체입니다.

주로 디자인 업무를 맡아, 카드뉴스, 현수막, 굿즈 제작 등 활동에 필요한 디자인 작업물을 일러스트레이터를 통해 만들었습니다. 또한 일부 개발이 필요한 작업물을 만들기도 하였습니다.

[주요 기여]

• '냥비비의 문구점' 행사를 기획, 디자인하여 3일간 총 683명이 방문했고 10,000,000원을 모금 함.

• 안산 카카오데이터 센터와 콜라보하여 행사를 진행하였고 IP를 활용한 굿즈를 제작해 배부함.

• 매주 학생들에게 교내 소식을 전달하기 위해 컨텐츠를 기획하고 카드뉴스를 제작.