Claude로 제작한 'Claude 2배 제한 프로모션' 시간 추적 도구: promoclock.co

커뮤니티 반응

사용자들은 프로모션 시간을 확인하는 번거로움을 해결해준 도구에 대해 긍정적인 반응을 보였으며, 특히 AI를 활용한 빠른 개발 속도와 깔끔한 UI에 주목했다.

실용적 조언

복잡한 시간대 및 DST 계산 시 브라우저 내장 Intl.DateTimeFormat API를 활용하면 외부 라이브러리 없이도 정확한 처리가 가능하다.
Next.js 15 환경에서 다국어 지원이 필요할 경우, 서버 컴포넌트 기반 미들웨어를 사용해 클라이언트 측 자바스크립트 비중을 줄일 수 있다.

섹션별 상세

사용자는 Claude를 활용해 복잡한 시간대 변환 로직을 구현했다. 특히 미국의 일광 절약 시간제(DST) 변경 사항을 정확히 반영하기 위해 JavaScript의 Intl.DateTimeFormat API를 활용한 로직을 Claude와 함께 작성하여 오차 없는 시간 계산을 실현했다.

웹 프레임워크로 Next.js 15의 App Router를 채택했다. 클라이언트 번들 크기를 최소화하기 위해 서버 컴포넌트 기반의 경량 i18n 미들웨어를 구축하여 성능 저하 없이 10개 국어를 지원하도록 설계했다.

UI 디자인과 로고 제작에도 AI를 적극 활용했다. Claude에게 '미니멀하고 차분한' 디자인 가이드를 제공하여 Tailwind CSS 스타일링을 생성했으며, 로고 역시 순수 SVG 코드로 출력받아 프로젝트에 즉시 적용했다.

단순 웹 페이지를 넘어 확장성을 고려한 기능을 추가했다. 터미널 사용자를 위한 /api/status JSON 엔드포인트와 캘린더 동기화를 위한 .ics 파일 생성 로직을 Claude의 도움으로 구현하여 다양한 환경에서 접근 가능하도록 만들었다.

용어 해설

넥스트 제이에스 15(Next.js 15): — React 기반의 최신 웹 프레임워크로, 서버 컴포넌트와 앱 라우터 기능을 통해 고성능 웹 애플리케이션 구축을 지원한다. 이 프로젝트에서는 서버 사이드 렌더링과 효율적인 라우팅을 위해 사용됐다.
국제화(i18n): — 소프트웨어가 다양한 언어와 지역에 대응할 수 있도록 설계하는 프로세스이다. 여기서는 서버 컴포넌트 기반 미들웨어를 통해 클라이언트 부담 없이 10개 국어를 지원하는 데 활용됐다.
국제화 날짜 형식 API(Intl.DateTimeFormat): — 언어에 맞는 날짜와 시간 형식을 제공하는 JavaScript 표준 내장 객체이다. 복잡한 시간대 변환과 일광 절약 시간제(DST)를 정확하게 계산하기 위해 필수적인 도구이다.
서버 컴포넌트(Server Components): — 서버에서 미리 렌더링되어 클라이언트로 전송되는 React 컴포넌트이다. 자바스크립트 번들 크기를 줄여 초기 로딩 속도를 개선하고 보안을 강화하는 역할을 한다.

언급된 도구

Claude추천

코드 생성, UI 디자인 가이드 및 로고 SVG 생성

Next.js 15추천

App Router 기반 웹 애플리케이션 프레임워크

Tailwind CSS추천

유틸리티 우선 방식의 UI 스타일링

언급된 리소스

Demopromoclock.co