Jean'sPortfolio

Front-End Developer

"문제를 구조로, 아이디어를 실용으로"
복잡함 속 질서를 만들어내는 개발자 이지인입니다.

협업을 통한 더욱 큰 가치 창출을 지향하며,
안정성과 효율성을 중시하는 코드로 실질적인 결과를 만들어냅니다.
사용자 경험을 최우선으로 하는 직관적 웹 인터페이스를 구현하는 데 열정을 쏟고 있습니다.

Languages

TOEIC

955점

TOEIC Speaking

160점 (AL)

OPIc

IH

Certifications

정보처리기사 필기

2025.06 합격

SQL Developer

2025.06 취득

About Me

Personal Information

이름

이지인

생년월일

2001.05.17

위치

경기도 부천시

학력

인천대학교 컴퓨터공학부 졸업예정 (2021.03 - 2025.08)

Contact Information

연락처

010-7145-1757

Connect With Me

Skills

Frontend

  • HTML
  • CSS
  • JavaScript / TypeScript
  • React.js
  • Next.js
  • Zustand
  • React-Query
  • Tailwind CSS
  • styled-components

Tools

  • Git
  • Figma
  • NPM / Yarn
  • Vercel
  • Postman

Projects

인천대학교 정보기술대 커스텀 SNS 경진대회

2024.10 - 2025.01 (4개월)

Next.jsReact.jsReact NativeTypeScriptTanStack QueryTailwind CSS

[프로젝트 개요]

정보기술대학 구성원 간의 실시간 소통을 지원하는 하이브리드 SNS 플랫폼에서 웹 프론트엔드를 담당했습니다. React Native 기반 앱 내에 WebView로 삽입되는 Next.js 기반 웹 화면을 설계·구현 하였으며, WebView 재생성 환경에서의 성능 문제를 해결하기 위해 SSR 도입과 데이터 캐시 전략 개선에 집중했습니다.

[기술 스택 및 구현 범위]

- Next.js (SSR), React, TypeScript - TanStack Query 기반의 서버 상태 관리 구조 설계 - Tailwind CSS로 반응형 UI 구성 - React Native WebView 환경 최적화를 위한 웹 단 구조 설계 - WebView 로딩 시 초기 렌더링 최적화를 위한 SSR 도입 - WebView가 매 라우팅마다 새로 생성되는 구조에 대응하기 위해 페이지 간 상태 손실 최소화 및 데이터 재활용 구조 구축 - 쿠키 기반 인증 흐름 대응: WebView 환경에서도 인증 상태가 유지될 수 있도록 SSR + 쿠키 기반 초기 요청 처리 대응

[기술적 과제와 해결]

과제 - WebView 내에서 사용자가 페이지를 이동할 때마다 새로운 WebView가 생성되며, 매번 전체 페이지가 재로딩 초기 렌더링 지연과 API 중복 요청 발생 해결 - Next.js SSR 도입: 초기 페이지 요청 시 HTML을 서버에서 사전 렌더링하여 클라이언트 렌더링 시간을 단축 (FCP 기준 약 3~6초 -> 1.5~2초 수준으로 개선) - TanStack Query를 통한 데이터 캐싱: 동일한 API 요청에 대해 불필요한 중복 요청을 줄이고 사용자 체감 속도를 향상

[담당 역할]

- Next.js 기반 웹 프론트 전체 화면 설계 및 개발 - Tailwind CSS를 활용한 UI 구성 및 반응형 대응 - TanStack Query 기반 API 요청 및 데이터 캐싱 설계 - WebView 환경에서의 SSR 적용을 통한 초기 렌더링 최적화

[성과]

- WebView 재생성 구조에서도 체감 렌더링 속도 약 50% 이상 개선 - TanStack Query를 통한 중복 API 요청 방지, 네트워크 부하 감소 - 하이브리드 앱 환경에 적합한 SSR 기반 웹 프론트 설계 경험 축적

정보기술대 해커톤 ‘럭키톤’ 특별상 수상

2024.10 - 2024.11 (1개월)

React.jsstyled-componentsRESTfulFigma

[프로젝트 개요]

정보기술대학 교내 해커톤 ‘럭키톤’에서 개발이 처음인 후배들과 팀을 구성해 참여했습니다. 저는 팀장과 프론트엔드(UI/UX) 개발을 맡아, 기획부터 UI 디자인, 컴포넌트 구현, 백엔드 협업까지 전 과정을 주도했습니다. “어울림”을 주제로 모두가 함께 챌린지를 만들고 참여할 수 있는 소셜 챌린지 플랫폼 ‘할래말래’를 개발하여 특별상을 수상했습니다.

[기술 스택 및 구현 범위]

- React, JavaScript, styled-components - Figma를 통한 UI/UX 설계 및 프로토타이핑 - Git, GitHub 기반 협업 - API 명세서 작성 및 백엔드(Spring Boot)와 RESTful 통신 연동

[기술적 과제와 해결]

과제 - 개발 경험이 없는 팀원들과 협업하면서 프로젝트 완성도를 높여야 했고, 제한된 시간 내에 기획부터 구현까지 전체 흐름을 리드해야 했음 - 프론트-백 간 통신 구조와 Git 협업 경험이 부족한 팀원들을 기술적으로 지원해야 했음 해결 - 팀장으로서 역할을 명확히 분배하고 일정과 목표를 시각화하여 공유 - React 기초, Git 사용법, API 호출 방식 등을 팀원들과 짧게 워크숍 형태로 공유 - 실시간 이슈 공유 및 코드 리뷰를 통해 구성원의 이해도를 높이고 협업 속도를 확보 - 이벤트 등록 및 참여 투표 기능 중심으로 우선순위를 설정해 MVP 완성도 확보

[담당 역할]

- 서비스 기획 및 핵심 기능 정의 (이벤트 등록, 투표 참여, 알림 등) - 전체 UI/UX 구조 설계 및 Figma 디자인 제작 - React 기반 주요 페이지 및 컴포넌트 개발 - API 명세서 작성 및 백엔드와의 통신 구조 정의 - 팀장으로서 Git 협업 흐름, 개발 일정 조율, 기술 지원 등 전반적인 팀 운영 주도

[성과]

- 개발 미숙한 팀원들과 협업하면서도 기획부터 구현까지 완성도 높은 결과물 제작 특별상 수상 - 리더로서 소통 중심의 협업 문화를 도입하고 기술적 허들을 낮춰 팀 전체 생산성 향상 - 프론트-백 간 협업 인터페이스 및 API 설계 경험 확보

2024 관광데이터 활용 공모전 출품

2024.04 - 2024.09 (6개월)

React.jsZustandPWATailwind CSSaxiosGithub flowFigma

[프로젝트 개요]

2024 관광데이터 활용 공모전에 출품한 '굳이?(Goode Travel)'는 국내 여행자들이 목적에 맞는 여행지를 쉽게 탐색할 수 있도록 설계된 PWA 기반 관광 정보 탐색 웹 서비스입니다. 사용자 편의성과 접근성, 성능을 고려해 Progressive Web App(PWA) 구조를 선택하였고, 비즈니스 로직과 뷰 계층을 명확히 분리하며 유지보수성과 확장성을 높였습니다. 해당 프로젝트에서 저는 프론트엔드 기능 개발, 상태관리 구조 설계, 협업 기반 코드 리뷰/PR 프로세스 운영 등을 맡아 실제 서비스 수준의 품질을 목표로 개발을 진행했습니다.

[기술 스택 및 구현 범위]

- React.js, Cloudflare, TypeScript - Zustand: 상태관리 도구로 사용 - PWA: 오프라인 대응, 홈 화면 설치, 빠른 재방문을 위한 앱 구조 구현 - React Router, Tailwind CSS, axios - 비즈니스 로직과 UI 분리: hooks, services, stores 디렉터리로 로직 관리 - GitHub 기반 협업: 이슈 생성 브랜치 분기 PR 코드 리뷰 병합

[기술적 과제와 해결]

과제 - 공공 API 기반의 대량 관광 데이터를 다루면서 사용성, 성능, 유지보수성을 동시에 만족해야 했음 - 프로젝트 규모가 커지며 상태관리가 분산되고, Redux 사용 시 예상되는 보일러플레이트 문제가 고려됨 - 기획상 모바일과 데스크탑 모두 대응해야 했으며, 앱처럼 사용할 수 있는 환경 제공이 필요함 해결 - Zustand 도입: Redux에 비해 훨씬 가볍고 보일러플레이트가 적어 상태 로직을 빠르게 구성 가능했으며, hooks 기반으로 컴포넌트 간 의존성을 줄임 - PWA 채택: 사용자가 네트워크가 불안정한 환경에서도 서비스를 사용할 수 있도록 설계 (offline caching, manifest.json 설정, Service Worker 등록) - 디렉터리 분리 및 UI-로직 분리: 관심사를 분리하여 기능 확장이 용이하도록 설계 (예: useCourse.ts 훅 getCourseList() 서비스 호출)

[담당 역할]

- 관광지 추천, 상세조회, 코스 구성 등 주요 페이지의 기능 로직 구현 - GitHub Flow 기반 협업: 이슈 작성, PR 및 코드 리뷰 참여 - 타 개발자와의 컴포넌트 분담 및 통합 작업 진행

[성과]

- PWA 도입을 통해 설치형 앱과 유사한 사용자 경험 제공 - Zustand로 상태를 통합 관리하면서 로직 흐름의 가독성과 유지보수성 향상 - 기능 분리 및 디렉터리 구조 명확화로 협업 생산성 증가 - 실제 서비스에 가까운 구조를 구현하며 성능 최적화, 상태 관리, 협업 프로세스 등 프론트 실무 역량 강화

Code

블록체인 기반 모바일 오더 시스템 NFCOFFEE

2024.03 - 2024.06 (4개월)

React NativeTypeScriptweb3.jsstyled-componentsFigma

[프로젝트 개요]

NFCoffee는 사내에 설치된 자판기를 대상으로 구성원들이 NFT를 기반으로 음료를 주문하고 결제할 수 있는 모바일 앱 서비스입니다. 사용자는 회원가입 후 NFT를 발급받아 소유함으로써 커피 자판기를 제어할 수 있고, 자판기의 사용 이력과 결제 내역은 블록체인 상에서 검증됩니다. 저는 앱 전체 UI/UX 디자인과 프론트엔드 구현을 전담하며, web3.js를 활용한 블록체인 연동과 실제 사용 흐름 중심의 UI 설계에 집중했습니다.

[기술 스택 및 구현 범위]

- React Native, TypeScript, styled-components - web3.js: NFT 발급 및 보유 여부 확인, 트랜잭션 기록 확인 - Figma 기반 UI/UX 설계 및 전환 흐름 전체 설계 - 모바일 앱 전용 UI 구현: 탭 네비게이션, 모달형 결제, 주문 목록 등 - 비회원 회원가입 NFT 발급 후 자판기 주문/결제 결제 기록 확인까지의 단방향 사용자 흐름 구성 - 블록체인 네트워크와 실시간 상호작용을 위한 지연 로딩 대응 처리

[기술적 과제와 해결]

과제 - 사내에서만 사용되는 자판기임에도 불구하고 탈중앙화 인증 방식(NFT)을 적용해야 했으며, 앱 설치 이후 사용자 흐름이 기술적 개념 없이도 직관적으로 이어져야 함 - 트랜잭션 지연, 스마트 컨트랙트 연결 실패 등 Web3 특유의 비동기 흐름과 UX 충돌을 해결할 필요가 있었음 해결 - 회원가입 인증번호 입력 개인 키 발급 NFT 발급 NFT 인증 완료라는 단계별 진행 화면 설계 - 이를 통해 블록체인 기반 인증 과정을 UI로 가시화 - web3.js를 통해 NFT 보유 여부를 조회하고, 보유자에 한해 자판기 제어 버튼 활성화 - 트랜잭션 기록, 결제 내역, 장바구니 등은 각기 탭으로 구성하여 명확하게 정보 구조화 - styled-components 기반 재사용 가능한 컴포넌트로 전체 앱 일관성 확보

[담당 역할]

- 전체 UI/UX 흐름 설계 및 Figma 시안 제작 - 회원가입 NFT 발급 커피 선택 결제 트랜잭션 확인 흐름 구체화 - React Native 앱 전체 화면 개발 및 상태 흐름 구성 - web3.js를 통한 스마트 컨트랙트 상호작용 로직 구현 - NFT 발급 처리, NFT 보유자 확인, 트랜잭션 로그 불러오기 등 - 주문/결제 화면 구성 및 금액 계산 UI 작성 - 결제 성공/실패 상태에 따른 UI 분기 처리

[성과]

- NFT 기반 사용자 인증 흐름을 앱 UX에 자연스럽게 녹여낸 Web3 모바일 앱 구현 - React Native + web3.js 조합으로 트랜잭션 기반 결제 구조 실현 - 팀 내 UIUX 디자인부터 프론트엔드 로직까지 주도적으로 구성한 프로젝트 - 피그마를 통한 화면 흐름 정의 및 일관성 있는 컴포넌트 구조화로 사용자 경험 개선

Code

인천대학교 캡스톤디자인 장려상 수상 '너P야?’

2023.09 - 2024.05 (9개월)

React NativeTypeScriptFigma

[프로젝트 개요]

‘너P야?’는 대학생의 복잡한 일정(수업, 과제, 알바, 모임 등)을 자동으로 분석·정렬해주는 스케줄 관리 앱입니다. 할 일이 많고 우선순위가 불명확한 상황에서, 사용자가 직접 모든 계획을 조정하는 부담을 줄이기 위해 기획했으며, 앱과 웹을 동시에 대응하는 크로스플랫폼 구조로 React Native 기반 앱을 구현했습니다. 본 프로젝트는 기획부터 UI/UX 설계, 프론트엔드 개발까지 직접 주도한 작업으로, 인천대학교 캡스톤디자인에서 장려상을 수상했습니다.

[기술 스택 및 구현 범위]

- React Native, TypeScript - 크로스플랫폼 대응을 위한 공통 컴포넌트 설계 - Figma 기반 UI/UX 프로토타입 제작 및 사용자 흐름 설계 - 할 일 등록, 자동 스케줄링, 완료 체크, 일정 수정 등 핵심 기능 개발

[기술적 과제와 해결]

과제 - 내가 직접 기획한 시스템이었기에, 아이디어 구체화와 기능 정의 단계에서 현실적인 문제를 세부적으로 설계해야 했음 - 자동 스케줄링 로직 구현 시 사용자의 남은 시간, 수면/식사 등 비가용 시간, 일정 실패 시 재할당 기준 등 복잡한 조건을 정의해야 했음 - 시스템이 자동으로 일정을 생성하더라도, 사용자가 스케줄을 수동으로 조정하려는 요구를 수용해야 했음 해결 - 스케줄링 시 고려할 수 있는 제약 조건을 구체적으로 분류: 불가용 시간(수면·식사 등), 우선순위, 예상 소요 시간, 마감 기한 - 일정 미이행 시 자동 재스케줄링 기준을 유연하게 정의: 잔여 시간에 배치 / 유사 항목 그룹화 / 사용자 직접 조정 허용 - 사용자의 주도권도 보장하기 위해 일정 드래그 편집 기능 프로토타입 설계

[담당 역할]

- 아이디어 기획 및 기능 정의 전반 주도 - 문제 정의부터 핵심 기능 우선순위 결정, 사용자 시나리오 설계 - UI/UX 설계 및 Figma 프로토타입 제작 - 일정 등록/수정/완료까지의 흐름 및 상태 변화 중심 설계 - React Native 기반 화면 구현 및 기능 개발 - 할 일 추가, 스케줄 생성 로직 기반 일정 화면 구성 등 - 팀원과 역할을 분리하여 웹/앱 연동 구조 및 백엔드 통신 준비

[성과]

- 기획, 디자인, 개발을 리딩하여 MVP 완성 및 장려상 수상 - 사용자의 시간 제약과 일정 충돌 문제를 해결하기 위한 현실 기반 스케줄링 로직 설계 경험 - 복잡한 문제를 구체화하고, 실제 사용 흐름에 녹여내는 기획·UI 감각 확보

정보기술대학 학생회 홍보국장

2024.03 - 2024.12 (10개월)

[활동 개요]

정보기술대학 단과대 학생회에서 홍보국장으로 1년간 활동하며 SNS 및 오프라인 홍보를 총괄했습니다. 총 3명의 국원과 함께 인스타그램, 카카오톡 채널, 단체 카톡방을 중심으로 약 50건 이상의 콘텐츠를 기획·제작·배포했고, 학생회 주요 행사(정기행사, 투표, 공지 등)를 현수막, 스토리, 포스터 등 다양한 채널을 활용하여 안내했습니다.

[주요 활동]

- SNS 콘텐츠 운영 - 인스타그램 피드/스토리 약 50건 작성 및 배포 - 교내 주요 공지, 행사, 모집 등 시각적 안내물 기획 - 카카오톡 비즈니스 채널과 단체 카톡방 운영을 통한 실시간 정보 전달 - 오프라인 홍보물 기획 - 행사별 현수막, 학내 게시물 기획·디자인 및 부착 관리 - 국원 관리 및 협업 - 신입 국원 3인의 콘텐츠 제작·캘린더 관리 지도 - 게시 주기 및 톤앤매너 통일을 위한 템플릿 제작

청소년자람터오늘 코딩캠프 봉사

2024.07 - 2024.08 (32시간)

[활동 개요]

미래교육센터가 주관한 청소년자람터오늘 코딩캠프에서, 정보기술 교육이 열악한 전남 영광 지역의 초·중등 학생들을 대상으로 블록 코딩(App Inventor) 교육을 4일간 진행했습니다. 저는 멘토로 참여하여 총 32시간에 걸쳐 하루 8시간씩 수업을 운영했고, 아이들이 스스로 앱을 만들 수 있도록 단계별로 지도하며 코딩 경험을 완성시킬 수 있도록 도왔습니다.

[주요 활동]

- 앱인벤터 기반 블록코딩 실습 지도 - 각 교육 세션별 실습 목표 설정 및 개별 진행 속도에 맞춘 보조 - 반복문, 조건문 등 추상적인 개념을 그림·비유·일상 언어로 설명하여 이해도 제고 - 학생들의 완성도 높은 결과물 제출을 위해 칭찬과 피드백 중심의 격려 기반 지도 방식 활용

[얻은 경험]

- C언어 튜터링 경험을 바탕으로, 초등~중등 수준의 눈높이에 맞는 설명 방식을 다시 정립할 수 있었음 - 단순히 가르치는 것을 넘어, 아이들이 스스로 해냈다는 성취감을 느낄 수 있도록 도와주는 교육자적 시선을 체득 - 코딩을 처음 접하는 학습자에게 기술을 친숙하게 전달하는 커뮤니케이션 역량 향상

웹 기초 스터디 주도 경험

2024.01 - 2024.02 (2개월)

[활동 개요]

웹 개발 입문자 3명과 함께 2개월 간 JavaScript 이론서 학습과 투두 실습 프로젝트를 중심으로 스터디를 운영하였습니다. 학습 내용을 기반으로 블로그 글 3편을 정리하며 자바스크립트 기초를 다시 다지는 계기가 되었고, 소규모 팀 운영과 일정 조율의 어려움도 직접 경험했습니다.

[주요 활동]

- JavaScript 이론서 핵심 개념 학습 및 토론 - To‑Do 애플리케이션 실습 프로젝트 기획·구현 - 매주 학습 내용 요약 및 블로그 글 3편 작성 - 스터디 일정 조율 및 진행 관리

[얻은 경험]

- 자바스크립트 기초 개념을 체계적으로 정리하는 능력 강화 - 소규모 팀 일정 관리 및 협업 커뮤니케이션 역량 향상 - 학습 내용을 글로 정리하며 지식 전달 및 문서화 스킬 향상

'멋쟁이사자처럼' 웹프로그래밍 동아리 11기 수료

2023.03 - 2023.12 (10개월)

멋쟁이사자처럼 아이디어톤: 교내대회 1위 ‘문지마’ 기획

[프로젝트 개요] 멋쟁이사자처럼 웹 프로그래밍 동아리 활동 중, “문해력 부족으로 인한 소통 오류” 문제를 해결하기 위해 팀을 구성하여 모바일 게임형 학습 서비스 ‘문지마’를 기획했습니다. Figma로 게임화된 UI/UX 시나리오를 설계했고, 교내 아이디어톤에서 1등을 수상했습니다. [기술 스택 및 구현 범위] - 기획 도구: Figma (모바일 앱 전체 화면 UI 제작) - UX 설계: 싱글/멀티플레이 흐름, 오답 노트, 랭킹 등 게임형 학습 기능 정의 - 사업화 모델: 사용자-작가-광고주 3자 플랫폼 수익 구조 설계 - 차별화 전략: EBS·모두의 문해력 벤치마킹, 접근성·오락성 강화 [기획적 과제와 해결] 과제: - 국어 교육을 넘는 게임 요소 설계 - 학습 효과와 오락성의 균형 확보 - 수익 모델 제시 요구 해결: - 어휘/독해 모드 분리, 난이도 선택 기능 - 랭킹·업적·오답 노트 등 반복 학습 요소 도입 - 출석 보상·하트 회복 시스템을 통한 게임 UX 적용 [담당 역할] - 전체 아이디어 기획 및 문제 정의 - Figma 기반 UI/UX 시나리오 설계 - 화면 흐름(메인·마이페이지·싱글/멀티플레이·오답노트) 구성 [성과] - 인천대학교 아이디어톤 1등 수상 - 게임성과 학습 효과를 모두 고려한 문해력 향상 시스템 기획 역량 증명 - 시장성 있는 플랫폼 기획 경험 확보

멋쟁이사자처럼 중앙 해커톤: 음성 인식 택시 호출 앱 개발

[프로젝트 개요] 디지털 격차 해소를 위해 음성 인식+GPS 택시 호출 웹 서비스를 개발했습니다. “택시 불러줘” 한 마디로 호출 가능한 간단한 UI를 설계했고, 저는 React 기반 프론트엔드를 구현했습니다. [기술 스택 및 구현 범위] - React.js, JavaScript - Geolocation API로 현재 위치 자동 반영 - 음성 호출 UI, 호출 상태 안내 화면 구성 [담당 역할 및 성과] - 음성 입력에 따른 UI 상태 전환 구현 - 위치 정보 API 연동 - 단기간 MVP 완성 및 기능 구현 완료

멋쟁이사자처럼 알고리즘 스터디 참여

멋쟁이사자처럼 내부 알고리즘 스터디에서 연결 리스트·트리·그래프 등을 학습하고 문제 풀이에 참여했습니다. 벨로그에 주요 주제별 정리와 풀이 과정을 꾸준히 기록하며 자료구조 핵심 개념에 대한 실전 감각을 키웠습니다.

인천대학교 소그룹 학습지원 튜터

2023.10 - 2023.11 (2개월)

[활동 개요]

신입생 후배들을 대상으로 약 2개월간 C 언어 기초 문법과 알고리즘 문제풀이를 주제로 한 튜터링 활동을 진행했습니다. 단순한 문법 설명에 그치지 않고, 시각화 자료와 그림 설명을 활용해 반복문·포인터 등 난해한 개념을 쉽게 이해할 수 있도록 도왔으며, 기초 개념 습득 이후에는 백준 문제풀이와 벨로그 작성까지 함께 지도하여 학습 습관과 사고력 향상을 목표로 하였습니다.

[주요 활동 및 방식]

- 매주 1~2회 정기 튜터링 및 과제 문제 풀이 피드백 - 복잡한 알고리즘 흐름(반복문, 재귀, 포인터 등)을 도식화 및 시각적 흐름 설명으로 지도 - 백준 온라인 저지 활용하여 기초 알고리즘 학습과 적용 병행 - 후배들이 직접 공부한 내용을 벨로그에 정리하도록 유도, 복습과 정리 습관 형성 지원

[얻은 경험]

- 지식 수준이 다양한 대상에게 맞춤형 설명을 제공하는 역량 향상 - 내 기준이 아닌 상대방의 이해 관점에서 문제를 설명하고 구조화하는 역량 습득 - 개발자가 아닌 교육자의 시선에서 프로그래밍 개념을 접근한 경험