스크린샷으로 복제하기: 첫 모방 연습
지난 수업에서는 한 문장으로 AI에게 프로그램을 부탁했습니다. 이번에는 더 눈에 보이는 방법을 사용합니다. 마음에 드는 스크린샷을 고르고, AI가 그 화면을 보며 만들게 합니다.
그림을 보며 블록을 쌓는 것과 비슷합니다. 색, 간격, 모든 버튼의 위치를 먼저 설명하지 않아도 이미지가 대부분을 알려 줍니다.
이번 장에서 할 일
1. 만들고 싶은 작품 하나 고르기
시작하기 전에 오늘 어떤 결과를 만들지 정합니다.
목표는 모든 기능이 있는 큰 제품이 아니라 열리고, 이해할 수 있고, 한 가지 간단한 조작이 되는 화면입니다. 범위가 작을수록 첫 시도가 성공하기 쉽습니다.
다음 중 하나를 고르세요.
- 제품 홈페이지: 제목, 소개, 이미지, 버튼이 있다
- SaaS 대시보드: 사이드바, 데이터 카드, 차트가 있다
- 간단한 게임: 이동, 클릭 또는 작은 목표가 있다
참고 이미지는 세 가지를 확인합니다.
- 한 장에서 주요 내용이 보이는가?
- 정말 마음에 드는 부분이 있는가?
- 완성 후 닮았는지 바로 판단할 수 있는가?
홈페이지의 큰 제목과 색이 좋다면 첫 화면을 저장하고, 블록 세계가 좋다면 게임의 특징이 가장 잘 보이는 장면을 저장합니다.
얼마나 비슷하게 만들 수 있을까?
결과가 가까울수록 화면의 세부를 잘 관찰하고 차이를 AI에게 설명했다는 뜻입니다. 완성 후 참고 화면과 결과를 나란히 놓고 50%, 70%, 90% 중 어디까지 가까워졌는지 살펴보세요.
먼저 한 화면만 만들기
처음부터 로그인, 결제, 채팅, 관리자 화면, 모바일 앱을 모두 만들지 않습니다. 눈앞의 화면 한 장부터 완성합니다.
2. 선생님을 따라 웹페이지 만들기
먼저 전체 과정을 봅니다. 흐름을 이해한 뒤 내 이미지로 같은 작업을 합니다.
선생님은 빈 폴더를 만들고 Trae로 열었습니다. 프로젝트 이름은 trae-screenshot-demo였고 처음에는 웹페이지도 코드도 없었습니다.
2.1 참고 이미지를 Trae에 주기
참고 화면은 Framer 소개 페이지입니다. 큰 제목, 내비게이션, 보라색 산, 작은 조작 버튼이 한 장에 보입니다.
이미지 출처: Framer Website Builder
이미지를 Trae 채팅으로 끌어놓고 짧게 말합니다.
이 이미지를 참고해서 웹페이지를 만들어 주세요. 완성되면 열어 보여 주세요.이미지는 화면이 어떻게 보여야 하는지 알려 주고, 문장은 이미지를 웹페이지로 만들라는 목적을 알려 줍니다.
보낸 뒤 Trae가 파일을 만들 때까지 기다립니다. 첫 작업이 끝나기 전에 새 요청을 계속 보내지 마세요.
2.2 첫 버전 보기
Trae는 index.html, styles.css, script.js를 만들고 브라우저에서 페이지를 열었습니다. 아래는 수업에서 실제로 생성한 결과입니다.
아직 코드는 읽지 않습니다. 참고 화면과 비교하며 페이지를 봅니다.
- 보라색 하늘과 산 분위기가 남아 있다
- 가운데에 눈에 띄는 큰 제목이 있다
- 위쪽에 내비게이션, 아래쪽에 조작 항목이 있다
- 글, 버튼, 이미지가 하나의 완성된 첫 화면을 만든다
원본과 완전히 같지는 않지만 가장 눈에 띄는 구조와 분위기를 잡았습니다. 첫 버전으로 충분합니다.
2.3 첫 버전은 먼저 “보이게” 만들기
글꼴이나 버튼 위치가 조금 다르다고 전부 다시 만들지 마세요. 페이지가 열리는지 확인한 뒤 가장 명확한 문제 하나를 고릅니다.
제목이 작다면 다음처럼 말합니다.
가운데 제목을 조금 더 크게 해 주세요.수정 후 페이지를 다시 엽니다. 이전보다 생각에 가까워졌다면 그 수정은 도움이 되었습니다.
평소 말로 충분하다
Trae와 함께 작품을 만드는 것이지 프롬프트 시험을 보는 것이 아닙니다. 눈에 보이는 것을 평소 말로 설명하세요.
3. 직접 한 번 해 보기
Trae를 열고 빈 폴더를 만든 뒤 그 폴더를 엽니다. my-first-page 같은 간단한 이름이면 됩니다.
다음 순서로 진행합니다.
- 좋아하는 웹페이지나 게임 스크린샷을 찾는다.
- 채팅 옆 이미지 버튼으로 스크린샷을 고른다.
- 입력창에 이미지가 나타났는지 확인한다.
- 짧은 요청을 입력해 보낸다.
이 이미지를 참고해서 웹페이지를 만들어 주세요.
완성되면 열어 보여 주세요.첫 연습에서는 프레임워크, 폴더 구성, 파일 이름을 정할 필요가 없습니다. Trae가 선택하게 둡니다.
모양만 참고하고 원래 이름과 문구는 쓰고 싶지 않다면 다음을 덧붙입니다.
디자인은 이 이미지를 참고하고, 이름과 내용은 새롭게 바꿔 주세요.Trae가 끝낼 때까지 기다립니다. 파일 생성이나 실행을 물으면 승인합니다. 자동으로 열리지 않으면 말합니다.
이 프로젝트를 실행해 주세요. 화면을 보고 싶어요.페이지가 나오면 10초 동안 열리는지, 주요 내용이 있는지, 버튼이 눌리는지 확인합니다. 처음부터 다섯 군데를 한꺼번에 바꾸지 않습니다.
4. 다른 종류의 작품에도 같은 방법 쓰기
이 방법은 제품 홈페이지에만 쓰이지 않습니다. 선생님은 빈 프로젝트 두 개를 더 만들어 데이터 대시보드와 블록 게임을 만들었습니다.
예시 1: SaaS 대시보드
SaaS 제품은 진행 상황, 매출, 사용자 데이터를 대시보드로 보여 줍니다. Linear 화면은 왼쪽에 내비게이션, 오른쪽에 내용이 있어 구조가 명확합니다.
수업 참고: Linear Dashboards
이미지를 Trae에 넣고 말합니다.
이런 데이터 대시보드를 만들어 주세요.
데이터는 예시로 넣어도 됩니다.Trae는 사이드바, 데이터 카드, 차트를 만들었습니다. 아래는 실제 실행 화면입니다.
숫자가 실제 업무 데이터일 필요는 없습니다. 첫 연습의 목적은 대시보드 구조를 만드는 것입니다. 화면이 안정된 뒤 내 제목과 숫자로 바꿉니다.
예시 2: 블록 게임
일반 웹페이지에 관심이 없다면 게임 화면으로 연습할 수 있습니다. 선생님은 Minecraft의 블록 세계를 골랐습니다.
수업 참고: Microsoft Learn의 Minecraft 예시
이번에도 요청은 짧습니다.
이런 블록 게임을 만들어 주세요.
캐릭터가 움직이고 블록을 놓을 수 있게 해 주세요.Trae는 캐릭터가 움직이고 블록을 놓거나 부술 수 있는 브라우저 게임을 만들었습니다.
위 결과는 2D 횡스크롤 게임입니다. 캐릭터는 평면에서만 움직이고 앞뒤 깊이는 없습니다. 요청에 “블록 게임”만 있고 3D는 없었기 때문에 Trae가 더 단순한 해석을 선택했습니다.
페이지에서 방향키로 걷고 화면을 눌러 블록을 놓아 봅니다. 캐릭터가 움직이고 블록을 놓을 수 있으면 첫 2D 버전은 완성입니다.
3D 버전도 만들기
Minecraft에 가까운 1인칭 화면을 원한다면 요청에 “3D”를 넣습니다. 새 빈 프로젝트에 같은 이미지를 넣고 말합니다.
이런 3D 블록 게임을 만들어 주세요.
걷기, 시점 회전, 블록 놓기를 넣어 주세요.이번에는 실제 3D 블록 세계가 만들어졌습니다.
“게임 시작”을 누른 뒤 WASD로 걷고 마우스로 시점을 돌립니다. 왼쪽 버튼으로 블록을 부수고 오른쪽 버튼으로 놓으며 숫자키로 종류를 바꿉니다.
2D와 3D 중 하나가 항상 더 좋은 것은 아닙니다. 첫 게임은 2D가 완성하기 쉽습니다. 세계 안에서 앞뒤로 걷는 것이 목표라면 “3D가 필요하다”고 분명히 말하세요.
다른 작품으로 바꾸기
참고 화면은 출발점일 뿐입니다. 색, 주제, 글, 이미지, 조작을 바꿔 조금씩 내 작품으로 만드세요.
5. 첫 버전이 마음에 들지 않을 때
첫 버전이 덜 닮았거나 버튼이 반응하지 않아도 정상입니다. 프로젝트는 한 문장으로 끝나지 않습니다. 한 번 보고 조금 고친 뒤 다시 봅니다.
초보자가 자주 하는 실수는 모든 문제를 한 메시지에 넣는 것입니다. 너무 많이 바뀌면 어떤 수정이 결과를 만들었는지 알기 어렵습니다.
간단한 규칙을 씁니다. 한 번에 가장 눈에 띄는 문제 하나만 고릅니다.
모양이 다를 때
카드가 너무 높다면:
위쪽 카드가 너무 높아요. 조금 낮춰 주세요.가운데 이미지가 너무 작다면:
가운데 이미지가 너무 작아요. 더 크게 해 주세요.배경이 너무 어둡다면:
배경이 너무 어두워요. 더 밝은 색으로 바꿔 주세요.조작이 잘못될 때
버튼이 반응하지 않는다면:
이 버튼을 눌러도 반응이 없어요. 고쳐 주세요.게임에서 움직이지 않는다면:
방향키를 눌러도 움직이지 않아요. 이동을 고쳐 주세요.문제를 어떻게 말할지 모를 때
현재 화면을 다시 찍어 전달합니다.
이것이 현재 결과예요. 참고 화면과 비교해서 가장 큰 차이부터 고쳐 주세요.“margin”이나 “responsive layout” 같은 용어를 몰라도 됩니다. “너무 빽빽하다”, “글이 잘 안 보인다”, “모바일에서 엉킨다”도 충분한 설명입니다. 하나를 고친 뒤 다음으로 갑니다.
6. 수업 확인
정지 화면만 보지 말고 실제 페이지를 열어 직접 누르고 플레이합니다.
네 가지를 확인하세요.
- 열린다: 새로고침해도 빈 화면이나 오류가 나오지 않는다
- 이해된다: 다른 사람이 홈페이지, 대시보드, 게임 중 무엇인지 안다
- 조작된다: 주요 버튼이나 기본 게임 조작이 된다
- 엉키지 않는다: 창을 좁혀도 글과 이미지가 심하게 겹치지 않는다
한 항목이 실패하면 본 현상을 Trae에 말하고 그 문제만 고치게 합니다. 네 항목이 통과하면 오늘 작품은 완성입니다.
작은 작품 하나를 완성하기
로그인, 결제, 단체 채팅, 온라인 대전은 오늘의 내용이 아닙니다. 열 개를 시작하고 하나도 끝내지 않는 것보다 작은 화면 하나를 완성하는 것이 중요합니다.
📚 과제
스크린샷 한 장으로 내 페이지 만들기
좋아하는 웹페이지나 게임 화면을 AI에게 주고 한 화면만 복제합니다.
- 사용한 참고 이미지를 보관합니다.
- 첫 버전을 만든 뒤 마음에 들지 않는 한 곳을 수정합니다.
- 수정한 작품의 화면을 저장합니다.
발표할 때 참고 화면과 작품을 나란히 놓고 어떤 부분을 고쳤는지 설명합니다.
이번 장 정리
오늘은 코드가 아니라 스크린샷에서 시작했습니다. 과정은 네 단계입니다.
- 이미지 저장
- AI에게 전달
- 한 문장으로 요청
- 다른 곳을 하나씩 수정
이미지는 AI에게 “어떻게 보여야 하는지” 알려 주고, 말은 “무엇을 해야 하는지” 알려 줍니다. 첫 버전이 나온 뒤 클릭, 관찰, 스크린샷으로 다음 문제를 조금씩 설명합니다.
요청은 기술 설명서처럼 쓸 필요가 없습니다. 간단한 한 문장으로 실행한 뒤 눈앞의 결과를 보며 대화를 이어 갑니다. 프로젝트 만들기가 점점 가까워질 것입니다.