Kiro와 함께 반응형 인터페이스 구축: 내 첫 해커톤 프로젝트
Source: Dev.to
내 첫 해커톤 프로젝트이자 인터랙션 디자인 실험.
간단한 할로윈 일기로 시작했지만 곧 UI 동작과 UX 제약에 대한 이해를 넓히는 작은 디지털 세계로 변모했습니다. 목표는 “테마 일기”에서 사용자에게 반응하는 인터페이스를 만드는 것으로 바뀌었습니다—앱은 움직일 때, 멈출 때, 글을 쓸 때, 탭을 전환할 때, 떠나려 할 때 반응하고, 비활동 상태가 길어지면 환경의 일부가 살아납니다.
이 글에서는 아키텍처, 트레이드‑오프, 실수, 그리고 Kiro가 엔지니어링 과정에 어떻게 영향을 미쳤는지 설명합니다.
Behavioural System
핵심 아이디어는 UI가 행동에 반응해야 한다는 것이었습니다:
- 탭 전환 시 짧은 상태 메시지를 표시합니다.
- 커서가 비활성화되면 특정 컴포넌트가 애니메이션되거나 이동합니다.
- 장시간 비활성화 시 환경 변화가 발생합니다.
- 포커스가 맞춰진 섹션은 시각적 잡음을 줄입니다.
이 기능들은 가벼운 이벤트‑드리븐 상태 머신과 엄격히 제어된 부수 효과에 의존합니다. 행동 레이어가 복잡해져도 예측 가능성을 유지하는 것이 목표였습니다.
Architecture and Stack
- React와 TypeScript
- TailwindCSS
- 인증 및 Firestore를 위한 Firebase
- Vite
- 행동 결정을 위한 내부 상태 머신
- 커스텀 애니메이션 훅
- 로직을 격리하는 유틸리티 모듈
대부분의 작업은 행동 기능이 렌더 사이클을 압도하지 않도록 방지하는 데에 집중되었습니다. 가장 어려운 부분은 어떤 컴포넌트가 사용자 입력에 반응하고, 어떤 컴포넌트는 정적이어야 하는지를 결정하는 것이었습니다. 활동이 너무 많으면 잡음이 생기고, 너무 적으면 코스튬 콘테스트의 컨셉이 무너지기 때문입니다.
Working With Kiro
Documentation
프로젝트는 .kiro 폴더 안에 진화하는 사양을 보관했습니다. 여기에는 Haunted Diary 사양, 스크랩북 흐름 다이어그램, 인터랙션 규칙, 트리거 정의가 포함되었습니다. 방향이 급변할 때 참고점 역할을 했습니다.
Refactoring and Code Quality
Kiro는 컴포넌트를 반복적으로 리팩터링하고, 구조를 재조정하며, 중복 로직을 제거하고, 가독성을 향상시켰습니다. 이는 프로젝트가 관리 불가능한 아키텍처로 흐트러지는 것을 방지했으며, 해커톤에서 흔히 발생하는 실패 요인을 차단했습니다.
Testing
Kiro는 테스트 스위트를 작성·정제·확장하면서 엣지 케이스를 초기에 발견하고, 행동 트리거가 서로 충돌하지 않도록 보장했습니다.
Performance
첫 번째 버전은 렌더 타이밍에 문제가 있었습니다. Kiro는 불필요한 재렌더를 찾아내고, 여러 컴포넌트를 재구성했으며, 지연 로딩 전략을 개선해 부드러운 인터랙션을 유지하도록 도왔습니다.
Error Handling and Compliance
Kiro는 가드레일을 추가하고, 오류 상태를 매핑했으며, 사용자 콘텐츠에 대한 규정 준수를 안내했습니다. 여기에는 FIPPA 고려사항도 포함됩니다. 결과적으로 더 안전하고 예측 가능한 애플리케이션이 탄생했습니다.
Tooling and Micro‑Interactions
Kiro와 작업하면서 작은 UX 터치가 등장했습니다: 툴팁, 애니메이션 타이밍, 메시지 톤, 그리고 환경을 일관되게 느끼게 하는 마이크로 응답들입니다.
Challenges
첫 해커톤 제출물로서는 야심찬 프로젝트였습니다:
- 여러 버전의 특정 컴포넌트가 존재하면서 상태 혼란이 발생했습니다.
- 감각‑밸런스 문제를 해결하기 위해 의도적인 튜닝이 필요했습니다.
- 행동 트리거가 가끔 서로 경쟁했으며, 우선순위 로직을 개선하는 데 시간이 걸렸습니다.
이 프로젝트는 애니메이션 UX를 탐구하는 계기가 되었으며, Kiro가 구조화된 엔지니어링 파트너로서 어떻게 기능할 수 있는지를 보여줍니다—문서화, 리팩터링, 테스트, 성능 튜닝, 아키텍처 결정에 기여했습니다. 첫 해커톤 제출이면서 혼자 작업한 경우, 워크플로우는 급하게 주말에 만든 빌드보다 실제 엔지니어링 프로세스에 더 가까웠습니다.