메일 보내기

3년차 프론트엔드 개발자이찐빵

접근성과 성능을 챙기는 골든햄스터 개발자예요. 시안을 시맨틱 마크업으로 옮기고, 키보드와 휴대폰으로 직접 눌러 본 다음에 넘겨요.

작업 보기메일 보내기
최근 작업몰리 젤리 제품 페이지결맞춤 PT 신청 페이지
클레이 쿠션 위에서 작은 노트북 자판에 두 앞발을 올린 골든햄스터 이찐빵

작은 앞발로
끝까지 챙겨요

이찐빵은 웹 화면을 만드는 3년차 프론트엔드 개발자예요. 디자인 시안을 시맨틱 마크업으로 옮기고, 키보드만으로 끝까지 쓸 수 있는지, 휴대폰 폭에서 가로로 밀리지 않는지 직접 확인한 다음에 손을 떼요.

3년차
퍼블리싱에서 시작해 지금은 주요 화면을 맡는 프론트엔드 경력(가상)
2개
지금 바로 열어 볼 수 있는 데모 사이트
5가지
손에 익은 기술, 아래 기술 칸에 하나씩 적었어요

이찐빵이 만든 작업

둘 다 가상 브랜드로 만든 데모예요. 실제 고객은 없지만 사이트는 진짜로 열리고, 결과 칸의 내용은 2026년 10월 26일에 직접 다시 확인했어요.

몰리 젤리 데모 첫 화면: 검은 바탕 위 큰 영문 제목과 자두 맛 파우치

몰리 젤리 — 파우치 곤약젤리

제품 랜딩 페이지가상 데모
문제
돌려 여는 파우치라는 차이가 사진 한 장으로는 잘 전해지지 않았어요
내가 맡은 일
시안을 한 장짜리 화면으로 옮기고, 휴대폰과 데스크톱 배치를 따로 잡았어요
핵심 구현
프레임워크 없이 HTML·CSS로 짜고, 움직임 줄이기 설정을 켜면 등장 효과가 멈춰요
확인한 결과
375px·1440px 폭에서 가로 스크롤 없음. 자동 접근성 검사(axe)는 375px 1건, 1440px 0건

HTML · CSS · JavaScript

사이트 열기 (새 창)
결맞춤 PT 데모 화면: 햇빛 드는 스튜디오 사진과 흰 제목

결맞춤 PT — 1:1 스튜디오

신청 랜딩 페이지가상 데모
문제
등록하기 전에 트레이너를 비교해 볼 방법이 없었어요
내가 맡은 일
트레이너 세 명 비교 화면과 체험 PT 신청 폼
핵심 구현
Next.js와 TypeScript, 폼마다 필수·선택 표시와 키보드 순서
확인한 결과
375px 폭 자동 접근성 검사(axe) 0건, 가로 스크롤 없음

Next.js · TypeScript

사이트 열기 (새 창)

자주 쓰는 기술 다섯 가지

숙련도는 막대나 퍼센트 대신 말로 적었어요. 얼마나 자주 쓰는지가 더 정직하니까요.

네 발을 바닥에 붙이고 얌전히 앉아 정면을 보는 골든햄스터 이찐빵

  • HTML · CSS

    시맨틱 마크업, 그리드와 플렉스, 화면 폭마다 따로 잡는 배치

    매일 써요

  • JavaScript · TypeScript

    타입으로 실수를 미리 막고, 브라우저 기본 기능부터 써요

    매일 써요

  • React

    상태를 작게 나누고, 다시 쓰는 컴포넌트로 쌓아요

    자신 있어요

  • Next.js

    App Router, 서버 컴포넌트, 이미지·폰트 불러오기

    자신 있어요

  • 접근성 · 성능

    대비·포커스·움직임 줄이기 확인, Lighthouse로 재 보기

    자신 있어요

3년 동안 맡은 일

해마다 맡는 범위가 넓어졌어요. 연차를 누르면 그해에 한 일이 펼쳐져요.

가상 캐릭터의 가상 경력이에요. 회사 이름은 모두 지어냈어요.

  • 소개 사이트 화면을 시맨틱 마크업으로 다시 짰어요
  • 휴대폰에서 깨지던 배치를 화면 폭마다 고쳤어요
  • 디자이너와 간격·글자 크기 규칙을 처음 함께 정했어요

HTML · CSS · JavaScript

  • 장바구니부터 주문 완료까지 흐름을 컴포넌트로 나눴어요
  • 버튼·입력칸을 디자인 시스템 컴포넌트로 묶었어요
  • 키보드만으로 주문을 끝낼 수 있게 고쳤어요

React · TypeScript · 디자인 시스템

  • Next.js App Router로 옮기면서 페이지 구조를 정리했어요
  • 이미지와 폰트 불러오는 방식을 바꿔 첫 화면을 가볍게 했어요
  • 배포 전에 보는 접근성 확인 목록을 만들어 팀과 나눠요

Next.js · TypeScript · Lighthouse

클레이 블록 위에 앞발을 모으고 앉은 골든햄스터 이찐빵꼼꼼해요접근성 챙겨요가볍게 만들어요

안녕하세요,
이찐빵이에요

볼주머니에 해바라기씨를 꽉 채우듯 화면도 빈 곳 없이 챙기는 골든햄스터예요. 이찐빵은 가상 캐릭터이고, 이 페이지는 귀여운 개발자 포트폴리오 데모예요.

  • 먼저 물어봐요무엇을 하려는 화면인지, 누가 쓰는지부터 확인해요.
  • 작게 나눠요한 번에 다 바꾸지 않고, 확인할 수 있는 크기로 나눠 올려요.
  • 직접 눌러 봐요키보드·휴대폰·움직임 줄이기 설정으로 한 번씩 써 봐요.
해바라기씨 그릇과 작은 화분이 놓인 책상에서 노트북 자판에 앞발을 올린 이찐빵

넘기기 전에 확인해요

화면을 넘기기 전에 매번 이 네 가지를 직접 해 봐요. 이 페이지도 같은 방법으로 확인했어요.

  • 키보드로 끝까지Tab만으로 모든 버튼에 닿고, 포커스 테두리가 보이는지
  • 375px 휴대폰 폭가로로 밀리지 않고, 본문이 16px 이상인지
  • 움직임 줄이기설정을 켜면 떠오르는 효과가 멈추는지
  • 글자 대비 4.5:1바탕 위 글자 색을 재서 기준을 넘는지

같이 만들어요

만들고 싶은 화면이 있으면 메일 한 통이면 돼요. 무엇을, 언제까지 만들고 싶은지만 적어 주세요.

jjinppang@example.com

실제로 받는 사람이 없는 예시 주소예요.

캐러멜색 클레이 접시에 앉아 두 앞발로 해바라기씨를 안은 이찐빵