From Code to Understanding.

AI가 만든 결과를
이해하세요.

코드를 읽고 로그인·결제 같은 기능별로 내용을 정리합니다. 개발자와 비개발자가 함께 설명을 읽고, 필요한 경우 관련 코드도 확인할 수 있도록 돕습니다.

라이브 데모는 가입 없이 둘러볼 수 있습니다.

AIcheckout/route.tsAIreserveStock.tsAIstripe/route.ts

export async function POST(req: Request) {const sig = req.headers.get('stripe-signature')const event = stripe.webhooks.constructEvent(raw, sig, secret)if (event.type === 'payment_intent.succeeded') {await createOrder(event.data.object)}return NextResponse.json({ received: true })}const hold = await reserveStock(items, { ttl: 600 })if (!hold.ok) throw new OutOfStockError(hold.sku)const intent = await stripe.paymentIntents.create({amount: cart.total, currency: 'krw',metadata: { holdId: hold.id, cartId: cart.id },})export async function POST(req: Request) {const sig = req.headers.get('stripe-signature')const event = stripe.webhooks.constructEvent(raw, sig, secret)if (event.type === 'payment_intent.succeeded') {await createOrder(event.data.object)}return NextResponse.json({ received: true })}const hold = await reserveStock(items, { ttl: 600 })if (!hold.ok) throw new OutOfStockError(hold.sku)const intent = await stripe.paymentIntents.create({amount: cart.total, currency: 'krw',metadata: { holdId: hold.id, cartId: cart.id },})export async function POST(req: Request) {const sig = req.headers.get('stripe-signature')const event = stripe.webhooks.constructEvent(raw, sig, secret)if (event.type === 'payment_intent.succeeded') {await createOrder(event.data.object)}return NextResponse.json({ received: true })}const hold = await reserveStock(items, { ttl: 600 })if (!hold.ok) throw new OutOfStockError(hold.sku)const intent = await stripe.paymentIntents.create({amount: cart.total, currency: 'krw',metadata: { holdId: hold.id, cartId: cart.id },})export async function POST(req: Request) {const sig = req.headers.get('stripe-signature')const event = stripe.webhooks.constructEvent(raw, sig, secret)if (event.type === 'payment_intent.succeeded') {await createOrder(event.data.object)}return NextResponse.json({ received: true })}const hold = await reserveStock(items, { ttl: 600 })if (!hold.ok) throw new OutOfStockError(hold.sku)const intent = await stripe.paymentIntents.create({amount: cart.total, currency: 'krw',metadata: { holdId: hold.id, cartId: cart.id },})

const hold = await reserveStock(items, { ttl: 600 })if (!hold.ok) throw new OutOfStockError(hold.sku)const intent = await stripe.paymentIntents.create({amount: cart.total, currency: 'krw',metadata: { holdId: hold.id, cartId: cart.id },})export function CheckoutPage() {const [step, setStep] = useState<Step>('address')const { data: cart } = useCart()return <Stepper step={step} onNext={advance} />}async function releaseHold(holdId: string) {await db.hold.update({ where: { id: holdId },data: { releasedAt: new Date() } })const hold = await reserveStock(items, { ttl: 600 })if (!hold.ok) throw new OutOfStockError(hold.sku)const intent = await stripe.paymentIntents.create({amount: cart.total, currency: 'krw',metadata: { holdId: hold.id, cartId: cart.id },})export function CheckoutPage() {const [step, setStep] = useState<Step>('address')const { data: cart } = useCart()return <Stepper step={step} onNext={advance} />}async function releaseHold(holdId: string) {await db.hold.update({ where: { id: holdId },data: { releasedAt: new Date() } })const hold = await reserveStock(items, { ttl: 600 })if (!hold.ok) throw new OutOfStockError(hold.sku)const intent = await stripe.paymentIntents.create({amount: cart.total, currency: 'krw',metadata: { holdId: hold.id, cartId: cart.id },})export function CheckoutPage() {const [step, setStep] = useState<Step>('address')const { data: cart } = useCart()return <Stepper step={step} onNext={advance} />}async function releaseHold(holdId: string) {await db.hold.update({ where: { id: holdId },data: { releasedAt: new Date() } })const hold = await reserveStock(items, { ttl: 600 })if (!hold.ok) throw new OutOfStockError(hold.sku)const intent = await stripe.paymentIntents.create({amount: cart.total, currency: 'krw',metadata: { holdId: hold.id, cartId: cart.id },})export function CheckoutPage() {const [step, setStep] = useState<Step>('address')const { data: cart } = useCart()return <Stepper step={step} onNext={advance} />}async function releaseHold(holdId: string) {await db.hold.update({ where: { id: holdId },data: { releasedAt: new Date() } })const hold = await reserveStock(items, { ttl: 600 })if (!hold.ok) throw new OutOfStockError(hold.sku)const intent = await stripe.paymentIntents.create({amount: cart.total, currency: 'krw',metadata: { holdId: hold.id, cartId: cart.id },})export function CheckoutPage() {const [step, setStep] = useState<Step>('address')const { data: cart } = useCart()return <Stepper step={step} onNext={advance} />}async function releaseHold(holdId: string) {await db.hold.update({ where: { id: holdId },data: { releasedAt: new Date() } })const hold = await reserveStock(items, { ttl: 600 })if (!hold.ok) throw new OutOfStockError(hold.sku)const intent = await stripe.paymentIntents.create({amount: cart.total, currency: 'krw',metadata: { holdId: hold.id, cartId: cart.id },})export function CheckoutPage() {const [step, setStep] = useState<Step>('address')const { data: cart } = useCart()return <Stepper step={step} onNext={advance} />}async function releaseHold(holdId: string) {await db.hold.update({ where: { id: holdId },data: { releasedAt: new Date() } })const hold = await reserveStock(items, { ttl: 600 })if (!hold.ok) throw new OutOfStockError(hold.sku)const intent = await stripe.paymentIntents.create({amount: cart.total, currency: 'krw',metadata: { holdId: hold.id, cartId: cart.id },})export function CheckoutPage() {const [step, setStep] = useState<Step>('address')const { data: cart } = useCart()return <Stepper step={step} onNext={advance} />}async function releaseHold(holdId: string) {await db.hold.update({ where: { id: holdId },data: { releasedAt: new Date() } })

export function CheckoutPage() {const [step, setStep] = useState<Step>('address')const { data: cart } = useCart()return <Stepper step={step} onNext={advance} />}async function releaseHold(holdId: string) {await db.hold.update({ where: { id: holdId },data: { releasedAt: new Date() } })await inventory.restore(holdId)}schedule.every('1m', () => expireHolds({ olderThan: 600 }))const order = await db.order.create({ data: { cartId, intentId } })logger.info('order.created', { orderId: order.id })await mailer.send('order-confirmed', { to: user.email })export function CheckoutPage() {const [step, setStep] = useState<Step>('address')const { data: cart } = useCart()return <Stepper step={step} onNext={advance} />}async function releaseHold(holdId: string) {await db.hold.update({ where: { id: holdId },data: { releasedAt: new Date() } })await inventory.restore(holdId)}schedule.every('1m', () => expireHolds({ olderThan: 600 }))const order = await db.order.create({ data: { cartId, intentId } })logger.info('order.created', { orderId: order.id })await mailer.send('order-confirmed', { to: user.email })export function CheckoutPage() {const [step, setStep] = useState<Step>('address')const { data: cart } = useCart()return <Stepper step={step} onNext={advance} />}async function releaseHold(holdId: string) {await db.hold.update({ where: { id: holdId },data: { releasedAt: new Date() } })await inventory.restore(holdId)}schedule.every('1m', () => expireHolds({ olderThan: 600 }))const order = await db.order.create({ data: { cartId, intentId } })logger.info('order.created', { orderId: order.id })await mailer.send('order-confirmed', { to: user.email })export function CheckoutPage() {const [step, setStep] = useState<Step>('address')const { data: cart } = useCart()return <Stepper step={step} onNext={advance} />}async function releaseHold(holdId: string) {await db.hold.update({ where: { id: holdId },data: { releasedAt: new Date() } })await inventory.restore(holdId)}schedule.every('1m', () => expireHolds({ olderThan: 600 }))const order = await db.order.create({ data: { cartId, intentId } })logger.info('order.created', { orderId: order.id })await mailer.send('order-confirmed', { to: user.email })export function CheckoutPage() {const [step, setStep] = useState<Step>('address')const { data: cart } = useCart()return <Stepper step={step} onNext={advance} />}async function releaseHold(holdId: string) {await db.hold.update({ where: { id: holdId },data: { releasedAt: new Date() } })await inventory.restore(holdId)}schedule.every('1m', () => expireHolds({ olderThan: 600 }))const order = await db.order.create({ data: { cartId, intentId } })logger.info('order.created', { orderId: order.id })await mailer.send('order-confirmed', { to: user.email })export function CheckoutPage() {const [step, setStep] = useState<Step>('address')const { data: cart } = useCart()return <Stepper step={step} onNext={advance} />}async function releaseHold(holdId: string) {await db.hold.update({ where: { id: holdId },data: { releasedAt: new Date() } })await inventory.restore(holdId)}schedule.every('1m', () => expireHolds({ olderThan: 600 }))const order = await db.order.create({ data: { cartId, intentId } })logger.info('order.created', { orderId: order.id })await mailer.send('order-confirmed', { to: user.email })

data: { releasedAt: new Date() } })await inventory.restore(holdId)}schedule.every('1m', () => expireHolds({ olderThan: 600 }))const order = await db.order.create({ data: { cartId, intentId } })logger.info('order.created', { orderId: order.id })await mailer.send('order-confirmed', { to: user.email })export async function POST(req: Request) {const sig = req.headers.get('stripe-signature')const event = stripe.webhooks.constructEvent(raw, sig, secret)if (event.type === 'payment_intent.succeeded') {await createOrder(event.data.object)}return NextResponse.json({ received: true })data: { releasedAt: new Date() } })await inventory.restore(holdId)}schedule.every('1m', () => expireHolds({ olderThan: 600 }))const order = await db.order.create({ data: { cartId, intentId } })logger.info('order.created', { orderId: order.id })await mailer.send('order-confirmed', { to: user.email })export async function POST(req: Request) {const sig = req.headers.get('stripe-signature')const event = stripe.webhooks.constructEvent(raw, sig, secret)if (event.type === 'payment_intent.succeeded') {await createOrder(event.data.object)}return NextResponse.json({ received: true })data: { releasedAt: new Date() } })await inventory.restore(holdId)}schedule.every('1m', () => expireHolds({ olderThan: 600 }))const order = await db.order.create({ data: { cartId, intentId } })logger.info('order.created', { orderId: order.id })await mailer.send('order-confirmed', { to: user.email })export async function POST(req: Request) {const sig = req.headers.get('stripe-signature')const event = stripe.webhooks.constructEvent(raw, sig, secret)if (event.type === 'payment_intent.succeeded') {await createOrder(event.data.object)}return NextResponse.json({ received: true })data: { releasedAt: new Date() } })await inventory.restore(holdId)}schedule.every('1m', () => expireHolds({ olderThan: 600 }))const order = await db.order.create({ data: { cartId, intentId } })logger.info('order.created', { orderId: order.id })await mailer.send('order-confirmed', { to: user.email })export async function POST(req: Request) {const sig = req.headers.get('stripe-signature')const event = stripe.webhooks.constructEvent(raw, sig, secret)if (event.type === 'payment_intent.succeeded') {await createOrder(event.data.object)}return NextResponse.json({ received: true })data: { releasedAt: new Date() } })await inventory.restore(holdId)}schedule.every('1m', () => expireHolds({ olderThan: 600 }))const order = await db.order.create({ data: { cartId, intentId } })logger.info('order.created', { orderId: order.id })await mailer.send('order-confirmed', { to: user.email })export async function POST(req: Request) {const sig = req.headers.get('stripe-signature')const event = stripe.webhooks.constructEvent(raw, sig, secret)if (event.type === 'payment_intent.succeeded') {await createOrder(event.data.object)}return NextResponse.json({ received: true })data: { releasedAt: new Date() } })await inventory.restore(holdId)}schedule.every('1m', () => expireHolds({ olderThan: 600 }))const order = await db.order.create({ data: { cartId, intentId } })logger.info('order.created', { orderId: order.id })await mailer.send('order-confirmed', { to: user.email })export async function POST(req: Request) {const sig = req.headers.get('stripe-signature')const event = stripe.webhooks.constructEvent(raw, sig, secret)if (event.type === 'payment_intent.succeeded') {await createOrder(event.data.object)}return NextResponse.json({ received: true })data: { releasedAt: new Date() } })await inventory.restore(holdId)}schedule.every('1m', () => expireHolds({ olderThan: 600 }))const order = await db.order.create({ data: { cartId, intentId } })logger.info('order.created', { orderId: order.id })await mailer.send('order-confirmed', { to: user.email })export async function POST(req: Request) {const sig = req.headers.get('stripe-signature')const event = stripe.webhooks.constructEvent(raw, sig, secret)if (event.type === 'payment_intent.succeeded') {await createOrder(event.data.object)}return NextResponse.json({ received: true })data: { releasedAt: new Date() } })await inventory.restore(holdId)}schedule.every('1m', () => expireHolds({ olderThan: 600 }))const order = await db.order.create({ data: { cartId, intentId } })logger.info('order.created', { orderId: order.id })await mailer.send('order-confirmed', { to: user.email })export async function POST(req: Request) {const sig = req.headers.get('stripe-signature')const event = stripe.webhooks.constructEvent(raw, sig, secret)if (event.type === 'payment_intent.succeeded') {await createOrder(event.data.object)}return NextResponse.json({ received: true })

schedule.every('1m', () => expireHolds({ olderThan: 600 }))const order = await db.order.create({ data: { cartId, intentId } })logger.info('order.created', { orderId: order.id })await mailer.send('order-confirmed', { to: user.email })export async function POST(req: Request) {const sig = req.headers.get('stripe-signature')const event = stripe.webhooks.constructEvent(raw, sig, secret)if (event.type === 'payment_intent.succeeded') {await createOrder(event.data.object)}return NextResponse.json({ received: true })}const hold = await reserveStock(items, { ttl: 600 })if (!hold.ok) throw new OutOfStockError(hold.sku)schedule.every('1m', () => expireHolds({ olderThan: 600 }))const order = await db.order.create({ data: { cartId, intentId } })logger.info('order.created', { orderId: order.id })await mailer.send('order-confirmed', { to: user.email })export async function POST(req: Request) {const sig = req.headers.get('stripe-signature')const event = stripe.webhooks.constructEvent(raw, sig, secret)if (event.type === 'payment_intent.succeeded') {await createOrder(event.data.object)}return NextResponse.json({ received: true })}const hold = await reserveStock(items, { ttl: 600 })if (!hold.ok) throw new OutOfStockError(hold.sku)schedule.every('1m', () => expireHolds({ olderThan: 600 }))const order = await db.order.create({ data: { cartId, intentId } })logger.info('order.created', { orderId: order.id })await mailer.send('order-confirmed', { to: user.email })export async function POST(req: Request) {const sig = req.headers.get('stripe-signature')const event = stripe.webhooks.constructEvent(raw, sig, secret)if (event.type === 'payment_intent.succeeded') {await createOrder(event.data.object)}return NextResponse.json({ received: true })}const hold = await reserveStock(items, { ttl: 600 })if (!hold.ok) throw new OutOfStockError(hold.sku)

Doklo분석 중검토 필요

CHKT-CHECKOUTDok · 초안검토 필요

결제하기

Stripe Payment Intents 기반 3단계 결제입니다. 결제가 시작되면 재고를 10분 동안 확보합니다.

사람고객 · 시스템흐름주소 → 결제 → 확정규칙주문은 웹훅이 도착했을 때만 생성합니다성공 기준결제 실패 시 확보한 재고를 즉시 해제합니다

app/checkout/actions.tslib/stripe/client.tswebhooks/stripe/route.ts+4 files

AI가 만든 앱, 어떻게 쓰는지도 알 수 있어야 합니다.

Doklo는 AI가 만든 서비스에 어떤 기능이 있고, 어떻게 작동하는지 쉽게 설명합니다.

먼저 내용을 읽어보고, 옆에서 차분하게 설명해 주는 동료입니다.

Dok

어떤 기능이 만들어졌는지 살펴보세요.

Dok은 기능 하나를 설명한 글입니다. 로그인이나 결제가 어떤 순서로 이루어지는지 설명합니다. 결제에 실패하면 어떻게 되는지 같은 내용도 담습니다.

CHKT-CHECKOUT승인 완료

결제하기

목적

로그인한 고객이 상점을 떠나지 않고 장바구니를 결제할 수 있게 합니다.

사람

고객 · 시스템

흐름

주소 입력 → Stripe 결제 → 시스템이 재고 확보 → 웹훅이 주문 확정

규칙

재고는 10분 동안 확보합니다. 주문은 웹훅이 도착했을 때만 생성합니다.

성공 기준

✓ 결제가 실패하면 확보한 재고를 풀고, 장바구니는 그대로 남습니다.

어떻게 작동하는지 알아보세요.

분석할 코드 저장소를 연결해 주세요.

코드 저장소는 제품의 코드가 모여 있는 곳입니다. 연결한 코드를 읽고 기능별로 설명을 정리합니다.

$ doklo scan
✓ 312 files · 23 routes · 87 components

코드를 분석하고 있습니다.

어떤 기능이 있고, 서로 어떻게 연결되는지 살펴보고 있습니다. 코드를 읽는 스캔은 무료이고, Dok 하나를 만드는 데 1크레딧이 듭니다.

$ doklo generate
● CHKT-CHECKOUT 초안 · 관련 코드 7개

기능 설명을 검토해 주세요.

설명이 관련 코드와 맞는지 확인해 주세요. 수정할 부분이 있다면 고친 뒤 승인해 주세요. Dok을 다시 만들어도, 직접 수정한 내용은 유지됩니다.

검토 필요→ 나 →승인 완료
Studio에서 승인합니다.

Live Docs가 게시됐습니다.

Live Docs는 사람이 승인한 Dok으로 만듭니다. 코드가 바뀌면, 다시 확인할 설명을 알려줍니다.

help-page · CHKT-CHECKOUT
승인한 Dok 1개로 만든 도움말

Live Docs

같은 이해를 공유하세요.

Live Docs는 사용자를 위한 도움말입니다. 사람이 확인하고 승인한 설명으로 만들고, 사용자가 어디를 누르고 무엇을 입력해야 하는지 안내합니다.

도움말 페이지기능별로 사용자에게 건네는 안내html · mdstable

릴리스 안내바뀐 기능을 사용자가 이해하기 쉽게 정리한 글htmlexperimental

도움말 목록기능별 도움말을 한눈에 찾는 목록htmlexperimental

운영 안내서관리자가 확인할 운영 절차mdexperimental

요구사항 대응표요구사항·코드·시험을 한 표로 이은 대응표xlsxexperimental

템플릿 16종 중 지금 stable로 보증하는 것은 도움말 페이지 하나입니다. 나머지는 직접 선택해서 씁니다. 코드가 바뀌면, 다시 확인할 설명을 알려줍니다.

help-page · CHKT-CHECKOUT · ko승인 완료

도움말 · 결제

결제하기

세 단계로 장바구니를 결제합니다. 결제가 진행되는 동안 상품은 10분 동안 확보됩니다.

순서

배송지를 입력하고 배송 속도를 고릅니다.
카드로 결제합니다. 추가 인증은 화면 안에서 바로 진행됩니다.
확인 메일이 1분 안에 도착합니다.

진행이 안 될 때

결제에는 이메일 인증이 필요합니다. 먼저 받은편지함을 확인해 주세요.

승인한 Dok 1개로 만든 도움말 · 관련 코드 7개

Doklo가 중요하게 생각하는 것

기술의 결과를, 사람의 이해로.

AI가 만든 것을 사람이 이해할 수 있도록 돕습니다.

어떻게 작동하는지 이해할 수 있어야 합니다.

AI가 만든 결과를 사람이 살펴보고 판단할 수 있도록 쉽게 설명합니다.

설명의 근거를 확인할 수 있어야 합니다.

어떤 코드를 바탕으로 쓴 설명인지 함께 보여줍니다.

개발 지식이 달라도 함께 이야기할 수 있어야 합니다.

개발자뿐 아니라 기획자와 고객도 이해할 수 있는 말을 씁니다.

처음 만들어진 Dok은 검토 전 초안입니다.

내용을 읽고, 필요한 부분을 고친 뒤 승인해 주세요. Live Docs는 사람이 승인한 Dok으로 만듭니다.

코드는 분석하는 동안만 읽고 저장하지 않습니다. 분석이 끝나면 복사본을 삭제합니다.

MCP준비 중

사람도 AI도,
같은 제품 설명을 읽습니다.

MCP는 AI 도구가 Doklo의 정보를 찾아볼 수 있게 연결하는 방식입니다. Cursor와 Claude Code 같은 도구가 승인한 Dok을 읽는 연결은 Live Docs 다음에 제공할 예정입니다.

CursorClaude CodeMCP를 쓰는 도구

agent › doklo.search_doks("환불 보류")
← CHKT-CHECKOUT · 승인 완료
규칙: 주문은 웹훅이 도착했을 때만 생성합니다
관련 코드 7개 · 사람이 승인함