안녕하세요.
개발자 김성연입니다.
서울에서 5년차 웹 프론트엔드 엔지니어로 일하고 있습니다.
효율적인 개발을 좋아하며, 빠르게 변화하는 환경에도 유연하게 적응하려
노력합니다.
About me
| • Email. | 66syki@gmail.com |
| • Portfolio. | https://ksy17-portfolio.netlify.app |
| • 생일. | 1995. 06 |
| • 학력. | 한경국립대학교 컴퓨터공학과 졸업 |
| • 자격증. | 정보처리기사 취득 |
Skills
Frontend
Backend & Deployment
Communication
Work Experience
씨엔알리서치
Frontend Developer - 현재TDLM
- 현재Description
임상시험의 설계, 운영, 변경 이력 등 라이프사이클 전반을 통합 관리하는 플랫폼인 TDLM(Trial Design & Lifecycle Management)을 진행하고 있습니다.
What did I do
- 임상시험 설계·관리 도메인을 기반으로 한 TDLM 프론트엔드 개발 전담
- 임상 프로토콜, 설계 정보, 변경 이력 등을 관리하는 주요 화면 및 기능 구현
Tech Stack
Next.js, React, Typescript, Redux, Jest, MUI
imEDC, imLink
-Description
여러 기관에서 범용적으로 사용 가능한 임상시험 전자데이터 수집 시스템(EDC) 및 다양한 임상 데이터 포맷 간 매핑을 구현하는 imLink 프로젝트를 진행했습니다.
What did I do
- 다양한 관계의 컴포넌트를 동적으로 구성할 수 있는 CRF 빌더를 구현해, 복잡한 임상 데이터 양식을 유연하게 생성 가능하도록 함
- CRF(증례기록서) 항목별 방문 설정 매트릭스를 구현하고, 사용자 편의성 개선
- Zod와 React Hook Form을 활용한 폼 입력 데이터 검증 및 처리
- Figma, Jira, Confluence을 통한 협업 진행
Tech Stack
Next.js, React, Typescript, Tanstack Query, MUI
Platform
-Description
사내 서비스들을 하나로 통합하는 종합 포털을 개발했습니다. 기획 단계부터 참여하여 애자일 방법론을 적용해 개발을 진행했으며, 기능별 문서화 작업도 꾸준히 진행했습니다.
What did I do
- 공통 레이아웃 및 컴포넌트 개발
- 관리자 및 사용자 페이지 구현 (고객사, 사용자, 서비스, 공지)
- 기타 기능 구현 (로그인, Footer, Header, 전역 폰트, 이메일 템플릿, 세션 타이머 등)
- Zod와 React Hook Form을 활용한 폼 입력 데이터 검증 및 처리
- 텍스트 입력 디바운싱, 리액트 쿼리 캐싱으로 성능 최적화
- i18next를 이용한 다국어 기능 구현
- ESLint, lint-staged, Husky를 활용한 코드 품질 관리 자동화
- Figma, Jira, Confluence를 통한 협업 진행
Tech Stack
Next.js, React, Typescript, Tailwind CSS, Tanstack Query, MUI Minimals, MUI X Pro
서울대학교병원 EDC
-Description
서울대학교병원 전용으로 맞춤 개발하는 차세대 임상시험 전자데이터 수집 시스템(EDC) 개발 팀에 2달간 프론트엔드 개발 지원을 했습니다.
What did I do
- MUI Minimal 컴포넌트를 기반으로 기능, 디자인, 오류 수정 작업 진행 (그리드, 페이지네이션, 버튼, 인풋, 스크롤 등)
- Figma, Jira, Confluence을 통한 협업 진행
Tech Stack
Next.js, React, Redux Toolkit, MUI Minimals
imtrial
-Description
임상 시험 분야 연구 데이터의 표준화와 분석을 자동화하는 플랫폼인 imtrial에서 새로운 기능 개발 및 유지보수를 담당하였습니다.
What did I do
- 버전이 다른 두 CRF(증례기록서)의 차이점을 시각적으로 표시해주는 변경대비표 기능 구현
- 복잡한 조건에 따라 시각적으로 표시되는 방법이 달라지는 CRF 지속적으로 업데이트
- CRF를 제어할 수 있는 GUI 페이지 업데이트 (AUIGrid 사용)
- BOIM API 연결 화면 구현 및 미리보기 화면을 컴포넌트화 후 imtrial 화면에 삽입
- 기타 기능 추가(커멘트 버전 관리, 버전별 문서 다운로드, 검색, 필터 등)
- 소프트웨어 패키징에 참여(스토리보드, 기능명세서 작성 등)
- Redmine과 Yona를 활용한 버전 관리 및 협업 진행
Tech Stack
React, JavaScript
More Info (소개 영상)More Info (소개 리플렛)
More Info (imagineer 행사)
DDF Connectathon
-Description
CDISC에서 새로운 임상 데이터 표준인 USDM 1.0 표준을 릴리즈하여
각 제약/임상 업체에서 이를 활용한 프로그램을 개발하고,
SDR RI 서버와 통신하여 상호 운용성을 확인해보는
DDF
Connectathon 대회에 프론트엔드 역할로 참가했습니다.
(FE 2명, BE 2명)
What did I do
- USDM 데이터를 제어할 수 있는 화면 구현
- 3중 데이터를 입력할 수 있는, 입력 증감이 가능한 컴포넌트 구현
- 페이지네이션 구현
- Redmine과 Yona를 활용한 버전 관리 및 협업 진행
Tech Stack
React, JavaScript
More Info (시연 영상)More Info (참가 후기)
Portal
-Description
여러 서비스들을 연결해주는 Portal 페이지를 제작했으나, 중간에
프로젝트가 중단되었습니다.
확장성을 고려하여 추후에 추가되는 서비스를 관리자가 커스텀하여
추가할 수 있도록 코드의 기반을 구성했습니다.
(FE 1명, BE 1명, QA 1명)
What did I do
- 반응형 레이아웃으로 제작하여 여러 디바이스(모바일, 태블릿, PC)에 대응
- 홈 화면 편집 애니메이션 구현
- 순수 css만 사용하여 랜덤 애니메이션 구현
- SortableJS 라이브러리에 편집, 삭제, 드롭 모션을 추가 후 래핑하여, 재사용 가능한 컴포넌트로 제작
- 통일된 코드를 가질 수 있도록 설정 및 자동화 (ESLint, Prettier, Husky)
- 업로드한 아이콘 이미지의 엑센트 컬러 자동 변환
Tech Stack
React, Typescript, Scss
More Info (회고)More Info (시연)
More Info (Github)
랜딩 프로젝트
-Description
신입 개발자 적응을 위한 랜딩 프로젝트로 인증, 대시보드, 주문서,
고객 등을 관리하는 종합 관리 페이지를 제작했습니다.
(FE 2명, BE 3명, QA 1명)
What did I do
- 로그인, 회원가입, 비밀번호 찾기 페이지 구현
- 회사, 직원, 약국 관리, 고객 요청 관리 페이지 (게시판 형태, CRUD 화면 구현)
- 페이지네이션, 세션 타이머, 리스트 증감 구조, 입력값 유효성 검증 기능 구현
- 코드 재사용을 위한 리팩토링 진행
- Nginx 배포
- 요구사항 명세서, 스토리보드 등 산출물 작성
- Swagger, Figma, Redmine 를 통한 협업 진행
Tech Stack
React, Material UI, styled-components
More Info (Github)Personal Projects
한국지역난방공사 열배송관리 모니터링 시스템
-
Description
실시간 수치 현황을 보여주는 모니터링 페이지입니다.
3명이서 협업하였으며, 프론트엔드 작업을 담당했습니다. (FE 1명, BE
2명)
외부 라이브러리 도움 없이 JavaScript, HTML, CSS만을 사용하여
Carousel 기능과 여러 페이지를 제작하였고, 필요할 때마다 코드
리팩토링을 진행했습니다.
What did I do
- Carousel 직접 설계 및 구현 (수동 제어, 네비게이션 이동, 자동 전환, 일시정지)
- 슬라이드 관리 페이지 구현 (표시 여부, 순서 조정, 순환 시간 제어)
- 공지 관리 페이지 구현 (조회, 추가, 수정, 삭제, 페이지네이션)
- 근무자 관리 페이지 구현 (근무자 설정, 등록, 삭제)
- 여러 유형의 현황판 페이지 구현
- 뉴스 알림 (수직 Carousel), 실시간 시간 표시 구현
- RESTful API 연동 및 비동기 처리
- 서버 응답 실패 시 예외처리 구현 (경고 표시)
- MVC 패턴 적용
- 화면 비율을 유지하며 최대한 화면에 컨텐츠를 채우도록 구현
Tech Stack
JavaScript, HTML, CSS
More Info (Carousel Demo) (Windows, Chrome 환경에서 정상 동작합니다)More Info (Github)
수빈코스메틱
-
Description
화장품 회사인 수빈 코스메틱의 소개 및 홍보용 웹사이트를
개발했습니다.
반응형 디자인으로 개발하여 PC, 모바일, 태블릿 레이아웃에
대응했습니다.
What did I do
- 4단계 반응형 디자인 적용 (576, 768, 992, 1200px)
- 메인 화면, 회사 소개, 헤더 및 푸터, 지도, 상품, 공지, 게시판, 인증 페이지 구현
- 썸네일 그리드 뷰, 게시판, 페이지네이션, 실시간 댓글, carousel, 네이버 지도 API, react-quill 에디터, 이미지 업로드 적용 및 구현
- Firebase Auth 기능 적용 (회원가입, 로그인, 로그아웃, 소셜 로그인, 암호 초기화, 인증 메일, 인증 상태 핸들링)
- Firestore(NoSQL DB)를 통한 게시판 CRUD 구현
- 관리자 및 사용자 권한 분리 (상품 및 공지 작성 권한, 비공개 게시글 열람, 날짜 및 작성자 수정, 모든 게시글 및 댓글의 수정과 삭제)
Tech Stack
React, MDB React UI Kit, Firebase, react-quill, Github Actions
More Info (Homepage)More Info (Github)
자산 대시보드
-
Description
신한투자증권의 거래내역 데이터(CSV)를 분석하여 계좌 정보를 직관적인
대시보드와 차트로 시각화해 주는 웹 애플리케이션입니다.
기존 증권사 앱(MTS, HTS)은 제공되는 정보가 제한적이고 UI가
직관적이지 않아, 투자자가 원하는 핵심 지표를 빠르게 확인하기
어렵다는 문제를 해결하기 위해 제작되었습니다.
What did I do
- CSV 거래내역 기반 데이터 재구성 및 파생 데이터 생성, 데이터 시각화 구현
- 종합 / 수익 / 배당 / 리스크 / 포트폴리오 / 거래내역 페이지 구현
- 계좌 합산, 금리 시뮬레이션, 통화 전환, 세금/수수료, MDD, CAGR 등 자산 분석 로직 구현
- Recharts 기반 시계열 / 파이 / 막대 차트 커스텀 컴포넌트 구성
- 반응형 레이아웃 및 글래스모피즘 UI 적용
- Jest 기반 단위 테스트 코드 작성
Tech Stack
Next.js (App Router), React, TypeScript, Zustand, TanStack Query, Tailwind CSS, shadcn/ui, Recharts, Jest
폰쿠
-
Description
가족 또는 지인과 함께 쿠폰을 사용하고 관리할 수 있도록 개발된 PWA 기반 공동 쿠폰 관리 웹앱을 제작했습니다.
What did I do
- 모바일 레이아웃에 최적화
- 쿠폰 조회, 추가, 수정, 삭제 페이지 및 기능 구현
- 쿠폰 사용완료 및 복구 기능 구현
- 사용기록 페이지 구현 (무한스크롤, 개별 조회)
- 페이지네이션, 탭, 정렬 적용
- Firebase로 사용자 인증, 데이터 관리
- FCM, Service Worker로 푸시 알림 구현 (Foreground, Background)
Tech Stack
React, Ant Design, Firebase
More Info (Github)Blog
- 현재
Description
개인 블로그를 운영하고 있으며, 주기적으로 글을 작성하고 있습니다. 정보를 공유하는 목적도 있지만 추후에 비슷한 문제가 다시 발생하였을 경우 제가 쓴 글을 보며 빠르게 문제를 해결합니다.
What did I do
- CSS nth-child 이용해서 랜덤처럼 보이게 구현하기
- React, Typescript 프로젝트에 eslint, prettier 적용 후 자동화하기
- 리액트에서 페이지네이션(Pagination) 구현하기
- Git 관련 포스트
Tech Stack
Docusaurus, React, Typescript
More Info (Blog)Education
한경국립대학교 컴퓨터공학과 졸업
-Description
컴퓨터공학과에서 4년 동안 핵심적인 CS 이론과 원리를 배웠으며, 웹 어플리케이션 개발, 모바일 프로그래밍, 머신러닝, 파이썬 데이터 분석, IoT 프로그래밍 과목을 우수한 성적으로 이수했습니다.
정보처리기사 자격증 취득
Description
NCS(국가직무능력표준) 기반으로 개편된 필기, 실기 시험에 합격하여 정보처리기사 자격증을 취득하였습니다.