개발 편집팀

긴 텍스트가 깨뜨리는 레이아웃 점검 — 새 구성원의 첫 읽기의 작은 화면의 재현 조건

컴퓨터에서는 되지만 휴대폰 화면에서는 다르게 보이는 상황을 살펴봅니다. 여기에 처음 참여한 사람이 기존 약어와 작업 순서를 모르는 장면을 더합니다. 긴 주소와 공백 없는 문자열을 화면에 넣어봅니다. 화면 크기와 입력 내용을 고정한 뒤 한 조건씩 바꾸어 확인합니다.

코드 화면 앞 키보드를 사용하는 개발자의 손
코드 화면 앞 키보드를 사용하는 개발자의 손
1

장면과 준비 조건

컴퓨터에서는 되지만 휴대폰 화면에서는 다르게 보이는 상황을 살펴봅니다. 처음 읽는 사람에게 필요한 배경을 맨 앞에 적습니다

2

작은 범위에서 확인

긴 주소와 공백 없는 문자열을 화면에 넣어봅니다. 화면 크기와 입력 내용을 고정한 뒤 한 조건씩 바꾸어 확인합니다

3

결과를 다음 행동으로

전체 페이지에 가로 스크롤이 생기지 않는지 확인하고, 남은 질문과 다시 살펴볼 조건을 한곳에 기록합니다.

점검할 환경과 입력

컴퓨터에서는 되지만 휴대폰 화면에서는 다르게 보이는 상황을 살펴봅니다. 여기에 처음 참여한 사람이 기존 약어와 작업 순서를 모르는 장면을 더합니다. 긴 주소와 공백 없는 문자열을 화면에 넣어봅니다. 화면 크기와 입력 내용을 고정한 뒤 한 조건씩 바꾸어 확인합니다.

  • 장면을 좁히기: 처음 읽는 사람에게 필요한 배경을 맨 앞에 적습니다
  • 작게 실행하기: 긴 주소와 공백 없는 문자열을 화면에 넣어봅니다.
  • 확인하고 남기기: 전체 페이지에 가로 스크롤이 생기지 않는지 살펴보고 다음에 다시 볼 위치를 적습니다.

재현 결과를 남기는 기준

작은 화면의 재현 조건 상황에서는 전체 페이지에 가로 스크롤이 생기지 않는지 확인하는 과정이 필요합니다. 처음 읽는 사람에게 필요한 배경을 맨 앞에 적습니다 그 뒤 화면 크기와 입력 내용을 고정한 뒤 한 조건씩 바꾸어 확인합니다 이 순서로 살펴봤을 때 불편이 남는다면 필요한 준비가 빠졌는지, 예상한 사용 장면과 실제 적용 조건이 다른지 나누어 봅니다.