> ## 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.

# 앱 디자인하기

> Design 모드를 사용해 화면별로 앱의 모습을 만들어보세요.

export const AiPrompt = ({children}) => {
  return <CodeBlock className="relative block font-sans whitespace-pre-wrap break-words">
      <div className="pr-7">
        {children}
      </div>
    </CodeBlock>;
};

export const designPrompt = "Create five different designs for the game menu, where players choose between Blocks, Snake, Racer, and Pinball, and see the top scores for each.";

앱의 모습은 기능만큼이나 앱의 일부입니다. PixelGames는 폰 위의 Game Boy입니다: 크림색 케이스,
올리브 그린 화면, 두툼한 버튼이 바로 그 핵심입니다. 일반적인 앱 레이아웃은 그 매력을 잃게
만듭니다.

<Steps>
  <Step title="Design 모드로 전환하기">
    워크스페이스 왼쪽 상단의 토글에서 Design 모드로 전환하세요.

    <Frame caption="PixelGames 워크스페이스에서 Design이 선택된 Design 및 Build 토글.">
      <img src="https://mintcdn.com/replit/WuaQIOfW5oxRlxex/images/pixelgames/mobile/design-step-1.png?fit=max&auto=format&n=WuaQIOfW5oxRlxex&q=85&s=8cbcacf95a04c466f273586b54c4acbb" alt="왼쪽 상단 토글에서 Design이 선택되고 다섯 가지 PixelGames 메뉴 변형이 표시된 Replit Design 캔버스" data-path="images/pixelgames/mobile/design-step-1.png" width="1284" height="871" data-path="images/pixelgames/mobile/design-step-1.png" />
    </Frame>
  </Step>

  <Step title="Agent에게 원하는 것을 설명하기">
    원하는 결과를 설명하면 나머지는 Agent가 처리합니다. 방향을 찾기 위해 한 번에 여러 버전을
    요청해보세요.

    <AiPrompt>
      {designPrompt}
    </AiPrompt>
  </Step>

  <Step title="버전 비교하기">
    Agent는 캔버스 위에 나란히 배치하므로, 하나씩이 아니라 화면 전체로 판단할 수 있습니다.
  </Step>

  <Step title="하나를 선택하고 다음 방향 확인하기">
    디자인을 선택하면 옆에 나타나는 제안을 사용해 다른 변형을 시도할 수 있습니다.

    <Frame caption="선택된 디자인과 그 옆에 표시된 다음 단계 제안.">
      <img src="https://mintcdn.com/replit/WuaQIOfW5oxRlxex/images/pixelgames/mobile/design-step-2.png?fit=max&auto=format&n=WuaQIOfW5oxRlxex&q=85&s=dba067f0c15dde736af003a7fd768185" alt="통합, 비교, 리믹스, 재구성이라는 다음 단계 제안과 함께 선택된 PixelGames 메뉴 디자인" data-path="images/pixelgames/mobile/design-step-2.png" width="1284" height="871" data-path="images/pixelgames/mobile/design-step-2.png" />
    </Frame>
  </Step>

  <Step title="원하는 버전 빌드하기">
    버전이 결정되면 위쪽 툴바에 있는 전송 아이콘을 클릭하세요. Agent가 해당 디자인을 캔버스에서
    가져와 앱 내 실제 화면으로 빌드합니다.

    <Frame caption="전송 아이콘을 클릭하면 선택한 디자인이 실제 화면이 됩니다.">
      <img src="https://mintcdn.com/replit/WuaQIOfW5oxRlxex/images/pixelgames/mobile/design-step-3.png?fit=max&auto=format&n=WuaQIOfW5oxRlxex&q=85&s=9006dbe90f73b24de3db94d75cadcd84" alt="캔버스에서 선택된 PixelGames 메뉴 디자인과 툴바에서 강조된 전송 아이콘" data-path="images/pixelgames/mobile/design-step-3.png" width="1284" height="846" data-path="images/pixelgames/mobile/design-step-3.png" />
    </Frame>
  </Step>
</Steps>

## 문제 해결

* **변경 사항이 원하는 것보다 크게 적용됨:** Agent에게 되돌리도록 요청하고, 한 화면이나 요소씩
  더 작은 변경 사항을 설명해주세요.
* **프리뷰에서는 올바르게 보이지만 폰에서는 다르게 보임:** 기기명과 실제로 본 것을 알려주세요.
  세이프 영역과 화면 크기 처리가 흔한 원인입니다.
* **변경 사항이 계속 되돌아감:** 동일한 값이 여러 곳에서 설정되어 있을 수 있습니다. 해당 화면의
  스타일링이 실제로 어디에 있는지 Agent에게 물어보세요.

## 다음 단계

<CardGroup cols={2}>
  <Card title="앱 아이콘 생성하기" icon="image" href="/ko/build/mobile-app-icon">
    플레이어가 홈 화면에서 탭할 아이콘을 디자인해보세요.
  </Card>

  <Card title="iOS 네이티브 컴포넌트 사용하기" icon="apple" href="/ko/build/mobile-native-components">
    커스텀 모습과 네이티브 알림 및 메뉴를 결합해보세요.
  </Card>
</CardGroup>

## 관련 항목

* [App Store 스크린샷 생성하기](/ko/build/mobile-store-screenshots)
* [폰에서 프리뷰 및 테스트하기](/build/mobile-preview-testing)