미리보기
기본 정보
[사용자의 사용성에 기반하여 고민하고, 결과보다 정의하기에 힘쓰려 노력합니다.] - 웹(React, Next) 기반 애플리케이션을 직접 개발하고 배포(aws, github actions, vercel)해 본 경험이 있습니다. - 정보를 바탕으로 오류 상황을 개선 및 최적화하는 것을 지향합니다. - 오늘보다 내일이 기대되는 개발자가 되는 것을 목표로 삼고 학습합니다. | 개인 블로그: https://velog.io/@gyojinnk/posts
기술 스택
Next.js, React, TypeScript, JavaScript, tailwind-css, zustand, React Context, HTML/CSS, MySQL, PostgreSQL, Figma, Notion, Slack, GitHub, vercel
경력
코드스테이션
팀원 | 개발팀
2024.04. ~ 2024.06. (3개월)
Collaboration
디자이너와의 원활한 소통을 통해 프로젝트 요구사항을 명확히 파악
디자인 툴(Figma, Sketch 등)을 활용한 디자인 시안 검토 및 피드백 제공
정기적인 회의를 통해 디자인과 개발 간의 간극을 최소화하여 효율적인 작업 진행
디자이너와의 협업을 통해 사용자 경험을 최적화하고, 최종 제품의 품질을 높임
협업 과정에서 As-is, To-be와 같은 커뮤니케이션 룰을 도입하여 효율성 증대
현재 상태(As-is)와 목표 상태(To-be)를 명확히 정의하여 팀원 간 명확한 이해 도모
문서화 및 시각화를 통해 복잡한 요구사항을 체계적으로 관리
리뷰 과정에서 명확한 기준을 제공하여 피드백의 질 향상 및 개발 속도 증가
Frontend
Next.js를 이용하여 서버 사이드 렌더링 및 정적 사이트 생성 구현
TailwindCSS를 활용하여 효율적으로 웹 페이지 퍼블리싱
프로젝트의 요구사항에 맞춰 적절한 외부 라이브러리 사용하여 개발 생산성 향상
디자이너와의 협업을 통해 디자인 시안을 검토하고 이를 코드로 구현
Backend
NestJS를 사용한 RESTful API 개발
Supabase와 PostgreSQL을 이용한 데이터베이스 관리
Prisma ORM을 활용한 데이터베이스 연동 및 관리
프로젝트
React + TS + Firebase를 이용한 블로그 & 커뮤니티 - ArNook
개인
2024.02. ~ 2024.02.
사용 기술
TS, Vite, React, React Context API, React Query, Tailwind CSS, Firebase, Amazon S3, Amazon
Cloud Front, Github Actions, Cypress
debounce 기법을 이용한 불필요한 함수 호출 해결
문제 상황
모든 사용자들 중 특정 사용자를 검색할 수 있도록 검색 기능 구현
사용자가 검색창에 입력할 때마다 onChange 호출
onChange가 호출될 때마다 사용자 리스트에 불필요한 filter 연산 수행
해결 방안 고민
매 입력마다 함수가 호출되는 것을 방지
사용자의 입력이 끝나면 filter 연산 실시
해결책
lodash 라이브러리의 debounce 사용
debounce는 특정 함수 호출 시 지정한 시간이 지나면 함수 실행
사용자가 입력을 마쳤다고 예상되는 시간을 설정
입력 시 호출되는 set함수의 호출 횟수를 효과적으로 개선
react-image-file-resizer 를 이용한 이미지 최적화 및 렌더링 속도 문제
→ 이미지를 최적화하여 렌더링 속도를 개선합니다.(2.4s -> 1.5s)
문제 상황
게시물 썸네일 이미지를 업로드하고 이를 불러오는 과정에서 이미지 크기가 큰 경우 속도 렌더링 속도 저하
해결 방안 고민
이미지 압축 툴 사용하기
파일 형식 변환하기
해결/개선
react-image-file-resizer는 클라이언트 측에서 이미지를 최적화하고 서버로 전송하기 때문에 네트워크 트래픽 절약
유연한 사용으로 이미지의 너비, 높이, 출력 형식, 품질 등 직접 설정 가능
프로젝트에 적용하여 이미지를 최적화하여 렌더링 속도 개선(2.4s -> 1.5s)
사용자가 원하는 검색어 키워드에 대한 관심도를 데이터화하여 사용자에게 시각적으로 제공하는 사이트 - yozoom
개인
2023.10. ~ 2023.12.
사용 기술
React, Next.js, Django, tensorflow, nivoChart
서버와 클라이언트 환경의 CORS 및 Proxy 문제 해결
문제 상황
배포환경에서의 서버와 API 통신 테스트 중 CORS error 발생
비정상적인 동작으로 원하는 응답을 받을 수 없음
해결 방안 고민
해당 문제는 Javascript의 보안상의 제한으로 발생
XMLHttpRequest, Fetch API 요청은 Same-Origin으로 기본적으로 제한
해결/개선
서버(Django) 측에서 배포한 도메인의 요청을 허용
ALLOWED_HOSTS에 배포 도메인을 추가
차트 라이브러리를 활용한 시각적 데이터 제공
요구사항
많은 양의 데이터를 사용자에게 가시적인 인터페이스로 제공
해결 방안 고민
chart.js를 이용하여 데이터 시각화
nivo를 이용하면 공식 사이트에서 사전에 커스터 마이징 가능
해결/개선
nivo를 이용하여 데이터 시각화를 편리하게 구현
문자형 데이터를 가시적으로 사용자에게 제공
ETRI API를 이용한 한국어 발음 훈련을 위한 음성 인식 사이트 - Baleum
협업
2023.04. ~ 2023.07.
사용 기술
React, etri API, TS, HTML/CSS, AWS S3, Github Actions
내장 녹음 라이브러리와 wavEncoder 라이브러리를 이용한 사용자 녹음 파일 encoding
문제 상황
기존 방법은 녹음 파일을 서비스에 사용자가 직접 업로드하는 방식
사용자 사용성 측면에서 발음을 실시간으로 녹음하고 피드백을 전달해야 한다고 판단
해결 방안 고민
API 또는 라이브러리를 이용하여 실시간으로 녹음하고 서버로 전송
버전 충돌 없이 npm 패키지로 사용 가능한 wavEncoder와 내장 녹음 라이브러리를 채택
구현
wavEncoder로 사용자가 실시간으로 녹음한 파일을 encoding 한 후 서버로 전달하도록 구현
SpeechSynthesisUtterance를 통한 사용자의 발음 예제의 TTS 기능 제공
문제 상황
한글을 모르는 외국인 사용자를 고려
평가 예제는 한글로 제공되어 외국인 사용자의 사용성 측면에서 실용적이지 못함
해결 방안 고민
여러 국가의 발음 기호 삽입은 비효율적
발음 소리를 추가로 제공한다면 많은 외국어 발음 기호를 해결할 수 있음
해결/개선
SpeechSynthesisUtterance 라이브러리를 이용
사용자에게 평가 예제의 정확한 발음을 음성으로 제공 (TTS)
포트폴리오
교육
인하공업전문대학
대학교(전문학사) | 컴퓨터 정보과
2019.03. ~ 2024.02. | 졸업
대외활동
2024 블레이버스 MVP 개발 해커톤
블레이버스
프로젝트 주제
치매 노인을 위한 알약 디스펜서 애플리케이션
프로젝트 개요
PM, UI/UX 디자이너, 개발 (8인 협업 프로젝트)
MVP(최소 기능 제품) 개발을 통해 시장 상품성을 검증하는 해커톤에 참여
보호자가 원격으로 하드웨어를 제어할 수 있는 웹 애플리케이션으로, 정기복용 및 비정기복용 관리, 알림 설정, 약 검색/등록 기능을 포함
주요 활동 및 성과
기술 스택
React.js, Zustand, Tanstack Query, Tailwind CSS
기능 구현
약 검색 및 등록, 음성 알림 녹음 기능 개발
음성 녹음 기능 구현 및 API 연동 작업 수행
협업
프로젝트 매니저(PM), 디자이너, 백엔드 개발자와의 긴밀한 협업을 통해 요구사항을 명확히 이해하고, 사용자 경험을 향상시키는 데 기여
팀원들과의 긴밀한 협업을 통해 기능의 완성도를 높이고, 최종 발표에서 긍정적인 피드백을 받음
2023 하계학술대회 우수논문상
한국컴퓨터정보학회
- 외국인들의 한국어 발음 학습을 위한 음성 인식 웹 사이트(바름)를 개발하여 2023 하계학술대회에서 우수논문상 수여 🔗 논문링크
2023 서울 Web 3.0 페스티벌 해커톤
서울특별시, 서울디자인재단, ㈜바오밥파트너즈
- 프론트엔드 개발자로 참가하여 디자인 담당 팀원과 백엔드(스마트 컨트랙트) 담당 팀원과의 원활한 의사소통에 기여
- 디자인 산출물을 고려하여 일관성 있는 웹 페이지를 개발하고 React.js를 이용한 비동기식 데이터 처리 및 SPA 개발에 집중
- Web 3.0의 블록체인 기술을 실제 프로젝트에서 사용한 경험
- 주어진 기한 내에 프로젝트를 데모까지 완료해야 하는 상황(Dead Line)을 이해하고 경험할 수 있는 기회
자격증
정보처리산업기사
- | 한국산업인력공단
2024.06.
Graphic Design and Illustration using Adobe Illustrator CC 2015 취득
- | Adobe
2021.04.
Visual Design using Adobe Photoshop CC 2015 취득
- | Adobe
2021.04.
자기소개
역량 함양과 경험에 진심!
저는 웹 개발, 특히 React 기반의 애플리케이션 개발에 열정을 가지고 있는 개발자입니다. AWS와 GitHub Actions, Vercel을 사용하여 직접 애플리케이션을 배포한 경험이 있으며, 최근 실무 경험을 통해 Next.js와 Typescript를 이용한 서버 사이드 렌더링 및 정적 사이트 구현에도 실무에 필요한 능력들을 갖추었습니다.
React를 이용한 프로젝트에서는 성능 최적화와 테스트를 적용했습니다. react-image-file-resizer 라이브러리를 이용하여 과도하게 큰 이미지 파일로 인한 렌더링 지연을 방지하고 전체적인 페이지 성능을 향상시켜 FCP 지표를 17.9s에서 5.3s로 개선했습니다. 또한 SEO에 불리한 CSR의 단점을 인지하고, 그것을 극복하기 위해 react-helmet, sitemap 라이브러리를 사용하여 SEO 지표를 91점까지 향상시켰습니다.
저는 실무 경험을 통해 Next.js를 활용한 프론트엔드 개발과 디자인 가이드(Figma)에 기반한 퍼블리싱의 기술적 도약을 이뤘습니다. 또한 safe-actions를 이용하여 API 호출의 안정성을 향상시킴으로써 사용자의 정보를 안전하게 입력할 수 있도록 기존의 서비스를 고도화했습니다. Context API, Zustand를 활용하여 Props driling을 방지하고 전역 수준의 관리가 필요한 상태들(session, browser theme 정보 등)을 효과적으로 핸들링 했습니다. 마지막으로 Figma 디자인 가이드를 확인하고 정확하게 구현하는 경험을 통해 협업능력과 퍼블리싱 완성도를 향상시켰습니다.
자신의, 자신에 의한, 자신을 위한 나만의 Core Value
◆ “소통과 화합”
“공은 사람보다 빠르다. 여기서는 패스를 해야 한다. 우리는 팀이야! 원맨쇼가 아니라고!” - 영화 <골>. 이는 감명 깊게 본 영화의 명대사로 저의 좌우명과 같습니다. 아무리 뛰어난 사람이라도 혼자서는 한계에 부딪히기 마련입니다. 업무에 대한 공감과 몰입도 중요하지만 함께하는 구성원과의 공감과 몰입 또한 높은 가치로 생각합니다. 저는 학부생 시절에 활동했던 전공 동아리에서 팀 내의 정서적 유대감을 형성하기 위해 노력했습니다. 스터디 시작 전에 “아이스브레이킹 시간”을 만들어 팀원들이 자유롭게 대화하거나 게이미피케이션 요소가 담긴 “근황 챌린지”를 진행하였습니다. 이러한 노력은 장벽 없는 공유, 정서적 유대감을 조성하여 활발한 소통과 스터디 효율 향상이라는 결과로 이어졌습니다.
◆ “잠재력과 성장 욕구”
꾸준한 학습을 통해 TIL(Today I Learned)를 블로그에 아카이빙하고 있습니다. 프론트엔드뿐만 아니라 개발자 한 개인으로서, 성장에 관한 모든 내용들이 저의 학습욕구를 불태웁니다. 최근 GraphQL에 대한 학습으로 REST API의 허점인 Over-fetching과 Under-fetching을 어떤 방법으로 해소하는지에 대하여 흥미롭게 학습했습니다. 또한 2023 서울 Web 3.0 페스티벌 해커톤에 팀 리더로 참가하여 Web 3.0과 블록체인 기술에 대해 학습하고 개발에 적용했습니다. 이러한 저의 성장과 학습에 대한 열망을 BARO AI에서 실현하고 싶습니다.
◆ “인간(사용자)을 배려하는 상상력”
저는 항상 사용자의 편의성과 경험을 최우선으로 고려하며 개발을 진행해 왔습니다. 안전한 API 호출을 통해 사용자의 정보를 보호하고, 직관적인 UI/UX 설계를 통해 사용자가 쉽게 사용할 수 있는 솔루션을 제공하는 데 중점을 두었습니다. 특히 한국어 발음 평가 웹사이트 프로젝트를 진행하면서, 한국어 발음 평가라는 특성상 외국인 사용자가 보고 따라 읽는 스크립트를 정확하게 전달해야 했습니다. 많은 시행착오 끝에 TTS(Text to Speech) 기능을 도입하였습니다. 한국어 스크립트를 정확한 발음으로 제공함으로써, 다양한 국적의 외국인들이 한국어를 읽지 못하더라도 버튼 클릭 하나로 본 서비스를 이용할 수 있도록 하였습니다. 이러한 경험을 통해, 사용자 중심의 개발을 실천하며 인간 중심의 상상력을 발휘하고 있습니다.