Intro / 01
여러 환경에서도
안정적인 화면을
만듭니다.
QA 엔지니어로 2년 4개월간 다양한 환경에서 결함을 찾아왔습니다. 지금은 그 검증 습관을 마크업과 반응형 구현에 적용해, 화면 크기와 사용 방식이 달라도 안정적으로 동작하는 웹을 만듭니다.
- QA experience
- 2년 4개월
- Projects
- 5개
- Breakpoints
- 모바일 · 태블릿 · PC
- Stack
- HTML5 · CSS3
Vanilla JS · PHP
-
01 · featured · 2026-08
SHIFT — AI Website Showcase
개요 산업기술·B2B, 인테리어·공간, 로컬 F&B 세 업종의 웹사이트를 하나의 화면에서 전환해 비교할 수 있도록 만든 반응형 웹사이트 쇼케이스입니다. 색상만 바꾸는 방식이 아니라 업종마다 방문 목적과 필요한 정보가 다르다는 점을 기준으로 화면…
-
02 · 2025.04
Personal Dashboard
개요 이직 준비 기간의 할 일과 일정을 기록하려고 만들기 시작해, 포트폴리오 페이지와 하나로 합친 개인 대시보드입니다. 칸반 보드, 캘린더, 지식 아카이브를 한 …
-
03 · 2026.05
Smart Wallet Dashboard
개요 개인 자산을 한 화면에서 관리하는 대시보드입니다. 전체 자산 현황, 한 달 지출, 주식 계좌 손익을 함께 봅니다. 자산 관리 앱들이 대부분 모바일 중심이라 …
-
04 · 2026.05 ~
WORKY
개요 직장인의 반복 업무를 AI로 줄이고, 필요한 정보를 한곳에서 관리할 수 있도록 만든 업무 보조 웹 애플리케이션입니다. 마케팅 회사에서 일하는 지인이 문서 양…
-
05 · 2026.05
WORKY mini
개요 Worky 웹과 연동되는 Windows 데스크탑 앱입니다. 거래처별 카카오톡 채팅방을 빠르게 열고, 보고 메시지를 클립보드에 복사해 반복 작업을 줄이는 것이…
“이 화면은 다른 환경에서도 의도대로 보일까?”
QA 업무에서 반복해 온 질문을 퍼블리싱에도 이어갑니다.
검증 습관
구현한 화면을 실기기와 데스크톱 브라우저에서 확인하고, 발견한 문제를 수정하며 완성도를 높입니다.
접근성 기준
시맨틱 태그와 대체 텍스트, 키보드 이동, 본문 대비를 구현 과정에서 점검합니다.
순수 CSS
프레임워크에 의존하지 않고 Grid와 Flexbox, 미디어쿼리를 활용해 화면 구조와 반응형 레이아웃을 구현합니다.