프론트엔드 개발자

김성현

안녕하세요. FrontEnd 개발자 김성현입니다. 저는 첫발을 내딛은 지 4년 차를 맞이하는 개발자입니다. 
실무에 바로 투입되어 프로젝트를 주도적으로 수행하며 웹/앱 프론트엔드와 서버 기술까지 아우르는 폭넓은 경험을 쌓아가고 있습니다.

혁신적

창의적

성실함

책임감

긍정적

경력기술서

포트폴리오

Frontend 개발자 김성현

<h5>[프로젝트 소개]</h5>병의원 환자들을 위한 심전도 데이터를 실시간으로 확인하고 관리할 수 있는 모바일 애플리케이션.환자들은 앱을 통해 심전도 측정 결과를 시각적으로 확인하고, 건강 정보를 지속적으로 모니터링 가능한 어플리케이션.[역할]1. React Native를 활용한 애플리케이션 개발 전반 담당.2. 실시간 데이터 렌더링과 사용자 경험 최적화를 중심으로 개발.3. REST API를 통해 병원 서버와 데이터를 주고받는 기능 구현.4. UIUX 기획 참여 / Figma를 통한 디자인 수정 및 제공[사용 기술]1. 프레임워크: React Native, TypeScript2. 스타일링: TailwindCSS를 사용한 반응형 스타일링3. 데이터 관리: Redux를 통해 상태 관리 및 비동기 작업 처리4. API 통신: Axios를 사용해 REST API 호출 및 데이터 처리5. 성능 최적화: 메모리 관리 및 렌더링 최소화로 성능 개선6. 배포: Android 및 iOS 앱 빌드7. UIUX: Figma를 사용한 친환경적 UI 제작[성과]1. 사용자 친화적 UI/UX를 제공하여 의료진과 환자의 건강 데이터 접근성을 향상.2. 실시간 데이터 동기화 및 렌더링 최적화로 앱 성능 40% 개선.3. 병원과 환자 간 데이터 교환의 신뢰성과 속도 향상.[채용직무와 연계성]React Native를 활용해 모바일 중심의 환자 관리 앱을 개발한 이 프로젝트는 모바일 애플리케이션 개발 직무와 직접적으로 연관됩니다. Redux를 활용한 상태 관리와 REST API를 통한 실시간 데이터 처리 경험은 데이터 기반의 모바일 서비스 개발 역량을 보여줍니다. TailwindCSS를 사용해 반응형 스타일링을 구현하고 Android 및 iOS 앱을 빌드한 경험은 크로스 플랫폼 애플리케이션 개발자로서의 강점을 입증합니다. 특히, 사용자 친화적인 UI/UX 설계와 성능 최적화를 통해 앱의 품질을 향상시킨 점은 직무에서 요구하는 사용자 경험 중심의 개발 능력을 나타냅니다.<hr>

환자 전용 어플리케이션 제작

[프로젝트 소개]병의원 관리자가 심전도 데이터를 효과적으로 조회하고 관리할 수 있는 웹 백오피스.환자별 데이터 관리와 통계 시각화를 통해 병원의 운영 효율성을 극대화하도록 설계.[역할]1. React와 TypeScript를 활용한 관리자 웹 플랫폼 개발 전반 담당.2. Redux를 통해 데이터 상태 관리와 비동기 작업 구현.3. Yup 라이브러리를 통해 입력 데이터 유효성 검증 기능을 개발.4. UIUX 기획 참여 / Figma를 통한 디자인 수정 및 제공5. 프로젝트 기획서 작성 및 유지보수6. 소프트웨어 납품을 위한 서버 세팅 및 유지보수[사용 기술]1. 프레임워크: React, TypeScript2. 상태 관리: Redux, Redux-Saga를 활용한 상태 관리 및 비동기 로직 처리3. 스타일링: TailwindCSS를 사용한 디자인 일관성 유지4. 유효성 검증: Yup을 통한 입력값 유효성 검증5. API 통신: REST API와의 연동으로 실시간 데이터 업데이트6. 시각화: Chart.js를 활용한 데이터 시각화7. UIUX: Figma를 사용한 친환경적 UI 제작8. 이미지 관리 : Docker를 사용한 이미지 관리 / Docker Compose를 활용한 이미지 세팅9. Server 세팅 : Window server / 리눅스(ubunutu server)를 사용한 소프트웨어 서버 세팅[성과]1. 관리자 UI 개선을 통해 데이터 관리 효율성 30% 향상.2. Redux와 Yup을 사용한 데이터 관리 및 검증으로 시스템 안정성 확보.3. 실시간 데이터 반영 및 시각화로 의료진의 업무 시간 단축.[채용직무와 연계성]이 프로젝트는 병의원의 심전도 데이터를 효율적으로 관리하는 백오피스를 개발하며, 데이터 관리와 분석, 그리고 사용자 경험 최적화를 통해 병원의 운영 효율성을 극대화하는 데 기여했습니다. 채용직무와의 연계성을 살펴보면, React와 TypeScript, Redux를 활용한 상태 관리 및 비동기 작업 처리가 프론트엔드 개발자로서의 핵심 기술 요건을 충족합니다. 또한, TailwindCSS와 Chart.js를 활용한 UI/UX 디자인 및 데이터 시각화 경험은 직무에서 요구하는 사용자 중심의 웹 개발 역량과 맞닿아 있습니다. Docker를 통한 이미지 관리 및 서버 세팅 경험은 DevOps 및 서버 관리의 기초를 이해하는 데 큰 역할을 했으며, 이를 통해 백엔드와의 원활한 협업 능력을 입증할 수 있었습니다.<hr>

관리자(백오피스) 사이트 제작

[프로젝트 소개]건진센터에서 대규모 환자의 심전도 데이터를 관리하고 분석할 수 있도록 설계된 웹 플랫폼.다량의 데이터를 빠르게 필터링하고 통계적으로 분석할 수 있는 기능을 제공.[역할]1. React와 TypeScript를 활용해 대규모 데이터 처리에 최적화된 웹 애플리케이션 개발.2. TailwindCSS를 사용하여 직관적이고 반응형 UI 개발.3. REST API를 연동해 실시간 데이터 처리를 구현.4. UIUX 기획 참여 / Figma를 통한 디자인 수정 및 제공5. 프로젝트 기획서 작성 및 유지보수6. 소프트웨어 납품을 위한 서버 세팅 및 유지보수[사용 기술]1. 프레임워크: React, TypeScript2. 상태 관리: Redux를 사용한 대규모 데이터 관리3. 스타일링: TailwindCSS로 효율적인 스타일링 구현4. API 통신: Axios 및 REST API를 통한 데이터 처리5. 유틸리티: Lodash를 활용한 데이터 필터링 및 정렬6. 성능 최적화: Lazy Loading 및 코드 스플리팅을 통한 페이지 로딩 속도 개선7. UIUX: Figma를 사용한 친환경적 UI 제작8. 이미지 관리 : Docker를 사용한 이미지 관리 / Docker Compose를 활용한 이미지 세팅9. Server 세팅 : Window server / 리눅스(ubunutu server)를 사용한 소프트웨어 서버 세팅[성과]1. 대규모 데이터 처리 속도를 최적화하여 데이터 로드 시간 35% 단축.2. 필터링 및 검색 기능 개선으로 의료진의 데이터 분석 시간 단축.3. UI/UX 최적화로 사용자 편의성을 높여 병원 운영 효율화에 기여.[채용직무와 연계성]대규모 데이터 처리와 분석을 목표로 한 본 프로젝트는 데이터 중심 웹 개발을 요구하는 IT 직무와 긴밀히 연결됩니다. React와 Redux를 활용한 대규모 상태 관리 경험은 복잡한 비즈니스 로직을 처리하는 데 필요한 전문성을 증명합니다. 또한, TailwindCSS로 반응형 UI를 개발하고, REST API와 Axios를 사용해 실시간 데이터 처리를 구현한 경험은 사용자의 요구를 충족하는 웹 애플리케이션 개발 능력을 입증합니다. Lazy Loading과 코드 스플리팅을 통해 성능 최적화를 경험한 부분은 고품질의 웹 서비스를 제공하는 데 핵심적인 역량입니다. 서버 세팅 및 유지보수 경험 또한 백엔드와의 협업 및 시스템 안정성 관리 측면에서 강점을 보입니다.<hr>

건강 검진센터 전용 소프트웨어 사이트 제작

[프로젝트 소개]1. 외래 환자 전용 심전도 데이터 관리 웹 플랫폼으로, 의료진이 실시간 데이터를 조회하고 진단을 지원하는 기능을 제공.2. 데이터의 시각화와 입력 유효성 검증을 통해 진단 효율성을 높임.[역할]1. React와 TypeScript를 기반으로 웹 애플리케이션 개발 전반 담당.2. Material-UI(MUI)를 활용한 컴포넌트 기반 UI 설계 및 스타일링.3. Yup을 사용한 폼 유효성 검증 기능 구현.4. Redux를 통해 비동기 데이터 처리 및 상태 관리.5. UIUX 기획 참여 / Figma를 통한 디자인 수정 및 제공6. 소프트웨어 납품을 위한 서버 세팅 및 유지보수[사용 기술]1. 프레임워크: React, TypeScript2. 상태 관리: Redux, Redux-Saga3. 스타일링: Material-UI(MUI), SCSS4. 유효성 검증: Yup 라이브러리를 사용해 입력 데이터 검증5. API 통신: REST API를 통한 데이터 업데이트6. 성능 최적화: 메모리 최적화 및 불필요한 리렌더링 최소화7. UIUX: Figma를 사용한 친환경적 UI 제작8. 이미지 관리 : Docker를 사용한 이미지 관리 / Docker Compose를 활용한 이미지 세팅9. Server 세팅 : Window server / 리눅스(ubunutu server)를 사용한 소프트웨어 서버 세팅[성과]1. 직관적 UI 설계를 통해 의료진의 데이터 접근 시간 50% 단축.2. 데이터 유효성 검증으로 입력 오류 감소 및 신뢰도 확보.3. 사용자 경험 개선으로 병원 외래 진료 프로세스의 효율성 극대화.[채용직무와 연계성]외래 환자 전용 데이터를 관리하는 본 프로젝트는 의료 데이터 관리와 시각화, 그리고 반응형 웹 개발의 전문성을 강조합니다. Material-UI를 활용한 컴포넌트 기반 UI 설계 경험은 기업 내 디자인 시스템 구축과 유지보수에 기여할 수 있는 역량을 나타냅니다. Yup을 통한 입력 유효성 검증과 Redux-Saga를 활용한 비동기 데이터 처리 경험은 데이터 정확성과 시스템 안정성을 보장하기 위한 필수 기술입니다. 또한, UI/UX 기획에 참여하고 Figma를 통해 친환경적이고 사용자 친화적인 인터페이스를 설계한 경험은 직무에서 요구하는 협업 능력과 디자인 감각을 강조합니다.<hr>

병원 - 외래 전용 소프트웨어 사이트 제작

[프로젝트 소개]개인 및 사업자 고객을 위한 다양한 웹사이트 개발 프로젝트로, 채용 정보 제공 플랫폼, 부동산 분양 정보 사이트 등을 개발.사용자의 직관적이고 효율적인 데이터 접근성을 높이기 위해 반응형 UI와 안정적인 데이터 통신을 중점적으로 구현.[역할]1. 프론트엔드 개발자로서 웹사이트의 UI/UX 설계 및 구현 담당.2. 사용자 요구사항에 맞는 인터페이스를 설계하고 데이터 통신을 통해 콘텐츠를 동적으로 제공.[사용 기술]1. 프레임워크: React, TypeScript2. 상태 관리: Redux를 사용한 비동기 상태 관리3. 스타일링: Styled-Components, Material-UI(MUI), SCSS4. 데이터 통신: REST API와 Axios를 활용해 클라이언트-서버 간 데이터 연동5. 유효성 검증: Yup을 사용한 데이터 입력 검증6. 빌드 및 배포: npm과 Webpack을 통해 번들링 및 빌드 최적화[성과]1. React와 Redux를 활용한 비동기 데이터 처리로 페이지 로딩 속도 30% 이상 개선.2. Styled-Components와 MUI를 사용해 반응형 웹 디자인을 구현, 모바일 사용자 체류 시간 증가.3. 데이터 검증을 통해 사용자 입력 오류를 줄여 서비스 품질을 향상시킴.[채용직무와 연계성]채용 정보 제공 플랫폼 및 부동산 분양 정보 사이트 개발은 사용자의 효율적인 데이터 접근성을 강화하는 데 초점을 맞춘 프로젝트입니다. React와 Redux를 활용한 비동기 데이터 관리와 Styled-Components 및 Material-UI를 사용한 스타일링 경험은 직무에서 요구하는 최신 웹 기술에 대한 숙련도를 보여줍니다. Yup을 통한 데이터 검증과 REST API를 활용한 클라이언트-서버 간 데이터 연동 경험은 안정적이고 신뢰할 수 있는 웹 서비스를 제공하는 능력을 입증합니다. 반응형 UI 설계와 페이지 로딩 속도 최적화 경험은 사용자 중심의 웹사이트 개발 역량과 맞닿아 있습니다.<hr>

개인 & 사업자 웹 사이트 개발

[프로젝트 소개]피타소프트의 기업 웹사이트와 클라우드 서비스, 이벤트맵, SIM 사용자 및 관리자 플랫폼 등을 개발 및 유지보수.기업의 E-commerce 플랫폼 개발과 3rd Party API 연동을 통해 글로벌 결제 시스템도 구현.[역할]1. 기업 웹사이트 개발 및 운영, E-commerce 플랫폼 개발.2. 워드프레스 기반으로 WooCommerce와 결제 시스템을 연동하고, 유지보수를 통해 서비스 품질 개선.3. SIM 사용자 및 관리자 사이트(백오피스) 개발로 효율적인 데이터 관리 환경 제공.4. 이벤트맵(이벤트 관리 및 SNS 소프트웨어) 개발로 효율적인 이벤트 관리 및 공유 기능 제공[사용 기술]1. 프레임워크: React, TypeScript, PHP, WordPress2. E-commerce: WooCommerce, Stripe API, Klarna API, PayPal API3. 상태 관리: Redux 및 Context API를 활용한 상태 관리4. 스타일링: TailwindCSS, Styled-Components, Material-UI(MUI), CSS5. 데이터 통신: REST API, AWS API를 사용한 데이터 처리 및 통신6. 유효성 검증: Yup을 사용해 입력 검증 로직 구현7. 배포 및 유지보수: WordPress 및 서버 유지보수, Docker를 통한 개발 환경 설정[성과]1. 글로벌 결제 시스템 구현으로 Stripe, PayPal, Klarna 연동을 통해 결제 성공률 50% 이상 향상.2. WooCommerce와 WordPress를 사용해 E-commerce 사이트를 구축, 제품 판매 및 결제 처리 자동화.3. SIM 관리자 및 사용자 사이트 개발로 데이터 관리 효율성 향상 및 운영 시간 단축.4. UI/UX 개선 프로젝트를 통해 기업 웹사이트의 사용자 이탈률을 감소시킴.[채용직무와 연계성]본 프로젝트는 E-commerce 플랫폼 개발과 유지보수를 통해 기업의 글로벌 서비스를 지원하는 역할을 수행했습니다. WooCommerce와 Stripe, PayPal, Klarna API를 연동한 경험은 결제 시스템 구현과 관련된 IT 직무에 필수적인 역량을 보여줍니다. React와 TypeScript를 사용한 웹사이트 및 플랫폼 개발, TailwindCSS와 Styled-Components를 활용한 UI/UX 설계 경험은 직무의 핵심 기술 요구를 충족합니다. 서버 관리와 Docker를 활용한 개발 환경 설정 경험은 DevOps 지식을 바탕으로 한 원활한 협업 능력을 입증합니다.<hr>

기업의 웹 사이트 & 소프트웨어 개발 및 유지보수

[프로젝트 소개]정부 주관 국가 과제 사이트로, 데이터 시각화와 대규모 정보 처리를 통해 특정 산업 분야의 데이터를 사용자에게 제공하는 플랫폼.사용자들이 실시간 데이터를 확인하고 필터링 및 분석할 수 있도록 웹사이트를 설계.[역할]1. 프론트엔드 개발자로서 사용자 인터페이스와 데이터 시각화 기능을 담당.2. GraphQL과 React를 사용해 대규모 데이터 통신과 컴포넌트 개발을 수행.[사용 기술]1. 프레임워크: React, TypeScript2. 스타일링: Styled-Components, Material-UI(MUI), CSS3. 데이터 통신: GraphQL, REST API4. 컴포넌트 관리: StoryBook을 활용해 재사용 가능한 컴포넌트 설계5. 유틸리티: Lodash를 사용해 데이터 필터링 및 정렬 기능 구현6. 시각화: Chart.js를 사용해 데이터 시각화 기능 제공[성과]1. GraphQL을 활용해 데이터 요청 최적화 및 네트워크 트래픽을 40% 절감.2. StoryBook 기반 컴포넌트 문서화를 통해 코드 재사용성 30% 향상.3. 데이터 필터링과 시각화를 통해 사용자의 데이터 분석 시간 단축.4. 정부 기관으로부터 직관적인 UI와 성능 최적화에 대한 긍정적인 평가를 받음.[채용직무와 연계성]GraphQL과 React를 사용해 대규모 데이터를 처리한 본 프로젝트는 데이터 중심 애플리케이션 개발 직무와 긴밀히 연결됩니다. 데이터 시각화를 위해 Chart.js를 활용한 경험은 복잡한 데이터를 직관적으로 표현하는 능력을 보여줍니다. StoryBook을 통한 컴포넌트 관리와 Lodash를 활용한 데이터 필터링 및 정렬 경험은 직무에서 요구하는 코드 재사용성과 데이터 처리 능력을 강조합니다. GraphQL을 통해 네트워크 트래픽을 절감하고 데이터 요청을 최적화한 점은 고성능 웹 애플리케이션 개발 역량을 나타냅니다.<hr>

국가 과제 사이트 개발

<h4>[Frontend 업무]</h4><ol><li>소프트웨어 환경 웹사이트 제작<ol><li>병의원 사이트 </li><li>백오피스(Admin) 사이트</li><li>건진센터 사이트</li><li>사내 시스템 사이트</li></ol></li><li>병의원 환자 전용 어플리케이션 제작</li><li>UX 컴포넌트 제작</li></ol>[UIUX]<ol><li>Figma를 활용한 UIUX 제작</li></ol>[기획 &amp; QA]<ol><li>웹 사이트 제작 관련 기획 / 매뉴얼 작성, 유지보수</li><li>Browser Stack을 활용한 QA 진행</li><li>QA 리스트 작성</li></ol>[Server 업무]<ol><li>Window Server를 사용한 서버 환경 구축</li><li>Linux(Ubuntu)를 사용한 서버 환경 구축</li></ol>[이미지 관리]<ol><li>Docker, Docker Compose를 활용한 이미지 관리</li></ol>

<h4>[Frontend 업무]</h4><ol><li>개인&amp;사업자 웹사이트 제작<ol><li>플랫폼 사업 사이트 </li><li>부동산 분양 사이트</li></ol></li><li>기업 대상 웹사이트 제작<ol><li>홈페이지 관리 &amp; 제작</li><li>백오피스 사이트 관리 &amp; 제작</li><li>고객 전용 사이트 관리 &amp; 제작</li><li>UIUX 개선</li></ol></li><li>국가과제 사이트 제작<ol><li>오마하 처치(인하대) mobile view 사이트 제작</li><li>휴먼브릿지 사이트 제작</li></ol></li></ol>[Wordpress 업무]<ol><li>Wordprss를 사용하여 Shop 사이트 운영</li><li>Woocommece를 사용하여 결제 플랫폼 운영</li><li>Stripe, Paypal, Klarna API를 활용하여 결제 수단 연결</li></ol>[QA]<ol><li>Browser Stack을 활용한 QA 진행</li><li>QA 리스트 작성</li></ol>