> ## Documentation Index
> Fetch the complete documentation index at: https://docs.replit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 라이브 웹사이트 검토하기

> 어디에 호스팅되어 있든 모든 라이브 사이트의 링크, 반응형, 접근성, 디자인 결정을 점검합니다.

export const Connectors = ({items}) => <div style={{
  margin: "8px 0 20px"
}}>
    <style>{`
      .connectors-list, .connectors-list * { margin-top: 0 !important; margin-bottom: 0 !important; }
      .connectors-row {
        display: flex !important;
        align-items: flex-start !important;
        gap: 10px !important;
        padding: 4px 0 !important;
        min-height: 0 !important;
        height: auto !important;
      }
      .connectors-row img {
        width: 20px !important;
        height: 20px !important;
        max-width: 20px !important;
        max-height: 20px !important;
        margin: 2px 0 0 !important;
        display: block !important;
      }
    `}</style>
    <div className="connectors-list">
      {items.map((item, i) => <div key={item.id} className="connectors-row" style={{
  borderTop: i === 0 ? "none" : "1px solid rgba(130,130,130,0.22)"
}}>
          <img src={`/images/connectors/${item.id}.svg`} alt="" width={20} height={20} />
          <div style={{
  minWidth: 0
}}>
            <div>
              <strong>{item.name}</strong>
              {item.why ? <span style={{
  opacity: 0.72
}}> · {item.why}</span> : null}
            </div>
            {item.auth === "api-key" ? <div style={{
  fontSize: "11.5px",
  lineHeight: 1.35,
  color: "#F26207",
  marginTop: "2px"
}}>
                Not a native connector. Agent will ask for your API key.
              </div> : null}
          </div>
        </div>)}
    </div>
  </div>;

export const AiPrompt = ({children}) => {
  return <CodeBlock className="relative block max-w-full overflow-x-hidden font-sans !whitespace-pre-wrap !break-words" style={{
    overflowWrap: "anywhere",
    wordBreak: "break-word"
  }}>
      <div className="pr-7" style={{
    whiteSpace: "pre-wrap",
    overflowWrap: "anywhere",
    wordBreak: "break-word"
  }}>
        {children}
      </div>
    </CodeBlock>;
};

사이트는 라이브 상태인데 출시 이후 아무도 제대로 살펴보지 않았습니다. 네 가지 관점으로
검토를 실행하세요: 더 이상 연결되지 않는 링크, 휴대폰에서 깨지는 레이아웃, 접근성 문제,
페이지에 더는 도움이 되지 않는 디자인 결정. 검토는 공개 URL을 기준으로 진행되므로 사이트를
무엇으로 만들었는지, 어디에 호스팅했는지는 중요하지 않습니다. 사이트가 Replit 프로젝트라면
Agent가 문제를 찾는 것은 물론 수정까지 적용할 수 있습니다.

## 다음과 같은 경우에 적합합니다

* 점수가 아니라 실행 가능한 검토가 필요한, 라이브 사이트를 맡고 있는 디자이너.
* 출시 이후 무엇이 퇴보했는지 페이지별로 알아야 하는 프로덕트 매니저.

## 커넥터

<Connectors
  items={[
{
  id: "slack",
  name: "Slack",
  why: "정기 검토 결과가 전달되는 곳",
},
{ id: "notion", name: "Notion", why: "발견 사항과 수정 내역 기록" },
]}
/>

<Note>
  검토 자체에는 두 커넥터 모두 필요하지 않습니다. [나에게 맞게 조정하기](#나에게-맞게-조정하기)의
  루틴 버전을 위해 연결하세요.
</Note>

## 시작하기 전에

공개 URL을 준비하고, 가장 중요한 페이지를 지정하세요. 이번 점검에서 원하는 결과를 정하세요:
코드를 담당하는 사람에게 넘길 발견 사항 목록인지, 바로 적용되는 수정인지. 두 번째 경우에만
사이트가 Replit 프로젝트로 열려 있어야 합니다.

## Agent에게 요청하기

<AiPrompt>
  제 라이브 사이트 \[URL]을 한 번에 한 가지 관점씩 검토해 주세요. 더 이상 연결되지
  않는 링크부터 시작해 휴대폰에서의 레이아웃, 접근성, 디자인 결정 순서로 진행해
  주세요. 각 발견 사항마다 페이지, 무엇이 문제인지, 어떻게 바꾸겠는지 알려 주세요.
</AiPrompt>

## 예상 결과

Agent는 지정한 순서대로 각 관점을 진행하고, 살펴본 페이지와 확인한 링크 등 다룬 범위를
보고합니다. 각 관점은 별도의 섹션으로 돌아옵니다. 모든 발견 사항에는 페이지, 문제, 적용할
변경 사항이 명시됩니다. 검토는 Agent가 가장 먼저 처리할 수정 사항으로 마무리됩니다.

## 나에게 맞게 조정하기

<AiPrompt>
  매주 월요일 9:00에 실행되는 루틴을 만들어 주세요. \[URL]의 각 페이지를 열어 모든
  링크가 여전히 연결되는지 확인하고, 지난주 이후 바뀐 내용을 보고해 주세요. 발견
  사항은 Slack에 게시하고 Notion에 기록해 주세요.
</AiPrompt>

<AiPrompt>
  모든 발견 사항에 중요도를 매겨 주세요: 방문자를 막는 문제, 방문자를 느리게 하는
  문제, 외관상 문제. 방문자를 막는 문제를 먼저 나열해 주세요.
</AiPrompt>

## 문제 해결

<AccordionGroup>
  <Accordion title="결제 또는 모달 뒤에 있는 링크는 확인되지 않았습니다">
    크롤링은 렌더링된 페이지에 있는 링크만 확인합니다. 양식, 모달, 결제 단계 이후에만
    나타나는 항목은 별도로 점검해야 합니다.
  </Accordion>

  <Accordion title="레이아웃과 접근성 발견 사항이 부족합니다">
    표본을 Agent에게 맡기지 말고, 확인할 페이지와 뷰포트 너비를 지정하세요. 핵심 작업이
    이루어지는 페이지부터 시작하세요.
  </Accordion>

  <Accordion title="디자인 피드백이 평범합니다">
    페이지의 목적과 대상을 알려 주세요. 목표가 없으면 비평은 어떤 사이트에나 맞는
    일반적인 레이아웃 조언으로 흐르기 쉽습니다.
  </Accordion>
</AccordionGroup>

## 관련 문서

<CardGroup cols={2}>
  <Card href="/ko/use-cases/redesign-your-website">
    검토 결과 문제가 디자인 자체에 있을 때.
  </Card>

  <Card href="/ko/use-cases/create-design-system">
    검토에서 불일치가 발견되면 모든 것을 하나의 시스템으로 통일하세요.
  </Card>

  <Card href="/ko/features/publishing/seo-agent">
    게시된 Replit 앱의 경우, 원클릭 수정과 함께 크롤링 가능성, 메타데이터, 마크업을
    점검하세요.
  </Card>
</CardGroup>