안녕하세요.
5년차 개발자 김성연입니다.
효율적인 개발을 지향하며, 변화하는 환경에 유연하게 적응합니다.
About me
- 66syki@gmail.com
- Portfolio
- ksy2-portfolio.vercel.app
- GitHub
- github.com/syki66
- Blog
- blog.syki66.com
- 생일
- 1995. 06
- 학력
- 한경국립대학교 컴퓨터공학과 졸업
- 자격증
- 정보처리기사
Skills
Frontend
Backend & Deployment
Collaboration
Work Experience
씨엔알리서치
Frontend Developer -회사 소개
제약사·병원 등의 임상시험 업무를 위탁받아 수행하는 임상시험수탁기관(CRO)입니다.
imtrial 2.0
-
Description
임상시험 통합 플랫폼 imtrial 2.0의 프론트엔드 개발을
담당했습니다. imTDLM(임상시험의 설계, 운영, 변경 이력 등 라이프사이클 전반을
관리하는 시스템), imMDR(임상 메타데이터 관리 시스템),
imEDC(임상시험 전자데이터 수집 시스템),
Portal(사용자 및 권한 관리) 등 주요 서비스 개발에
참여했습니다.
사내 임상시험 업무 시스템의 적용 및 운영을 지원했으며, 외부
기관인 서울대학교병원과의 계약에 따른 운영도 지원했습니다.
What did I do
- 플랫폼 내 제품의 신규 기능 개발 및 유지보수
- 메타데이터 검색·가져오기 및 계층별 조회 화면 개발
- 임상시험 설계 정보, CRF(임상시험 데이터 기록 양식) 및 변경 이력 관리 화면 개선
- CRF 편집 및 CRF 변경 전후 비교 화면 개선
- 사용자 정보 및 역할·서비스 권한 관리 기능 개선
- 그리드, 페이지네이션, 입력 폼 등 UI 개선 및 오류 수정
- Jest를 활용한 단위 테스트 작성
- Figma, Jira, Confluence를 활용한 협업
Tech Stack
Next.js, React, TypeScript, TanStack Query, Redux Toolkit, MUI Minimals, Jest
More Info (MDR 소개 영상)More Info (TDLM 소개 영상)
More Info (샘플 화면)
imEDC, imLINK
-
Description
임상시험 데이터 수집 양식을 설계하고 대상자·방문별 데이터를 입력·관리하는 imEDC와, EDC와 CTDW 간 데이터 항목 매핑 및 전송을 지원하는 imLINK의 프론트엔드 개발에 참여했습니다.
What did I do
- 다중 입력 항목의 중첩 구성과 항목별 상세 속성 설정을 지원하는 CRF 빌더 구현
- 중첩 드래그 앤 드롭을 활용한 항목 배치 및 순서 변경 기능 구현
- CRF 항목별 방문 설정 매트릭스 구현 및 사용성 개선
- EDC와 CTDW 간 데이터 항목 매핑 화면 개발
- 데이터 전송 일정 설정 및 진행 상태 조회 화면 개발
- Zod와 React Hook Form을 활용한 폼 입력 데이터 검증 및 처리
- Figma, Jira, Confluence를 활용한 협업
Tech Stack
Next.js, React, TypeScript, TanStack Query, MUI
More Info (imEDC 샘플 화면)More Info (imLINK 샘플 화면)
Platform
-
Description
imtrial의 여러 제품을 한곳에서 이용하고 고객사·사용자별 권한을 관리하는 통합 포털의 프론트엔드 개발에 참여했습니다. imtrial 2.0의 Portal에 해당하며, 기획 단계부터 참여했습니다.
What did I do
- 프론트엔드 초기 구조 설계 및 공통 레이아웃·UI 컴포넌트 개발
- 소속 기관별 서비스와 공지사항 조회·관리 대시보드 구현
- 시스템·고객사별 사용자 및 서비스 이용 권한 관리 UI 구현
- JWT 기반 인증 연동, 로그인 상태 관리 및 세션 타이머 구현
- 2FA 인증 UI 및 인증·안내 메일용 이메일 템플릿 구현
- Zod와 React Hook Form을 활용한 폼 입력 데이터 검증 및 처리
- TanStack Query 캐싱 및 검색 입력 디바운싱 등을 통한 성능 최적화
- i18next를 이용한 다국어 기능 구현
- ESLint, lint-staged, Husky를 활용한 코드 품질 관리 자동화
- Figma, Jira, Confluence를 통한 협업 진행
Tech Stack
Next.js, React, TypeScript, Tailwind CSS, TanStack Query, MUI Minimals, MUI X Pro
imtrial 1.0
-
Description
임상시험 설계와 데이터 표준화, EDC(임상시험 전자데이터 수집 시스템) 연계를 지원하는 플랫폼 imtrial 1.0의 프론트엔드 개발에 참여했습니다.
What did I do
- 기존 플랫폼의 신규 기능 개발 및 유지보수
- 항목 유형·표 구조·표시 조건에 따른 CRF(증례기록서)·aCRF(데이터 표준 매핑 정보를 표시한 CRF) 렌더링 로직 개선
- AUIGrid 기반 CRF·aCRF 항목·속성·코드리스트 편집 UI 개선
- CRF 버전 간 변경 사항을 시각적으로 표시하는 변경대비표 구현
- BOIM API 연동 UI 및 미리보기 화면 구현
- 버전 관리, 문서 다운로드, 검색·필터 등 편의 기능 구현·개선
- 소프트웨어 패키징을 위한 스토리보드·기능명세서 작성
- Redmine과 Yona를 활용한 이슈 관리 및 협업
Tech Stack
React, JavaScript, CSS
More Info (소개 리플렛)More Info (imagineer 행사)
More Info (샘플 화면)
DDF Connectathon
-
Description
CDISC에서 새로운 임상 데이터 표준인 USDM 1.0 표준을 릴리즈하여
각 제약/임상 업체에서 이를 활용한 프로그램을 개발하고,
SDR RI 서버와 통신하여 상호 운용성을 확인해보는
DDF
Connectathon 대회에 프론트엔드 역할로 참가했습니다.
(FE 2명, BE 2명)
What did I do
- USDM 기반 임상시험 설계 데이터 입력·편집 UI 구현
- 3단계 중첩 데이터의 입력 항목을 추가·삭제하는 동적 폼 컴포넌트 구현
- 데이터 목록 조회를 위한 페이지네이션 구현
- Redmine과 Yona를 활용한 이슈 관리 및 협업
Tech Stack
React, JavaScript, CSS
More Info (시연 영상)More Info (참가 후기)
Portal
-
Description
여러 서비스들을 연결해주는 Portal 페이지를 제작했으나, 중간에
프로젝트가 중단되었습니다. 확장성을 고려하여 추후에 추가되는
서비스를 관리자가 커스텀하여 추가할 수 있도록 코드의 기반을
구성했습니다.
(FE 1명, BE 1명, QA 1명)
What did I do
- SortableJS 기반에 편집·삭제·드롭 모션을 더한 재사용 가능한 컴포넌트 개발
- 홈 화면 편집 애니메이션 구현
- 순수 CSS 기반 랜덤 애니메이션 구현
- 코드 스타일 통일 및 품질 검사 자동화 (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
- 로그인·회원가입·비밀번호 재설정 UI 및 인증 상태 관리·세션 타이머 구현
- 회사·직원·의약품·고객 요청의 조회·등록·수정·삭제 UI 구현
- 동적 폼·입력값 검증·페이지네이션 등 기능 구현
- 리팩토링을 통한 코드 재사용성 개선
- Nginx를 활용한 프론트엔드 배포
- 요구사항 명세서·스토리보드 작성
- Swagger, Figma, Redmine을 활용한 협업
Tech Stack
React, Material UI, styled-components
More Info (스크린샷)More Info (Github)
Personal Projects
한국지역난방공사 열배송관리 모니터링 시스템
-
Description
한국지역난방공사 열배송관리 모니터링 시스템의 프론트엔드 개발에 참여했습니다. 열생산·공급·판매량과 근무자 현황 등을 실시간으로 보여주는 시스템입니다. (FE 1명, BE 2명)
외부 라이브러리 없이 JavaScript·HTML·CSS만으로 캐러셀과 여러 화면을 구현하고, 개발 과정에서 리팩토링을 통해 코드 구조를 개선했습니다.
What did I do
- 순수 JavaScript 기반 캐러셀 설계 및 자동 전환·수동 이동·일시정지 구현
- 슬라이드 표시 여부·순서·전환 주기를 설정하는 관리 화면 구현
- 공지사항·근무자 조회 및 등록·수정·삭제 등 관리 UI 구현
- 열생산·공급·판매량 및 근무자 등 유형별 현황판 구현
- 수직 캐러셀 기반 뉴스 알림 및 실시간 시계 구현
- REST API 연동·비동기 처리 및 서버 응답 실패 시 오류 안내 구현
- MVC 패턴 적용 및 리팩토링을 통한 코드 구조 개선
- 화면 비율을 유지하며 디스플레이 크기에 맞춰 확장되는 레이아웃 구현
Tech Stack
JavaScript, HTML, CSS
More Info (Carousel Demo) (Windows, Chrome 환경에서 정상 동작합니다)More Info (Github)
수빈코스메틱 – 화장품 기업 웹사이트
-
Description
화장품 회사 수빈코스메틱의 회사 소개와 상품 홍보를 위한 웹사이트를 개발했습니다.
What did I do
- 메인·회사 소개·상품·공지·게시판 화면 및 공통 헤더·푸터 구현
- 상품 썸네일 그리드·캐러셀 구현 및 네이버 지도 API 연동
- react-quill 기반 글쓰기 에디터 및 이미지 업로드 구현
- Firestore(NoSQL DB) 기반 게시글 CRUD·댓글·페이지네이션 구현
- Firebase Auth 기반 회원가입·소셜 로그인·로그아웃·비밀번호 재설정·이메일 인증 및 인증 상태 관리
- 관리자·사용자 권한에 따른 상품·공지·게시글·댓글 관리 및 비공개 글 접근 제어
- 반응형 레이아웃을 적용하여 PC·태블릿·모바일에 대응
Tech Stack
React, CSS, MDB React UI Kit, Firebase, react-quill, Github Actions
More Info (Homepage)More Info (Github)
자산 대시보드
Description
증권사의 계좌 거래내역 데이터(CSV)를 기반으로 파생 데이터를 생성하고, 이를 직관적인 대시보드와 차트로 시각화해 주는 웹 애플리케이션입니다. 기존 증권사 앱(MTS, HTS)은 제공되는 정보가 제한적이고 UI가 직관적이지 않아 투자자가 원하는 핵심 지표를 파악하기 어렵다는 문제를 해결하기 위해 제작되었습니다.
What did I do
- Setup·종합·수익·배당·리스크·포트폴리오·거래내역·설정 페이지 구현
- 계좌 합산·날짜별 조회·예금 비교·통화 전환·세금·수수료·MDD·CAGR 등 자산 분석 로직 구현
- Recharts 기반 차트와 기간 설정·로그 스케일·물가 보정 등 분석 옵션 구현
- 글래스모피즘 UI 및 반응형 레이아웃 적용
- 계산 결과 캐싱·서버 측 외부 API 응답 캐싱·연산 로직 개선을 통한 성능 최적화
- 클라이언트 측 종단간 암호화를 적용한 CSV 저장·복원 기능 구현
- Jest 기반 핵심 계산 로직 단위 테스트 작성
Tech Stack
Next.js (App Router), React, TypeScript, Zustand, TanStack Query, Tailwind CSS, shadcn/ui, Recharts, Supabase, Jest
More Info (Demo)More Info (Github)
폰쿠 – 쿠폰 공유 관리 앱
-
Description
가족·지인과 쿠폰을 공유하고 사용 상태와 이력을 함께 관리하는 PWA 기반 웹앱을 개발했습니다.
What did I do
- 쿠폰 조회·등록·수정·삭제 및 사용 완료·복구 기능 구현
- 무한 스크롤 및 개별 기록 조회를 지원하는 쿠폰 사용 이력 화면 구현
- 페이지네이션·탭·정렬 등 조회 편의 기능 구현
- Firebase 기반 사용자 인증 및 쿠폰 데이터 관리 구현
- FCM·Service Worker 기반 포그라운드·백그라운드 푸시 알림 구현
- 모바일 사용에 최적화된 레이아웃 구현
Tech Stack
React, Ant Design, Firebase
More Info (Github)촉촉마켓 – 예측 커뮤니티 앱
Description
일상·경제·테크 등 다양한 주제의 결과를 예측하고 의견을 나누는 앱인토스 미니앱입니다.
What did I do
서비스 기획부터 UX/UI, 프론트엔드, 백엔드, 관리자 웹, 개발·운영 배포 환경까지 전반을 담당했습니다.
- 참여량에 따라 참여 가격과 예측 확률이 변하는 가격 결정 알고리즘 적용
- 가상 재화의 보유·평가·되팔기·정산 및 내역 조회 기능 적용
- 게시판·댓글과 프로필을 지원하는 커뮤니티 기능 적용
- 랭킹·티어 시스템 적용
- 클라이언트 메모리 캐싱으로 페이지 재진입 속도 향상 및 서버 요청 최소화
- 주제 생성·정산 및 서비스 운영 관리를 위한 관리자 웹 개발
Tech Stack
React, TypeScript, Vite, TDS Mobile, Apps in Toss Web Framework, Supabase, PostgreSQL, Vercel
More Info (토스 미니앱) (모바일 토스 앱 설치 후 실행 가능합니다)발가락보 – 페달로 악보 넘기기 앱
Description
연주 중 MIDI 페달·페이지 터너·외부 키보드로 악보를 넘길 수 있는 React Native 기반 악보 뷰어 앱을 개발했습니다.
What did I do
- PDF·이미지·TXT 악보 가져오기 및 로컬 저장 기능 구현
- 여러 이미지를 불러와 페이지 순서를 조정하고 하나의 악보로 구성하는 기능 구현
- 악보 미리보기·조회·이름 변경·삭제·순서 변경 등 라이브러리 관리 기능 구현
- PDFKit 기반 PDF 뷰어 및 이미지 뷰어의 스와이프·확대·회전 기능 구현
- CoreMIDI 기반 USB·Bluetooth MIDI 장치 자동 감지 및 페달 입력에 따른 페이지 이동 구현
- 외부 키보드·페이지 터너 입력 처리 및 사용자 지정 키 매핑 구현
- 장치 연결 상태·햅틱 피드백·화면 모드·회전 잠금 등 편의 기능 및 설정 저장 구현
- Android·iPhone·iPad·Apple Silicon Mac 등 다양한 실행 환경 지원
Tech Stack
React Native, Expo, TypeScript, Swift, CoreMIDI, PDFKit
More Info (App Store)Blog
- 현재
Description
개발 과정에서 배운 내용과 문제 해결 경험을 기록하고 공유하는 Docusaurus 기반 기술 블로그를 운영하고 있습니다. 유사한 문제를 빠르게 해결할 수 있도록 구현 방법과 해결 과정을 정리합니다.
Featured Posts
- CSS nth-child를 활용한 랜덤 애니메이션 구현
- React·TypeScript 프로젝트의 ESLint·Prettier 설정 및 자동화
- MSW 2.0 기반 API 모킹 및 동적 경로·쿼리스트링 처리
- Git 사용법 및 문제 해결 과정 정리
Tech Stack
Docusaurus, React, TypeScript
More Info (Blog)Education
한경국립대학교 컴퓨터공학과 졸업
-Description
컴퓨터공학과에서 핵심적인 CS 이론과 원리를 배웠으며, 웹 애플리케이션 개발·모바일 프로그래밍·머신러닝·파이썬 데이터 분석·IoT 프로그래밍 과목을 우수한 성적으로 이수했습니다.
정보처리기사 자격증 취득
Description
NCS(국가직무능력표준) 기반으로 개편된 필기·실기 시험에 합격하여 정보처리기사 자격증을 취득했습니다.