미리보기
기본 정보
고객 중심의 화면 구성을 위해 소통하는 프론트엔드 개발자 김상연입니다. 학부생 시절, 프로젝트 경험을 통해 사용자의 관점에서 화면을 설계하고 구현하는 것에 흥미를 느껴 프론트엔드 개발자로서의 진로를 선택하게 되었습니다. 그저 단순히 화면을 구성하는 것이 아니라, 대학 시절 창업동아리를 통해 고객의 관점에서 프로젝트를 바라보며 서비스를 기획하는 경험을 쌓았습니다. 이러한 경험에 더해, 삼성청년SW아카데미에서 교육을 이수하며 여러 개발자들과 협력하여 프로젝트를 수행하며 Vue.js, React, TypeScript와 같은 새로운 기술을 익히며 프로젝트를 진행하였습니다. 최근에는 새로운 기술 스택학습과 프론트엔드 최적화를 공부하며, 더 나은 사용자 경험에 대해 고민하고 이를 개발에 적용하고자 노력하고 있습니다.
기술 스택
JavaScript, GitHub, React, TypeScript, HTML/CSS, MySQL, Java, Vue.js, JIRA
프로젝트
가장: 가볍게 장보자 - 1인 가구를 위한 식품 거래 및 공동구매 플랫폼
가톨릭대학교 - 졸업 프로젝트
2021.08. ~ 2021.12.
가장: 가볍게 장보자
- 기간: 2021.08 ~ 2021.12
- 인원: 3명(FE: 2명, BE: 1명)
- 개요: 1인 가구를 위한 식품 거래 및 공동구매 플랫폼
1인 가구의 생활 비용 절약을 위해 공동구매 플랫폼 프로젝트를 개발하였습니다.
해당 플랫폼을 통해 사용자는 식료품 및 생필품 구매에 필요한 소비를 줄일 수 있고,
식료품 대량 구매 시 발생하는 쓰레기 절감 효과를 기대하였습니다.
- 담당 역할: 프론트엔드 개발
- 기여도: 30%
- 개발 스택: JavaScript, Vue.js
- 협업 도구: Notion, Github
기능 구현
- Vue.js를 사용하여 '거래 생성', '거래 참여', '거래 과정 확인' 페이지를 구성
- Axios와 REST API를 사용하여 백엔드와 비동기 통신 진행
프로젝트 결과
- 기획 의도와 사용자에게 필요한 정보를 담고 있는 화면을 구성하였다는 인정을 받아 교내 대회에서 장려상 수상
MFC: Mouth Fighting Championship
삼성청년SW아카데미/공통 프로젝트
2023.07. ~ 2023.08.
MFC: Mouth Fighting Championship
- 기간: 2023.07 ~ 2023.08
- 인원: 6명(FE: 3명, BE: 3명)
- 개요: WebRTC를 활용한 온라인 화상 토론 플랫폼
최근 온라인에서 많은 논쟁이 발생하여, 이를 토론을 통해 대화할 수 있도록 하는 플랫폼을 개발하였습니다.
이를 통해 사용자 간 대화를 통해 서로의 관점을 이해하는 장소로 활용되고자 했습니다.
- 담당 역할: 프론트엔드 개발
- 기여도: 20%
- 개발 스택: JavaScript, React
- 협업 도구: Notion, Gitlab, JIRA
기능 구현
- WebRTC의 라이브러리인 OpenVidu를 사용하여 화상 채팅 구현
- 화상 토론방의 UI, 화상 채팅, 웹소켓을 활용한 이미지 공유, 채팅 기능 구현
프로젝트 결과
- 백엔드 개발이 늦어져, MVP 이외의 추가 기능 구현을 하지 못하였습니다. 이를 통해 프로젝트 일정 관리의 중요성을 다시 한번 깨닫게 되었습니다.
술렁술렁 - 사용자 맞춤 맥주 추천 플랫폼
삼성청년SW아카데미/특화 프로젝트
2023.08. ~ 2023.10.
술렁술렁
- 기간: 2023.08 ~ 2023.10
- 인원: 6명(FE: 2명, BE: 3명, 인프라: 1명)
- 개요: 빅데이터를 활용한 사용자 맞춤 맥주 추천 플랫폼
최근 주류 시장의 확대로 많은 맥주 종류가 시중에 제공되고 있는 만큼, 사용자가 좋아할 만한 맥주를 추천해주는 플랫폼을 기획 및 개발하였습니다.
- 담당 역할: 프론트엔드 개발
- 기여도: 20%
- 개발 스택: TypeScript, React
- 협업 도구: Notion, Gitlab, JIRA
기능 구현
- 모바일에 맞는 웹앱 형식으로 플랫폼을 구현하였습니다.
- 플랫폼 특성상, 이동 중에 사용할 경우가 더 많다고 판단하엿고, 사용 장벽을 낮추기 위해 웹앱으로 개발하였습니다.
- React를 사용해 SPA를 개발하였고, TypeScript를 사용하여 JS 사용 시 발생할 수 있는 런타임 에러를 사전에 방지하였습니다.
- 미디어쿼리를 통해 사용자의 화면이 너무 작은 경우, 경고 문구를 출력하였습니다.
프로젝트 결과
- 이전 프로젝트의 경험을 발판 삼아, 프로젝트 일정 관리에 신경쓰며 개발을 진행하였습니다. 그 결과 기능 요구서대로 개발을 완료하였고, 팀원 모두 개발 과정에서 소통이 원활하였다는 평가를 남겼습니다.
도담바람
삼성청년SW아카데미/자율 프로젝트
2023.10. ~ 2023.11.
도담바람
- 기간: 2023.10 ~ 2023.11
- 인원: 6명(FE: 1명, BE: 1명, Unity: 4명)
- 개요: 발달 지연 아동을 위한 놀이 기반 인지 훈련 서비스
코로나19로 인해 발달 지연 아동의 수가 늘고, 훈련 기관의 부족, 비싼 비용을 해결하고자 훈련 서비스 앱을 개발하였습니다.
- 담당 역할: 프론트엔드 개발(React Native) - 보호자 전용 앱 개발
- 기여도: 16%
- 개발 스택: TypeScript, React Native
- 협업 도구: Notion, Gitlab, JIRA
기능 구현
- 아동 보호자를 위한 게임 기록 관리 앱을 개발하였습니다.
- 프로젝트는 훈련을 위한 놀이앱(Unity)과 보호자를 위한 기록 관리 앱(React Native)를 각각 개발하여 진행하였습니다. 보호자 전용 앱에서는 게임 기록을 확인하고, 아동 프로필 관리 기능을 갖고 있습니다.
- Keychain을 사용하여 토큰 관리를 진행하였고, 카카오 소셜 로그인, 음성 녹음, 파일 저장 기능을 구현하였습니다.
- 이 과정에서 외부 링크 접근, 녹음, 파일 저장 시 필요한 권한 설정 방법을 익혔습니다.
프로젝트 결과
- 기획 과정에서 전문가의 피드백을 받아 실제 아동에게 도움이 될 수 있다는 의견을 받았습니다.
- 기획과 개발 내용 모두를 인정받아 반에서 1등을 수상하였고, 150팀 중 8팀만 참가하는 전국 결선에 참가하여 입상하는 결과를 가져왔습니다.
포트폴리오
URL
교육
홍천고등학교
고등학교 | 인문계/이과
2014.03. ~ 2017.02. | 졸업
가톨릭대학교
대학교(학사) | 컴퓨터정보공학부
2017.03. ~ 2023.02. | 졸업
삼성청년SW아카데미/멀티캠퍼스
사설 교육 | 웹개발 Java반
2023.01. ~ 2023.12. | 졸업
자격증
정보처리기사
기사 | 산업인력관리공단
2022.06.
OPIc(영어)
IM1 | ACTFL
2023.05.
외국어
영어
일상 회화 가능
자기소개
대학을 졸업한 후, 웹 개발 역량을 심화시키기 위해 SSAFY에 입과하였습니다. 교육을 받으면서 가장 중요하게 생각한 부분은 '지속적인 학습과 협업 능력의 향상'입니다. 현대의 웹 개발 환경은 끊임없이 변화하는 기술 스택으로 인해, 최신 기술을 신속하게 습득하여 프로젝트에 적용하고, 다양한 직무의 팀원들과 효과적으로 협업하는 능력이 필수적이라고 생각하기 때문입니다.
SSAFY에서의 3번의 프로젝트를 통해, React와 TypeScript를 공부하여, 실제로 SPA 개발에 적용해 보았습니다. 이 과정에서 프로젝트 적용 예시를 온라인 강좌를 통해 익히고, 그 과정에서 발생하는 오류를 공식문서를 통해 추가적으로 공부하며 기술을 익혀 나갔습니다. 특히, React를 이용한 SPA 개발은 사용자 경험을 크게 향상시킬 수 있음을 깨달았고, TypeScript를 통해 코드의 안정성을 높이며 팀 내에서의 명확한 커뮤니케이션을 가능하게 하였습니다. 저는 제가 중요하게 생각하는 '지속적인 학습'을 위해 이러한 기술 학습과 적용을 해왔습니다.
또한, 프로젝트 과정에서 협업 능력이 얼마나 중요한지 깨닫게 되는 경험을 했습니다. 첫번째 프로젝트에서 API가 명세와 다르게 개발되어 많은 시간을 낭비했던 적이 있습니다. 이를 계기로, 직접 API 명세 회의에 참여하여 백엔드 개발자와 소통하며 불필요한 과정이 발생하지 않도록 노력했습니다. 또한, 데일리 스크럼을 통해 팀원들의 개발 진행 상황과 어려움을 겪고 있는 부분이 없는지 확인하며 프로젝트를 진행하였고, Gitlab과 Jira를 사용하여 팀 프로젝트를 효과적으로 관리할 수 있게 되었습니다. 이 경험을 통해 다양한 배경과 전문성을 가진 팀원들과 함께 공동의 목표를 향해 나아가기 위해 필수적인 협업 능력을 길러낼 수 있었습니다.
SSAFY 교육 이수 후, Next.js를 공부하고 토이 프로젝트를 진행하면서 이 두가지 능력을 꾸준히 길러오고 있습니다. 사용자 경험을 개선하기 위한 지식을 확장하기 위해 새로운 기술을 학습하며 CSR에서 발생할 수 있는 문제를 해결할 방법에 대해 학습하고 있으며, 이를 적용한 프로젝트에서는 디자이너의 요구사항을 반영한 UI를 제작하고, 기능 구현을 위해 백엔드 개발자와 대화하며 프로젝트를 진행 중입니다. 이러한 노력을 통해 제가 중요시 여기는 역량을 유지 및 발전시키고 있습니다.