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

이 요약은 AI가 원문을 분석해 생성했습니다. 정확한 내용은 원문 기준으로 확인하세요.

TL;DR

Linkwise는 읽기용 큐레이션 피드 Discover를 공개 페이지로 배포하고 해당 페이지 구현을 Fable 5에 전체 컨텍스트를 제공해 원샷으로 생성했다는 사실을 보고했다. 구현은 Next.js와 ISR을 기반으로 했고 Supabase/Postgres에서 제공되는 실제 데이터 스키마와 앱의 디자인 토큰 및 컴포넌트를 프롬프트에 포함시켜 모델이 정확한 필드 매핑과 스타일 일관성을 갖는 코드를 출력하도록 했다. 생성 도구가 기본적으로 클라이언트 렌더링을 택한 점 때문에 ISR 등 배포 목적에 맞는 렌더링 전략을 프롬프트로 명시해야 했으며 실제 편집은 주로 라이브 데이터 연결과 레이아웃 미세조정으로 국한되었다. 이 사례는 스키마와 디자인 자산을 포함한 프롬프트 설계가 코드 생성 워크플로의 재현성과 통합 비용을 낮추는 실무적 방법임을 보여준다.

실용적 조언

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

섹션별 상세

Linkwise는 읽을거리를 큐레이션하는 Discover 피드를 공개 페이지로 제공하며 이 페이지를 SEO 친화적인 정적 방식으로 유지할 필요가 있었다. 개발자는 Next.js와 ISR을 사용해 정적 페이지를 구성했고 Fable 5에 전체 컨텍스트를 제공해 서버 측 라우트와 데이터 페칭 로직을 생성하게 했다. 작성자는 한 번의 프롬프트로 경로, 서버 데이터 조회, ISR 설정, 혼합 콘텐츠 그리드 레이아웃이 생성되었다고 언급하며 실제로 이어서 소폭의 편집만으로 라이브 데이터와 간격 조정 부분을 연결했다고 밝혔다. 이 접근은 수동 코딩 대신 스키마-기반 자동 생성으로 개발 시간을 줄이고 배포 시점에 디자인 일관성을 유지하는 실무적 이점을 제공했다.

작성자는 데이터 스키마를 프롬프트에 우선 제공한 것이 생성 결과의 정확성을 결정한 핵심 요인이라고 보고했다. 데이터베이스 스키마의 실제 컬럼명과 타입이 주어지자 모델이 필드 매핑을 올바르게 생성했고 허위 필드나 추측을 만드는 현상이 줄어들었다. 이 사실은 생성된 코드에서 필드 이름이 곧바로 사용되고 데이터 매핑이 정확했기 때문에 확인된 증거로 제시되며 작성자는 이를 단일 최대 영향 요소로 꼽았다. 따라서 스키마 기반 입력은 코드 생성 모델 사용 시 반복적인 후처리 비용을 크게 낮추는 실무적 방법으로 해석될 수 있다.

작성자는 디자인 시스템의 컴포넌트와 토큰을 프롬프트에 포함시켜 생성 결과물이 앱에 바로 들어가도록 했으며 이로 인해 별도의 스타일 재작업이 거의 필요 없었다고 보고했다. 프롬프트에 컴포넌트 구조와 토큰을 전달하면 출력에서 해당 컴포넌트를 참조하는 식으로 UI 구성이 이루어졌고 이는 디자인 일관성과 개발 효율을 동시에 확보하는 메커니즘으로 작동했다. 작성자는 이 접근 덕분에 생성 후의 편집이 주로 실 데이터 연결과 여백 조정에 국한되었다고 언급했다. 이 사례는 코드 생성 흐름에서 디자인 사양을 함께 전달하는 것이 통합 비용을 줄이는 효과적인 실무 관행임을 시사한다.

원샷 생성에서 발생한 주된 포인트는 렌더링 전략을 명시적으로 지시해야 했다는 점이다. Fable 5가 기본적으로 클라이언트 사이드 렌더링을 선택했기 때문에 작성자는 ISR 및 정적 렌더링을 명확히 요구해야만 SEO 목적에 맞는 정적 페이지가 생성되었다고 보고했다. 이 사례는 자동 생성 도구가 기본 설정을 사용하기 때문에 의도한 실행 환경을 프롬프트로 정확히 지정해야 한다는 교훈을 보여주며, 실행 방식 미스매치가 있을 때 수정 비용이 발생할 수 있음을 분명히 했다. 따라서 프롬프트 설계 시 기술적 제약과 배포 목표를 명시하는 것이 필수적이다.

용어 해설

Incremental Static Regeneration(ISR): — Next.js의 ISR은 정적 페이지를 빌드한 뒤 일부 경로를 주기적으로 또는 필요 시 재생성해 최신성을 유지하는 방식이다. 빌드 시 전체 사이트를 재생성하지 않고 특정 페이지만 서버에서 다시 생성함으로써 SEO 친화적인 정적 렌더링과 갱신 빈도의 균형을 맞춘다. 이 글 맥락에서는 Discover 페이지가 검색엔진 친화적으로 정적 상태를 유지하면서도 데이터 변경 시 점진적으로 갱신되도록 하기 위해 ISR 지시가 필요했다.
Fable 5: — Fable 5는 코드 생성 목적의 대형 언어 모델 또는 코드 생성 도구로서 개발자가 주어진 컨텍스트와 스키마를 입력하면 서버 라우트와 렌더링 로직을 생성할 수 있다. 입력으로 데이터베이스 스키마와 컴포넌트 설계 토큰을 제공하면 출력 코드에서 필드 매핑과 UI 구성요소 사용을 자동으로 반영한다. 이 글에서는 Fable 5가 Discover 경로 전체를 한 번의 프롬프트로 생성하는 데 사용됐다.
디자인 토큰(Design Tokens): — Design Tokens는 색상, 여백, 타이포그래피 등 UI 일관성을 위해 시스템화한 변수 세트로서 컴포넌트 재사용과 스타일 일관성을 보장한다. 외부 생성 도구에 디자인 토큰과 컴포넌트 구조를 함께 제공하면 생성된 코드가 기존 디자인 시스템에 바로 맞춰진다. 이 글에서는 디자인 토큰을 전달함으로써 생성 결과물이 추가 스타일 조정 없이 앱에 통합되었다고 보고됐다.

언급된 도구

Next.js중립

Next.js는 서버사이드 페칭과 Incremental Static Regeneration 기능을 통해 정적 페이지를 생성하고 주기적으로 갱신하는 데 사용되었다. Discover 페이지는 Next.js의 ISR 설정으로 SEO 친화적인 정적 렌더링을 유지하면서 데이터 변경 시 점진적으로 갱신되도록 구성되었다. 따라서 사이트의 검색엔진 노출 요구와 빈번하지 않은 컨텐츠 갱신을 동시에 충족하는 런타임 선택으로 활용되었다.

Supabase / Postgres중립

Supabase와 Postgres는 Discover의 콘텐츠 저장소로서 기사, 비디오, 하이라이트 등의 메타데이터를 구조화해 제공하는 역할을 했다. 스키마 기반 입력에서 실제 컬럼과 타입이 모델의 데이터 매핑 정확도를 높이는 근거 데이터로 사용되었기 때문에 데이터베이스 설계가 자동 생성 결과의 품질에 직접적으로 영향을 미쳤다. 이 구성은 콘텐츠 CRUD와 검색 기능을 안정적으로 운영하기 위한 백엔드 역할을 수행했다.

Fable 5중립

Fable 5는 전체 컨텍스트와 스키마, 디자인 토큰을 한 번의 프롬프트로 주었을 때 서버 라우트, 데이터 페칭 로직, ISR 설정, 그리고 혼합 콘텐츠 레이아웃까지 생성한 코드 생성 도구로 사용되었다. 모델은 제공된 스키마를 기준으로 필드 매핑을 수행했고 컴포넌트 참조를 통해 디자인 시스템을 반영한 결과물을 출력했으며 작성자는 생성 이후 소폭의 편집만으로 라이브 연결과 간격 조정을 완료했다고 보고했다. 따라서 이 도구는 스키마와 디자인 토큰을 결합한 입력을 통해 개발 작업을 자동화하는 데 유용하게 사용되었다.

언급된 리소스

DemoLinkwise Discover