간단한 질문에서 시작되었습니다: “Teletext를 다시 가져올 수 있다면?”
Source: Dev.to
The Idea
텔레텍스트는 2012년에 사라졌습니다. 저는 그것을 부활시키고 싶었지만, 약간의 변형을 주고 싶었습니다. 만약 과거로 돌아가서 역사상의 어느 날짜에 텔레텍스트가 어떤 내용을 보여줬을지 볼 수 있다면 어떨까요?
그래서 바로 그 기능을 만들었습니다: 실시간 뉴스, 날씨, 암호화폐 가격 – 그리고 1940년부터 어제까지의 날짜를 탐험할 수 있는 타임머신.
What Made This Fun
MCP Servers Changed Everything
키로(Kiro)에는 할 수 있는 범위를 확장해 주는 MCP 서버라는 것이 있습니다. 저는 큰 차이를 만든 두 가지를 사용했습니다:
- Ref MCP 덕분에 편집기를 떠나지 않고도 문서를 검색할 수 있었습니다. GSAP 애니메이션 구문이나 Wikipedia API 사용법을 알아야 할 때, 그냥 물어보면 필요한 정확한 문서를 바로 얻을 수 있었습니다. 이제 Stack Overflow와 코드를 왔다갔다 할 필요가 없었습니다.
- Firecrawl MCP는 원본 텔레텍스트 디자인을 스크랩하고 조사하는 데 도움을 주었습니다. 실제 텔레텍스트가 어떻게 보였는지에 대한 참고 이미지와 문서를 가져와 구현에 활용할 수 있었습니다.
추측하고 고치는 대신, 조사하고 바로 구축할 수 있었죠. 훨씬 더 재미있었습니다.
Steering Docs Are Like Cheat Codes
저는 키로에게 정확히 어떻게 작업을 수행하길 원하는지 알려주는 마크다운 파일 7개를 작성했습니다 – 색상, 애니메이션 타이밍, 코드 패턴 등 – 모두 한 번에 문서화했습니다.
가장 유용했던 파일은 GSAP 가이드였습니다. 올바른 구문(power2.out, 이전의 Power2.easeOut이 아님)을 적어 두었고, 키로는 한 번도 틀리지 않았습니다. 20개가 넘는 애니메이션, 구문 오류 제로.
The Time Travel Animation
제가 가장 좋아했던 부분입니다. 원하는 것을 이렇게 설명했습니다:
- 화면 흐림
- 흰색 플래시
- 연도가 역순으로 카운트 (2025… 1990… 1969…)
- 역사적 사건 등장
키로는 첫 번째 시도에서 바로 구현했습니다. 작동하는 모습을 보는 것은 실제 마법과도 같았습니다.
The Numbers
- 772개의 통과 테스트
- 6개의 API 통합
- 20개 이상의 애니메이션
- 5일간의 구축 기간
What I Learned
AI 코딩 어시스턴트는 마법 상자가 아닙니다. 협업 파트너입니다. 명확한 지시를 주면 놀라운 결과를 보여줍니다. 모호한 프롬프트를 주면 고치느라 시간을 많이 쓰게 됩니다.
MCP 서버가 예상치 못한 영웅이었습니다. 컨텍스트 전환 없이 조사할 수 있었기 때문에 흐름 상태에 오래 머물 수 있었습니다.
Try It
앱이 라이브 상태입니다. 1969년 7월 20일로 여행을 떠나 어떤 일이 있었는지 확인해 보세요. “BURST” 를 입력하면 깜짝 이벤트가 나타납니다.