플러스프로젝트 배경
1) 문제점 "AI 코딩 도구로 만들어 자동 생성한 티가 난다." 운영 중인 필라테스 예약 서비스가 안고 있던 문제입니다. 사내 개발자가 없는 상태에서 6개 화면을 각각 손보면 화면마다 기준이 달라지고, 나중에 화면을 하나 더 만들 때 또 어긋납니다. 데스크톱에서 모바일처럼 좁은 칸에 갇혀 나오는 문제도 뿌리가 같습니다. 색과 글자 크기와 여백이 각 화면에 직접 박혀 있어서 고칠 자리가 흩어져 있는 상태
프로젝트 성과
톤 전환에 든 코드 — CSS 변수 한 벌 약 50줄
컴포넌트 코드의 분기는 0건입니다. html 속성 한 글자를 바꾸면 색·글자·여백·모서리·그림자가 함께 갈립니다.
세 화면 모두 로딩·에러·빈 상태에 실제로 도달
배포본에서 클릭으로 세 상태에 전부 닿습니다. 에러는 「다시 시도」와 「마지막 값으로 계속 보기」 두 갈래를 줍니다.
반응형 3폭 — 360 / 768 / 1280 각각 다른 레이아웃
768은 상세를 2단으로 접고 360은 리스트/지도 토글로 갈아탑니다. 두 폭의 페이지 높이가 같던 것을 실측으로 잡았습니다.
접근성 실측 — 본문 대비 4.5:1 · 터치 타겟 44px
대비 미달 4건을 5.02~5.25:1로 올렸고, 지도 핀은 겉모양 33px을 두고 누르는 범위만 44px로 넓혀 14개 전수 확인했습니다.
핵심 기능
기본 템플릿 ↔ 개선 톤 스위치
세 화면 우상단 같은 자리에 있습니다. 누르면 배경·중립축·액센트·폰트·타이포·여백·모서리·그림자가 함께 바뀝니다.
진행 단계
공고 해석 · 화면 선정
2026.09.
6개 화면 중 방향을 가장 잘 보여 줄 3개를 골랐습니다. 결제·인증은 발주 범위에서 제외된 항목이라 그리지 않았습니다.
프로젝트 상세
1) 소개 실시간 공석·위치 기반 필라테스 예약 서비스의 화면을 "자동 생성한 티가 난다"는 상태에서 끌어올리는 방법을 보여 주는 제안용 데모입니다. 핵심 화면 3개를 실제로 만들어 배포했고, 결과물 URL에서 직접 눌러 보실 수 있습니다. 이 데모의 중심은 화면 우상단의 스위치입니다. 「기본 템플릿」과 「개선 톤」을 오갈 수 있는데, 두 상태는 컴포넌트 코드가 완전히 같습니다. 갈리는 것은 색·글
