<Suyun /><Available Now />

SUYUN
WEB PORTFOLIO

안녕하세요! 제 포트폴리오 사이트에 방문해주셔서 감사합니다
웹 퍼블리셔와 프론트엔드 개발자로 함께 성장하고 있는 수연입니다 :)

Scroll

About me

안녕하세요!
7년차 웹 퍼블리싱과 프론트엔드 개발을 함께 하는 개발자 이수연입니다.

웹 퍼블리셔로 커리어를 시작하여 반응형, 웹 접근성, 웹 표준을 준수하는
견고한 UI/UX 구현 역량을 쌓아왔으며,
이를 바탕으로 프론트엔드 개발 영역까지 자연스럽게 확장해 왔습니다.

UI/UX는 더욱 단단하게 설계하고,
복잡한 데이터와 로직은 안정적으로 처리하는 것을 강점으로
즐겁게 성장하는 개발자가 되고자 합니다.

Skill

LANGUAGE

HTML5CSS3SCSSJavaScriptTypeScriptjQuery

FRAMEWORK

ReactNext.jsVue.js

BACKEND & DATABASE

PHP (GNUBOARD)MySQL

TOOL

GitConfluenceJiraFigmaPhotoshopIllustrator

Experience

  • ㈜이브레인소프트
    SI 개발팀/책임2023.03 ~ 2025.08

    웹퍼블리싱 리드/프론트엔드 개발

    • React, Next.js, Vue.js, TypeScript, JSP를 기반으로 하는 프로젝트 신규 개발 및 유지보수
    • Next.js, TypeScript 기반의 사내 공통 프론트엔드 아키텍처(mvc) 개발 참여
  • 라온비엔피
    웹에이전시 개발팀/대리2022.10 ~ 2023.01

    웹퍼블리싱

    • PHP를 기반으로 하는 프로젝트 신규 개발 및 유지보수
    • 사내 공통 템플릿 개발 참여
  • 누리아이
    웹에이전시 프로그램팀/대리2020.11 ~ 2022.08

    웹퍼블리싱

    • PHP, JSP를 기반으로 하는 프로젝트 신규 개발 및 유지보수
    • 사내 쇼핑몰 운영/유지보수 및 이벤트 업무
  • 진담W
    웹에이전시 기술지원팀/사원2018.10 ~ 2020.04

    웹퍼블리싱

    • PHP, 카페24 솔루션을 기반으로 하는 프로젝트 신규 개발 및 유지보수
    • 사내 쇼핑몰 운영/유지보수 및 이벤트 업무
    • 사내 공통 템플릿 개발 참여

Project

티오더2024.07 ~ 2024.09

외식업 매장을 위한 태블릿 기반 테이블오더 솔루션 ‘티오더’ 브랜드 홍보 및 제품 소개용 반응형 웹사이트 구축 프로젝트

사이트 바로가기
JSPHTML5CSS3JavaScriptjQueryGSAPmodel-viewer
퍼블리싱 (100%)
  • · 반응형 웹 UI 구현 및 크로스 브라우징 대응
  • · GSAP 기반 스크롤 인터랙션 및 모션 애니메이션 구현
  • · 3D 제품 뷰어 인터랙션 구현 (model-viewer 활용)
현대자동차 Product2023.09 ~ 2024.04

현대/기아 글로벌 차량 관리 시스템을 위한 통합 관리자 플랫폼 구축 프로젝트

Next.jsTypeScriptSCSSEmotionMUIReact QueryReact Hook FormJotaiYupi18next
프론트엔드 개발 (부분)
  • · Trim 카테고리 페이지 UI 및 데이터 연동 기능 개발
  • · 기존 JSP 레거시 코드 분석을 기반으로 공통 컴포넌트 구조 설계 및 구현
  • · 정의된 다국어 구조를 기반으로 i18next 적용 및 화면별 번역 처리
모두의질문Q2024.11 ~ 2025.02

국민이 정책 및 사회 현안에 대해 질문하고 소통할 수 있도록 설계된 참여형 정책 소통 플랫폼 구축 프로젝트

관련 기사들 보기
Next.jsTypeScriptSCSSEmotionMUIReact QueryReact Hook FormJotaiYup
퍼블리싱 (100%)
  • · 반응형 웹 UI 구현 및 크로스 브라우징 대응
  • · 재사용 가능한 컴포넌트 기반 스타일링 시스템 구축
프론트엔드 개발 (부분)
  • · 메인 페이지 및 공지/미디어 게시판, 마이페이지 기능 개발
유써트2025.04 ~ 2025.05

SSL/TLS 및 디지털 인증서 관리 서비스를 위한 보안 플랫폼 구축 프로젝트 초기 단계에 참여

Next.jsTypeScriptSCSSTailwind CSSReact QueryReact Hook FormJotaiYup
퍼블리싱 (부분)
  • · 프로젝트 초기 관리자/사용자 디자인 분석 및 컴포넌트 설계
  • · 관리자/사용자 영역 공통 UI 베이스 컴포넌트 구축
세이브더칠드런 캠페인2025.06 ~ 2025.06

세이브더칠드런 가족돌봄청소년(지수/선우) 캠페인 랜딩 페이지 구축 프로젝트

지수 캠페인 바로가기선우 캠페인 바로가기
HTML5CSS3JavaScriptjQueryGSAP
퍼블리싱 (100%)
  • · 적응형 웹 구현 및 크로스 브라우징 대응
  • · GSAP을 활용한 스크롤 기반 인터랙션 및 모션 효과 구현
바이오맵2025.12 ~ 2025.12

연구자들을 위한 자원공유 네트워크 서비스 플랫폼 구축

사이트 바로가기
PHPHTML5CSS3JavaScriptjQuery
퍼블리싱 (100%)
  • · 반응형 웹 UI 구현 및 크로스 브라우징 대응
  • · GSAP을 활용한 스크롤 기반 인터랙션 및 모션 효과 구현
개발 (100%)
  • · php(그누보드) 기반 솔루션을 활용한 게시판 스킨 구조 수정 및 기능 확장
티나뷰티2025.11 ~ 2025.11

티나뷰티 브랜드와 브러쉬 제품 정보를 담은 웹사이트 구축 프로젝트

사이트 바로가기
PHPHTML5CSS3JavaScriptjQueryGSAP
퍼블리싱 (100%)
  • · 반응형 웹 UI 구현 및 크로스 브라우징 대응
  • · GSAP을 활용한 스크롤 기반 인터랙션 및 모션 효과 구현
개발 (100%)
  • · php(그누보드) 기반 솔루션을 활용한 게시판 스킨 구조 수정 및 기능 확장
인천디자인지원센터

인천 지역 디자인 산업 활성화를 위한 지원사업 안내 및 시설 예약 기능을 제공하는 공공기관 웹사이트 구축 프로젝트

사이트 바로가기
PHPHTML5CSS3JavaScriptjQuery
퍼블리싱 (100%)
  • · 반응형 웹 UI 구현 및 크로스 브라우징 대응
  • · 동적 UI 인터랙션 구현
개발 (부분)
  • · php(그누보드) 기반 솔루션을 활용한 게시판 스킨 구조 수정 및 기능 확장
네모클린

청소전문 기업 소개 및 클리닝 소개 홈페이지 구축

사이트 바로가기
PHPHTML5CSS3JavaScriptjQuery
퍼블리싱 (100%)
  • · 웹 접근성 인증
  • · 반응형 웹 UI 구현 및 크로스 브라우징 대응
  • · 동적 UI 인터랙션 구현
크린토피아 블랙라벨

크린토피아 블랙라벨 서비스 런칭을 위한 브랜드 홍보용 랜딩페이지 구축 프로젝트

PHPHTML5CSS3JavaScriptjQuery
퍼블리싱 (100%)
  • · 반응형 웹 UI 구현 및 크로스 브라우징 대응
  • · 동적 UI 인터랙션 구현
라피치

AI 기반 대화형 솔루션 기업 RAPEECH의 브랜드 소개 및 기술 홍보를 위한 기업 공식 홈페이지 구축 프로젝트

사이트 바로가기
PHPHTML5CSS3JavaScriptjQuery
퍼블리싱 (부분)
  • · 메인페이지 반응형 웹 UI 구현 및 크로스 브라우징 대응
  • · 동적 UI 인터랙션 구현
브릿지 네트워크

기업 협업과 콘텐츠/마케팅 지원을 위한 다국어 허브 플랫폼 구축 프로젝트

사이트 바로가기
PHPHTML5CSS3JavaScriptjQuery
퍼블리싱 (100%)
  • · 반응형 웹 UI 구현 및 크로스 브라우징 대응
  • · 동적 UI 인터랙션 구현
잇다카

차량 구매 서비스를 제공하는 홈페이지 구축 프로젝트

사이트 바로가기
PHPHTML5CSS3JavaScriptjQuery
퍼블리싱 (100%)
  • · 반응형 웹 UI 구현 및 크로스 브라우징 대응
  • · 동적 UI 인터랙션 구현
고양원픽

고양특례시 홍보 홈페이지 구축

사이트 바로가기
PHPHTML5CSS3JavaScriptjQuery
퍼블리싱 (100%)
  • · 반응형 웹 UI 구현 및 크로스 브라우징 대응
  • · 동적 UI 인터랙션 구현
개발 (100%)
  • · php(그누보드) 기반 솔루션을 활용한 게시판 스킨 구조 수정 및 기능 확장
소야랑

소야도 방문객과 주민을 위한 문화공간 홍보&예약 홈페이지 구축

사이트 바로가기
PHPHTML5CSS3JavaScriptjQuery
퍼블리싱 (100%)
  • · 반응형 웹 UI 구현 및 크로스 브라우징 대응
  • · 동적 UI 인터랙션 구현
KFRM 사업화지원플랫폼

범부처재생의료기술개발사업단의 온·오프라인 소통 협력지원 홈페이지 구축

사이트 바로가기
PHPHTML5CSS3JavaScriptjQuery
퍼블리싱 (100%)
  • · 반응형 웹 UI 구현 및 크로스 브라우징 대응
  • · 동적 UI 인터랙션 구현
개발 (100%)
  • · php(그누보드) 기반 솔루션을 활용한 게시판 스킨 구조 수정 및 기능 확장
DCK 디지콘셉코리아

반도체, 패키지 분석 전문 회사 홈페이지 구축

사이트 바로가기
PHPHTML5CSS3JavaScriptjQuery
퍼블리싱 (100%)
  • · 반응형 웹 UI 구현 및 크로스 브라우징 대응
  • · 동적 UI 인터랙션 구현
SJ 네일

네일제품을 소개 및 판매하는 다국어 쇼핑몰 구축

사이트 바로가기
PHPHTML5CSS3JavaScriptjQuery
퍼블리싱 (100%)
  • · 반응형 웹 UI 구현 및 크로스 브라우징 대응
  • · 동적 UI 인터랙션 구현
ONCO

골프 관련 제품을 소개 및 판매, 골프공 커스텀이 가능한 쇼핑몰 구축

사이트 바로가기
PHPHTML5CSS3JavaScriptjQuery
퍼블리싱 (100%)
  • · 반응형 웹 UI 구현 및 크로스 브라우징 대응
  • · 동적 UI 인터랙션 구현
은생당한의원

은생당 한의원 소개 및 진료과목 안내 홈페이지 구축

사이트 바로가기
PHPHTML5CSS3JavaScriptjQuery
퍼블리싱 (100%)
  • · 반응형 웹 UI 구현 및 크로스 브라우징 대응
  • · 동적 UI 인터랙션 구현
더그루

산림문화협동조합 더그루의 소개와 예약, 공지 전달을 위한 웹사이트 구축

사이트 바로가기
PHPHTML5CSS3JavaScriptjQuery
퍼블리싱 (100%)
  • · 반응형 웹 UI 구현 및 크로스 브라우징 대응
  • · 동적 UI 인터랙션 구현