미리보기
기본 정보
사용자 중심의 UI/UX를 설계하고자 항상 고민하는 신입 Frontend 개발자 강한나입니다.
기술 스택
React, JavaScript, TypeScript, HTML/CSS, Git, tailwind-css, zustand, react-query, Python, Vue.js, Figma, react-mui, Redux
경력
주식회사 애니챗
연구원 | 디지털플랫폼
2022.05. ~ 2023.05. (1년 1개월)
웹 퍼블리싱, 웹 프론트엔드 개발을 담당했습니다.
주요 업무는 아래와 같습니다.
-채팅 플랫폼을 반응형을 적용하여 웹 퍼블리싱
-이벤트 페이지를 React를 사용하여 웹 퍼블리싱/웹 프론트엔드
-당사 홈페이지 웹 퍼블리싱 및 프론트엔드 유지/보수
-NFT사업에서 민팅페이지 기획과 whois에서 도메인 구매, 외주 블록체인 개발자와의 소통 담당
프로젝트
MyPro-Fit
삼성 청년 소프트웨어 아카데미
2024.05. ~ 2024.05.
개요 : 삼성청년 소프트웨어 아카데미에서 진행한 금융 프로젝트로 사용자의 자산 규모와 유사한 다른 사용자들이 가입한 금융 상품을 기반으로 맞춤형 추천을 하는 등 다양한 금융서비스를 제공합니다.
담당 : 일정 및 UI설계,초기 환경세팅,인증/인가,메인페이지,마이페이지,AI챗봇,게시판페이지 구현
구현사항
-Django Rest Auth을 통해 커스텀 유저 모델을 생성하여 인증 및 인가 시스템을 구축
- 프롬프트로 AI 학습시킨 챗봇 기능을 개발하여 금융상품 추천 및 상담 서비스 제공
- 게시판을 구현하여 금융상품 후기를 작성하고 수정, 삭제하는 기능과 댓글생성, 수정 및 삭제 기능 구현
학습
- 새로 배운 프레임워크인 Vue.js와 React 라이브러리 간의 차이점을 직접 사용해보며 이해했습니다.
- 다양한 pre-commit hooks와 공유 config를 설정하기 위한 도구들을 설정하고 활용하는 방법을 익혔습니다
참고링크
https://github.com/hannabananah/MyPro-Fit
기타
모든 프로젝트는 첨부된 링크나 pdf로 보다 자세한 내용을 확인하실 수 있습니다.
ON&OFF
부트캠프 엘리스
2023.12. ~ 2023.12.
개요 : 온오프라인 소모임을 간편하게 하기 위한 플랫폼을 제공하는 프로젝트로 이를 활용해 혼자보단 함께 성장할 수 있는 공간을 제공하는 서비스입니다.
담당 : FE-메인페이지, 모임 검색/리스트 페이지 UX/UI, 전반적인 디자인 컨벤션
구현사항
- 필터링에 따른 다중검색 기능 적용으로 해시태그 검색과 제목, 내용 검색이 동시에 되도록 구현
- Intersection Observer API를 사용하여 무한스크롤 구현으로 효율적인 데이터렌더링과 사용자 편의성 증대
- UX/UI를 고려한 스켈레톤 UI와 다크모드 적용
- 쿠키를 사용하여 '오늘하루 보지않기' 팝업 구현
- 메인페이지에 카테고리별 인기있는 모임만 필터링하여 노출시키는 캐러셀 구현
성과/학습
프로젝트 최우수상 수상 / 실무에서 발생할 수 있는 다양한 문제들을 해결하고 사용자 경험을 최적화하는 방법을 고민하며 기능을 구현하는 법을 배웠습니다.
참고링크
멍뭉
부트캠프 엘리스
2023.10. ~ 2023.11.
개요 : 강아지 전용 용품 판매 사이트로 강아지의 나이, 품종, 크기와 같은 기본 정보를 바탕으로 가장 적합한 제품을 추천하는 서비스로 vanilla JavaScript로 구현했습니다.
담당 : 스키마 설계, Rest API 생성, 관리자페이지와 장바구니페이지 구현
구현사항
- 강아지, 회원, 주문에 관한 스키마 작성 및 API 생성
- 사용자 주문 리스트 조회, 상품관리 조회, 카테고리 관리 각 페이지 UI 구현과 API 연동 및 호출
성과/학습
프로젝트 대상 수상 / DB를 설계하고 API를 생성한 후, 구현한 페이지에 연동하는 작업을 하며 전반적인 개발 작업의 흐름에 대해서 알게 되었고, 프로젝트의 규모와 요구사항에 따라 사용할 기술을 선택해야 한다는 것을 몸소 느꼈습니다.
참고링크
포트폴리오
교육
삼성 청년 SW 아카데미/삼성전자
사설 교육 | 개발 교육 이수중
2024.01. ~ 현재 | 재학 중
SW 엔지니어 트랙 7기 수료
사설 교육 | 서버,클라이언트,네트워크,데이터베이스 등을 학습
2023.09. ~ 2023.12. | 졸업
(디지털디자인) UI/UX 반응형 웹디자인&웹퍼블리셔(디자인&코딩) 양성과정/그린컴퓨터학원
사설 교육 | 웹 퍼블리싱 교육
2022.12. ~ 2023.05. | 졸업
자기소개
저는 사용자 관점에서 서비스를 고민하며 사용자 중심 UI/UX 설계에 대한 역량을 키웠습니다. 부트캠프 엘리스와 삼성 청년 소프트웨어 아카데미에서 프로젝트를 하며 어떻게 하면 사용자들에게 다시 찾고 싶은 서비스로 보일 수 있을까 고민했습니다. 그 과정에서 사용자의 이탈률을 막고자 성능개선을 위해 chrome 브라우저의 Lighthouse를 사용하여 성능을 측정하고 분석하는 것이 습관이 되었습니다. 이를 통해 불필요한 코드나 파일을 제거하고, 이미지 용량을 줄였습니다. 그뿐만 아니라 React를 사용한 프로젝트에서는 Suspense나 lazy를 사용해서 코드 스플리팅을 적용했습니다. 또한 스켈레톤 UI나 다크모드 등 시각적인 요소도 프로젝트에 적용했고 프로젝트마다 사용자의 경험과 가치를 중요하게 생각한 것 같다는 피드백을 들었습니다.
또한, 사용 기술의 철학과 특성에 맞게 기술을 활용합니다. 'ON&OFF' 프로젝트에서 React의 특성을 고려하여 프로젝트 설계 단계에서 자주 사용될 버튼, 인풋, 모달창 등의 컴포넌트를 먼저 구현하는 것을 팀원들에게 제안했고 이에 따라 코드의 유지보수성을 향상했으며 UI 작업을 할 때에 props에 따라 내용만 바꾸어 앞서 작업해 놓은 컴포넌트를 적용하는 방식을 통해 후반으로 갈수록 작업 속도가 빨라졌습니다. 또한 프로젝트 초기 세팅을 할 때 TailwindCSS의 config에 공통으로 적용할 스타일을 정의하여 스타일링을 구현했습니다. 이러한 기술 활용으로 코드의 일관성을 높이는 데에 이바지했습니다.
그뿐만 아니라 교육프로그램에서 Express나 Django 등의 백엔드 프레임워크를 해 본 경험이 있어 서버로부터 어떻게 데이터를 주고받아야 하는지에 대해 이해가 깊습니다. 프론트엔드 개발을 하면서 백엔드에 데이터를 보내는 작업을 할 때에 백엔드에 의존성이 있는 부분에 대해서 오류를 해결하며 백엔드 영역 또한 직접 해 볼 필요가 있다고 생각했습니다. 그래서 ‘MyPro-Fit’과 ‘멍뭉’ 프로젝트에서는 백엔드 영역까지 같이 프로젝트를 구현하며 웹 서비스 하나를 만들 때 데이터 흐름을 선명하게 알게 되었습니다. 이후에는 API 작업을 할 때에 오류가 발생하면 서버 쪽에서의 에러라고 하더라도 원인을 알고 백엔드 개발자에게 명확한 요구사항을 제시하며 적절한 대응을 취할 수 있습니다.
마지막으로 저는 웹 퍼블리셔로서의 1년간의 실무 경험과 다양한 팀 프로젝트를 통해 원활한 의사소통과 팀원들과의 협력을 강화하였습니다. 실무에서는 프로젝트를 진행하며 웹 디자이너와 개발자 중간에서 긴밀하게 협업하면서 프로젝트의 원활한 진행을 도왔습니다. 이에 따라 구체적으로는 디자인 가이드라인을 준수하면서도 개발 가능성과 사용자 경험을 고려해 UI/UX를 설계하는 법을 배우며 협력을 강화했습니다. 또한, 다수의 프로젝트를 진행하며 팀원 간 이견이 있을 때도 다양한 의견을 수렴하고자 하며 효과적인 의사소통으로 팀워크를 고취했습니다.
자격증
Opic
IH | ACTFL
2024.03.