Linkwise의 Discover 피드 출시와 Fable 5로 원샷 생성한 Discover 경로 구현기

작성자는 Discover를 공개 페이지로 배포하고 피드에 대한 의견과 큐레이션 제안을 댓글이나 이메일로 요청했다. 게시물 본문은 구현 스택과 프롬프트 설계 요령을 구체적으로 기재해 다른 개발자가 재현할 수 있도록 실무 정보를 함께 제공했다. 커뮤니티 반응은 객체적으로 제시된 구현 세부를 바탕으로 피드백과 사례 공유가 이어질 가능성이 높으며 작성자가 추가 제안을 수집하려는 의도가 분명하다.

• 프롬프트에 먼저 데이터베이스 스키마와 실제 컬럼명 및 타입을 제공하면 코드 생성 모델이 필드 매핑을 정확히 생성해 후처리 작업을 크게 줄였다. 스키마 정보를 입력하면 모델은 입력된 컬럼을 기준으로 데이터 쿼리와 매핑 코드를 작성하며 결과물에서 허위 필드 생성 가능성이 낮아졌다. 따라서 자동 생성 워크플로에서 재현 가능한 데이터 인터페이스를 확보하려면 스키마 제공을 표준 절차로 채택하는 것이 유리하다.
• 디자인 토큰과 기존 컴포넌트 구조를 프롬프트에 포함하면 생성된 UI 코드가 기존 앱 스타일과 즉시 일치해 추가 스타일링 작업을 최소화했다. 컴포넌트 이름과 토큰 값이 주어지면 출력 코드에서 해당 컴포넌트를 직접 참조하고 토큰을 적용하므로 디자인 일관성이 보장된다. 그러므로 코드 생성 도구를 시스템에 통합할 때는 디자인 시스템 자료를 함께 전달해 통합 비용을 낮추는 것이 권장된다.
• 생성 도구가 기본적으로 선택하는 렌더링 전략을 명확히 검토하고 프롬프트로 원하는 렌더링 모드를 지시해야 배포 목표와 일치하는 결과를 얻었다. 작성자는 Fable 5가 기본으로 클라이언트 사이드 렌더링을 택했기 때문에 ISR을 명시적으로 요구해서 정적 페이지가 생성되도록 했다. 이 경험은 자동 생성 단계에서 배포 목적과 SEO 요건 같은 운영 조건을 프롬프트에 포함시키는 것이 필수적임을 보여준다.

ISR

— Next.js의 ISR은 정적 페이지를 빌드한 뒤 일부 경로를 주기적으로 또는 필요 시 재생성해 최신성을 유지하는 방식이다. 빌드 시 전체 사이트를 재생성하지 않고 특정 페이지만 서버에서 다시 생성함으로써 SEO 친화적인 정적 렌더링과 갱신 빈도의 균형을 맞춘다. 이 글 맥락에서는 Discover 페이지가 검색엔진 친화적으로 정적 상태를 유지하면서도 데이터 변경 시 점진적으로 갱신되도록 하기 위해 ISR 지시가 필요했다.

Fable 5

— Fable 5는 코드 생성 목적의 대형 언어 모델 또는 코드 생성 도구로서 개발자가 주어진 컨텍스트와 스키마를 입력하면 서버 라우트와 렌더링 로직을 생성할 수 있다. 입력으로 데이터베이스 스키마와 컴포넌트 설계 토큰을 제공하면 출력 코드에서 필드 매핑과 UI 구성요소 사용을 자동으로 반영한다. 이 글에서는 Fable 5가 Discover 경로 전체를 한 번의 프롬프트로 생성하는 데 사용됐다.

Design Tokens

— Design Tokens는 색상, 여백, 타이포그래피 등 UI 일관성을 위해 시스템화한 변수 세트로서 컴포넌트 재사용과 스타일 일관성을 보장한다. 외부 생성 도구에 디자인 토큰과 컴포넌트 구조를 함께 제공하면 생성된 코드가 기존 디자인 시스템에 바로 맞춰진다. 이 글에서는 디자인 토큰을 전달함으로써 생성 결과물이 추가 스타일 조정 없이 앱에 통합되었다고 보고됐다.