화면이
내 뜻과 다를 때
“한 화면에 들어오게 해줘.”
사진과 글이 모두 작아졌다. 내가 원한 건 한 장면씩 읽는 화면이었는데.
책 2장의 실제 사건에서 시작해, 화면 하나를 고칠 말과 확인 방법을 함께 만듭니다.
코드 이름을 몰라도 괜찮아요.
“사진이 너무 작아요”처럼 지금 보이는 것부터 말하세요. 아래를 모두 채울 필요는 없습니다. 모르는 것은 AI가 확인하거나 필요한 질문을 이어가면 됩니다.
누가, 어디서, 어떤 순서로 볼까요? 이 중 아는 것만 보태면 됩니다. 이번에는 화면 하나에서 불편 한 가지를 고칩니다.
적은 만큼만 넣어도 시작됩니다.
이 페이지는 입력을 저장하거나 서버로 보내지 않습니다. AI 호출 없이 문장만 조합합니다. 화면을 닫기 전에 요청문을 복사하세요. 실명·비밀 주소·고객정보는 넣지 마세요.
쓰던 AI에 직접 붙여넣고, 고칠 원본의 위치나 공개해도 되는 화면을 함께 건네세요.
이 예제로 먼저 비교해보세요.
교육용 재현입니다. 아래는 책의 사건을 참고해 새로 만든 여행 메모 화면입니다. 실제 홈페이지 캡처나 당시 AI 출력이 아닙니다.
예제 요청: “휴대폰에서 카드 하나씩 읽고 아래로 넘기고 싶어. 그림과 문장 여섯 개는 그대로 두고, 글자는 줄이지 마. 세 칸 배치를 한 칸으로 바꿔줘.”
스크롤 한 번에 한 장으로 강제 이동하는 기능은 이 예제의 범위에 없습니다.
수정 전: 같은 카드 여섯 장을 세 칸으로 나눠 작게 표시합니다.
수정 후: 여섯 제목·설명·그림·순서를 유지하며 한 칸으로 읽기 좋게 배열합니다. 아래 예제 주소에서 같은 폭으로 비교할 수 있습니다.
https://hammedia.co.kr/book/appendix-screen/
전 · 작게 한꺼번에
수정 전 따로 열기 ↗후 · 한 장씩 차례로
수정 후 따로 열기 ↗같은 폭에서 두 화면을 비교하세요. 수정 후 화면 안에서도 아래로 스크롤하면 같은 여섯 장이 이어집니다.
처음 불편했던 곳에서 다시 열어요.
“390px 예제에서 한 줄에 카드 하나가 보였고 여섯 제목과 설명이 그대로였다. 실제 휴대폰은 아직 못 봤다.”
기록 형식의 예시입니다. 모든 기기에서 확인됐다는 뜻은 아닙니다.
필요한 도구 하나만 꺼내세요.
- UI 용어 대시보드 — 화면 요소의 이름이 궁금할 때.
- 코딩 AI 호출 카드북 — 읽기·수정 범위를 정하고 싶을 때.
- 책 2장 무료로 읽기 — 페이지의 ‘2장 전체 무료로 읽기’를 펼칩니다.
화면 하나를 고쳤다면, 책 2장으로 돌아가 내가 쓰는 환경에서도 같은 결과가 나오는지 확인해보세요.