버튼 UI에 게임스러운 감각을 더해 완성도를 높였다

버튼 비주얼을 아케이드 스타일로 리디자인하고 진행 상황 표시 모티프를 추가했다. package.json, ButtonClient.tsx, globals.css를 손본 이번 작업은 단순 스타일 개선을 넘어, 제품의 시각적 일관성과 사용자 상호작용감을 함께 다루는 작업이었다.

왜 버튼을 다시 만들었나

프로덕트에서 버튼은 모든 상호작용의 출입구다. 초기에는 심플한 박스 스타일로 시작했지만, 시간이 지나면서 느껴지는 것들이 있었다. 사용자가 버튼을 누를 때 그 피드백이 약했고, 진행 상황이나 상태 변화가 명확하게 전달되지 않는다는 피드백이 들어오곤 했다. 특히 멀티스텝 플로우나 백그라운드 작업 완료 단계에서 "지금 어디까지 진행됐는지"를 시각적으로 보여줄 방법이 필요했다.

또 다른 측면은 브랜드다. 우리 제품이 가진 톤&매너를 생각해보니, 딱딱한 미니멀리즘보다는 좀 더 친근하고 장난스러운 느낌이 어울릴 것 같았다. 아케이드나 게임 인터페이스에서 오는 그 "눌린다"는 감각, 즉 물리적인 피드백을 CSS와 애니메이션으로 구현하면 사용자들이 더 몰입감 있게 느낄 것 같았다.

구현 방향

globals.css에서는 CSS 변수를 활용해 색상, 그림자, 모서리 반경 등을 정의했다. 이렇게 하면 나중에 테마를 바꾸거나 여러 변형(primary, secondary, danger 등)을 만들기가 훨씬 쉽다.

/* 예시 구조 (실제 구현은 다를 수 있음) */
--button-bg: #fff;
--button-shadow-rest: 0 4px 6px rgba(0,0,0,0.1);
--button-shadow-press: inset 0 2px 4px rgba(0,0,0,0.2);
--transition-duration: 80ms;

ButtonClient.tsx에서는 마우스 이벤트, 포커스, 활성화 상태에 따라 동적으로 클래스를 추가/제거한다. 특히 "milestone fills"라는 표현이 들어간 것을 보면, 버튼 내부에 진행 바(progress bar)나 단계 표시(step indicator)를 시각화하는 부분이 있을 것 같다. 이런 UI 요소는 단순 스타일만으로는 안 되고, 컴포넌트 상태와 렌더링 로직이 함께 움직여야 한다.

이 작업이 남긴 것들

첫째, 디자인 토큰의 중요성을 다시 느꼈다. 버튼 하나를 손보다 보니 색상, 그림자, 애니메이션 타이밍이 모두 엉뚱하게 산재되어 있었다. globals.css에서 이를 중앙화하자 나중에 다른 컴포넌트(input, card, modal 등)에도 같은 원칙을 적용하기가 훨씬 쉬워졌다. 팀원들과 "우린 어떤 톤의 UI를 원하는가"를 시각적으로 합의할 수 있는 기반도 생겼다.

둘째, 성능과 재미의 트레이드오프다. 아케이드 스타일의 버튼은 그림자, 애니메이션, 텍스처 등이 많이 들어간다. CSS 애니메이션과 transform을 활용하면 자연스러우면서도 60fps를 유지할 수 있지만, 번들 크기가 늘어날 수 있다. 그래서 package.json에 추가하는 라이브러리가 정말 필요한지, 아니면 순수 CSS로 충분한지 신경 썼다.

셋째, 이런 작업의 "눈에 띄지 않는" 가치다. 백엔드 API 최적화나 버그 수정처럼 명확한 메트릭이 없다. 하지만 사용자가 앱을 썼을 때 "아, 이 버튼 누르는 게 마음에 든다"는 느낌이 누적되면, 그게 제품 만족도가 된다. 팀에서도 처음엔 "디자인은 디자이너가 하는 거 아닌가"라는 반응도 있었지만, 개발자가 피그마를 읽고 직접 구현 가능한 수준까지 시각적 디테일을 챙기는 것이 결국 팀 전체의 완성도를 높인다.

이런 류의 "visual polish" 작업은 스프린트 중간에 끼워 넣기 쉽고, 팀원들과의 협업도 자연스럽게 일어난다. 코드 리뷰 때도 "이 애니메이션 타이밍은 어떻게 생각해?" 같은 대화가 나온다. 다음.

🛒 이 글과 어울리는 추천 상품

• 기계식키보드 쿠팡에서 보기 →
• 인체공학마우스 쿠팡에서 보기 →
• 책상조명 쿠팡에서 보기 →

*위 링크는 쿠팡파트너스 활동의 일환이며, 일정액의 수수료를 제공받을 수 있습니다.