최근 kimtoma.com 포트폴리오 사이트의 홈 화면을 대폭 개선했습니다. 시계 위젯의 디테일을 다듬고, 모바일 환경에서의 사용성을 크게 향상시켰습니다.
시계 위젯 개선
연속 회전 초침
기존에는 초침이 60초에 도달하면 0초로 되돌아가면서 부자연스러운 움직임을 보였습니다. 이를 개선하여 초침이 계속 한 방향으로 부드럽게 회전하도록 수정했습니다.
// 연속 회전을 위한 누적 각도 추적
const [totalRotation, setTotalRotation] = useState(0)
useEffect(() => {
if (prevSeconds.current === 59 && seconds === 0) {
setTotalRotation(prev => prev + 360)
}
}, [seconds])
const secDeg = totalRotation + (seconds / 60) * 360
쿼터 시간 마커 강조
3시, 6시, 9시, 12시 위치의 마커를 더 크게 표시하여 시계의 가독성을 높였습니다. 일반 마커는 작게, 쿼터 시간은 눈에 띄게 디자인했습니다.
포커스 모드 애니메이션 최적화
- 진입: 500ms 부드러운 전환
- 종료: 트랜지션 없이 즉시 복귀
위젯을 클릭하면 부드럽게 확대되고, 닫기 버튼을 누르면 빠르게 원래 상태로 돌아갑니다.
전체 날짜 표시
포커스 모드에서는 단순히 "1" 대신 "2026.02.01" 형식으로 연도, 월, 일을 모두 표시합니다.
모바일 UX 개선
위젯 배치 최적화
모바일에서 위젯이 겹치는 문제를 해결했습니다:
- About 위젯의 하단 버튼 여백 조정
- Whiteboard 툴바를 화면 하단에서 상단으로 이동
- 닫기 버튼과의 충돌 방지
위젯 순서 재정렬
모바일 화면에서 위젯이 표시되는 순서를 조정했습니다:
- ⏰ Clock - 시계
- 👋 About - 자기소개
- 📝 Latest Post - 최신 블로그 포스트
- 🔺 KIMTOMA O/S Logo - 브랜드 로고
새로운 위젯 추가
Latest Post Widget
가장 최근 블로그 포스트를 홈 화면에서 바로 확인할 수 있는 위젯을 추가했습니다. About 위젯과 유사한 스타일로 디자인했으며, Secondary 버튼 스타일을 적용해 시각적 계층을 분명히 했습니다.
기술적 디테일
Cubic-Bezier 애니메이션
초침에 부드러운 움직임을 위해 cubic-bezier(0.4, 0.0, 0.2, 1) easing 함수를 적용했습니다. 이는 자연스러운 가속과 감속을 제공합니다.
조건부 트랜지션
${isFocused ? 'transition-all duration-500 ease-out' : ''}
포커스 상태일 때만 트랜지션을 적용하여, 종료 시에는 즉각적인 반응성을 제공합니다.
개발 도구 개선
반복적인 배포 작업을 간소화하기 위해 /deploy 슬래시 명령어를 추가했습니다. 이제 한 번의 명령으로 Git 커밋, 푸시, 문서 업데이트를 모두 처리할 수 있습니다.
# 글로벌 명령어로 설정
~/.claude/commands/deploy.md
마무리
작은 디테일들이 모여 전체적인 사용자 경험을 크게 개선했습니다. 특히 모바일 환경에서의 터치 인터랙션과 포커스 모드 전환이 훨씬 부드러워졌습니다.
앞으로도 지속적으로 개선해나갈 예정입니다.