프론트엔드 개발자

황교진

안녕하세요, 웹 프론트엔드 개발자 황교진입니다.
모두가 코로나로 인해 힘들어했던 시절, 개발자들이 코로나 맵을 만들어 사회에 기여하는 모습을 보고 큰 감명을 받았습니다. 이를 계기로 기술을 통해 창의적인 가치를 제공하고, 사회에 긍정적인 영향을 미치고 싶어 개발자의 길을 걷기 시작했습니다.

React와 TypeScript를 주력으로 사용하며, 사용자 경험을 향상시키는 웹 애플리케이션 개발에 집중하고 있습니다.
협업과 소통을 중요하게 여기며, 팀원들과 함께 더 나은 결과를 도출하기 위해 항상 노력합니다.

성장하는 환경에서 새로운 도전을 즐기며, 기술을 통해 세상에 기여하는 개발자로 발전해 나가고 싶습니다.

<h4><strong>Description</strong></h4><p><strong>미디어파이프의 포즈랜드마크 모델을 통해 움직임을 분석하고 YOLOv5로 객체를 탐지하여 종합된 결과로 상황을 분석하여, 이에 맞는 음악을 자동으로 재생시켜 사용자의 홈라이프를 보조해주는 서비스.</strong></p><h4 style="text-align: start"><strong>Experience</strong></h4><ul><li><p>스크린세이버 화면 UI 개발</p><p></p></li><li><p>외부 3D Room 을 가져와서 요소 하나하나에 카테고리 명시 및 클릭 시 노래 재생 개발</p></li><li><p>전체적인 UI 퍼블리싱 및 음악 재생 기능 개발 </p><p></p></li></ul><h4><strong>Tech Stack</strong></h4><ul><li><p><code>Javascript</code>,<code>Html</code>,<code>css</code>,<code>Java(jsp)</code>,<code>Python</code></p></li></ul>

2022 K-디지털 해커톤 우수상

개인블로그

깃허브

오늘의 책님 (깃허브)

<h4><strong>Description</strong></h4><p><strong>AI 상황,감정기반 음악 추천 서비스</strong></p><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://player.indj.ai">프로젝트 페이지</a></p><h4 style="text-align: start"><strong>Experience</strong></h4><ul><li><p style="text-align: start">Redux를 활용한 로그인 상태관리 및 청취중인 음악 상태관리</p></li><li><p style="text-align: start">음악추천 AI 챗봇 UI 퍼블리싱 및 API를 통한 추천 기능 개발</p></li><li><p style="text-align: start">피그마를 참고하여 디자인과 기획 의도를 반영한 총 22가지 WebView 프로모션 페이지를 개</p><p>발</p></li></ul><h4><strong>Tech Stack</strong></h4><ul><li><p><code>React</code>,<code>Typescript</code>,<code>Scss</code>,<code>Redux</code></p></li></ul>

[기업] 웹 음악라디오 서비스

<h4><strong>Description</strong></h4><p><strong>서비스의 유저 관리, 프로모션 관리, 음악 관리</strong> 등을 효율적으로 처리할 수 있는 </p><p>관리자 전용 페이지를 설계 및 구현.</p><h4 style="text-align: start"><strong>Experience</strong></h4><ul><li><p>Chart.js와 API를 활용하여 매출, MAU, DAU 데이터를 시각화하고, 대시보드 퍼블리싱</p></li><li><p>사용자에게 실시간 푸시 알림을 전송 및 예약된 시간에 자동 발송가능한 기능을 구현 </p></li><li><p>서비스 보도자료, 프로모션, 음성광고 등등 효율적으로 편리하게 관리할 수 있도록 CRUD 기능을 갖춘 관리페이지 구현</p><p></p></li></ul><h4><strong>Tech Stack</strong></h4><ul><li><p><code>React</code>,<code>antd</code>,<code>redux</code></p><p></p><p></p></li></ul>

[기업] 서비스 관리자 페이지

<h4><strong>Description</strong></h4><p><strong>회사 소개 반응형 웹페이지 개발</strong></p><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://corp.indj.ai">프로젝트 페이지</a></p><h4><strong>Experience</strong></h4><ul><li><p>yarn berry 로 버전 세팅 </p></li><li><p>Infinite Carousel 구현</p></li><li><p>CSS Keyframe 을 활용한 폭죽 애니메이션 구현</p></li><li><p>피그마 적응형 웹 디자인을 통한 UI 퍼블리싱</p></li><li><p>API를 통한 문의 뱃지 애니메이션 UI 퍼블리싱 및 문의 기능 개발</p></li></ul><h4><strong>Tech Stack</strong></h4><ul><li><p><code>React</code>,<code>Typescript</code>,<code>Emotion</code></p><p></p></li></ul><p></p>

[기업] 회사소개 페이지

<h4><strong>Description</strong></h4><p><strong>업체별 고객 운영관리 서비스</strong></p><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.csbye.com">프로젝트 페이지</a></p><h4 style="text-align: start"><strong>Experience</strong></h4><ul><li><p>TanStack Query(React Query)를 사용하여 상담원 QA 캐싱관리 하여 데이터 처리 속도 향상</p></li><li><p>Chart.js 를 활용한 데이터별 시각화</p></li><li><p>Atomic 디자인 패턴을 활용한 컴포넌트 분리 및 재사용성 극대화</p></li><li><p>TailwindCSS를 통한 빠른 Style 적용</p><p></p></li></ul><h4><strong>Tech Stack</strong></h4><ul><li><p><code>React</code>,<code>Typescript</code>,<code>Tailwind CSS</code>,<code>ReactQuery</code>,<code>ChartJs</code>,<code>Redux Toolkit</code></p><p></p></li></ul><p></p>

[기업외주] 상담관리자 페이지

<h4><strong>Description</strong></h4><p>Gatsby 를 활용한 웹 이력서 및 블로그 사이트</p><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://bobcost.kr">프로젝트 페이지</a></p><h4><strong>Experience</strong></h4><ul><li><p>GitAction을 통한 CI/CD 자동화 배포</p><p></p></li><li><p>도메인 설정 및 등록</p></li><li><p>Markdown H1~H6 웹 리모컨 기능 개발</p></li></ul><h4><strong>Tech Stack</strong></h4><ul><li><p><code>React</code>,<code>Gatsby</code>,<code>Emotion</code>,<code>Typescript</code>,<code>yarn</code></p></li></ul>

[개인] 이력서 및 블로그 사이트

<h4><strong>Description</strong></h4><p>질문을 입력하고 나의 고민에대한 재밌는 대답을 알 수 있는 반응형 웹사이트입니다.</p><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://book.bobcost.kr">프로젝트 페이지</a></p><h4><strong>Experience</strong></h4><ul><li><p>rem 단위 및 media 를 활용한 반응형 웹 개발</p></li><li><p>서브도메인 설정 및 적용</p></li><li><p>Zustand를 통한 BookOpenStore, CategoryStore로 나누어서 상태 관리</p></li><li><p>giscus를 활용하여 Script를 적용해 댓글 기능 구현</p></li><li><p>카카오톡 API 를 사용하여 공유 기능 구현</p></li><li><p>다크모드 구현</p></li><li><p>Google Analytics 적용하여 애널리틱스에서 MAU 및 DAU 확인</p></li></ul><h4><strong>Tech Stack</strong></h4><ul><li><p><code>React18</code>,<code>Next15</code>,<code>ModuelCss</code>,<code>Typescript</code>,<code>GitHub</code></p></li></ul>

[개인] 오늘의책님

<ul><li><p>관리자페이지, 웹서비스 등등 CRUD 관련 기능 포트스맨 문서를 통하여 RESTful API 연동</p></li><li><p>총 22가지 WebView 프로모션 페이지를 개발</p></li><li><p>웹 서비스 관련 프로젝트 재사용 가능한 컴포넌트 설계</p><p></p></li></ul>