YJ 정연주 홈으로

정보를 정리하고,
화면으로 완성하는

웹퍼블리셔 정연주입니다.

Figma · Photoshop · Illustrator
HTML · CSS · Sass · JavaScript · jQuery

정연주

웹 퍼블리셔

  • #정보구조화
  • #반응형웹
  • #화면구현
  • #꼼꼼한검수

교육

UX/UI 웹퍼블리셔 & 웹 콘텐츠 개발자 양성과정 수료

2024. 10.

자격

웹디자인개발기능사

2026. 06.

이전 경험

문화재 조사자료 정리 및 보고서 검수

시공문화재연구원 · 2022. 08. ~ 2023. 12.

자료를 정리하던 경험을 바탕으로,
콘텐츠를 구조화하고 화면으로 구현합니다.

01. 자료 구조화

콘텐츠를 보기 쉬운 흐름으로 정리합니다.

02. 세밀한 검수

작은 오류까지 꼼꼼하게 확인합니다.

03. 화면 구현

정리한 내용을 반응형 화면으로 구성합니다.

기술 역량

웹 구현 경험과 활용 도구

디자인

  • Figma 색·글자 스타일을 CSS 변수로 옮김첫직관
  • Photoshop 메인 비주얼·배너·목업 합성소하
  • Illustrator 캘린더·속지 그래픽개인 작업

퍼블리싱

  • 시맨틱 마크업, Flex·Grid 반응형한화문물연구원
  • Sass 변수로 색·브레이크포인트 정리소하
  • 접근성: alt 구분, 44px 터치 영역, ARIA근무 인수인계 웹앱

인터랙션

  • jQuery 탭·hover 패널·스크롤 이동소하
  • Swiper 슬라이드, 고정 헤더소하 · 한화문물연구원
  • CSS 애니메이션, 움직임 줄이기 대응첫직관 · 이 사이트

AI · 작업 도구

  • 기능을 나눠 Claude Code·ChatGPT에 요청하고 직접 검수근무 인수인계 웹앱 · 전시갈래
  • Git · GitHub Pages · Vercel 배포전 프로젝트
  • DevTools로 반응형·오류 검수전 프로젝트

완료한 프로젝트

소하 쇼핑몰 프로젝트 썸네일

소하(개인)

디지털 문구를 처음 접하는 사용자를 위한 쇼핑몰

Photoshop · HTML · CSS · jQuery · Swiper.js

  • 기획 흐름 정리부터 퍼블리싱까지 전담했으며,
    상품 탐색 흐름과 피드백을 반영해
    화면 완성도를 높였습니다.
자세히 보기 사이트 보기
기획서 PDF 보기
한화문물연구원 리뉴얼 프로젝트 썸네일

한화문물연구원(개인)

문화재 연구기관 리뉴얼 반응형 웹사이트

Figma · HTML · CSS · JavaScript · jQuery

  • 문화재 실무 이해를 바탕으로 기관 콘텐츠 구조를 정리하고, 반응형 메인과 인사말 서브페이지를 구현했습니다.
자세히 보기 사이트 보기

진행 중인 프로젝트

전시갈래 전시 탐색 서비스 썸네일

전시갈래(개발중)

공공문화정보 기반 전시 탐색 서비스

React · Vite · Vercel Functions · AI 코딩 도구

  • 기능과 화면을 정의해 ChatGPT·Claude Code로 구현하고, 공공문화정보 API로 전시 검색·관람 상태 구분·카드형 목록을 만들었습니다.
GitHub 보기 사이트 보기
근무 인수인계 웹앱 화면 썸네일

근무 인수인계 웹앱(개발중)

편의점 교대 보고를 자동으로 만드는 모바일 웹

HTML · CSS · JavaScript · Claude Code

  • 실제 근무 흐름을 바탕으로 필요한 기능을 정의하고 Claude Code로 구현해, 지금도 근무하며 쓰고 고치고 있습니다.
GitHub 보기 사이트 보기
땅파기전 문화유산 지도 서비스 썸네일

땅파기전(개발중)

공사 전 문화유산 사전 확인 지도 서비스

React · Leaflet · Vercel Functions · AI 코딩 도구

  • 문화재 조사 현장에서 겪은 불편을 바탕으로, 지도에서 필지를 누르면 필요한 절차를 쉬운 말로 안내하도록 기획했습니다.
GitHub 보기 사이트 보기
첫직관 직관 가이드 웹앱 홈 화면 썸네일

첫직관(개발중)

경기장에 처음 가는 사람을 위한 직관 가이드 웹앱

Figma · HTML · CSS · JavaScript · AI 코딩 도구

  • 종이 티켓 스크랩북 콘셉트로 디자인 기준을 정하고, 응원팀을 고르면 구단 색이 화면 전체에 적용되도록 구현했습니다.
GitHub 보기 사이트 보기

디자인

직접 디자인한 웹 그래픽과 UI 작업물

소하 메인 비주얼

소하 · 브랜드 비주얼

메인 비주얼, 브랜드·상품 배너, 상품 목업 이미지

Photoshop

소하 디지털 속지 상품

소하 · 상품 디자인

일주일 플래너, 습관 트래커, 위클리 속지

디지털 문구 속지

심다 저축 습관 앱 화면

심다 · 저축 습관 앱 UI

앱 화면 흐름과 타이포·컬러·버튼 스타일 가이드

Figma

롯데자이언츠 캘린더와 미니 가계부

개인 그래픽 작업

직접 쓰려고 만든 롯데자이언츠 캘린더, 미니 가계부

Illustrator

</portfolio>
끝까지 봐주셔서 감사합니다.

프로젝트와 채용 관련 연락은
아래 메일 또는 폼으로 남겨주세요.

yeonisle@gmail.com
github.com/yeonland