긴 코드와 표가 들어간 개발 기록은 작은 화면에서 어떻게 읽힐까

화면 확인용 예시 글입니다. 아래 코드와 표는 읽기 확인용이며 실제 운영 쿼리가 아닙니다.

긴 코드 줄

SELECT p.id, p.title, p.category, p.published_at, length(p.content) AS content_chars
FROM local_post p
WHERE p.category IN ('개발', '공부', '일상', '기타', '테스트')
  AND p.published_at IS NOT NULL
ORDER BY p.published_at DESC, p.id DESC;

public List<String> titles(List<LocalPost> posts) {
    return posts.stream().map(LocalPost::getTitle).filter(title -> title != null && !title.isBlank()).toList();
}

작은 표

표가 넓으면 표만 좌우로 움직이고, 페이지 전체는 옆으로 밀리지 않아야 합니다.

이 글의 제목은 의도적으로 깁니다. 작은 화면에서 줄바꿈과 여백을 확인하려고 넣었습니다.

코드 줄이 길어지면 줄바꿈을 강제하지 않고, 코드 상자 안에서만 좌우로 움직이게 합니다. 본문 문단은 그대로 화면 안에 남습니다.

표의 칸이 많아도 페이지를 밀지 않아야 합니다. 칸 이름은 짧게 두고, 설명이 길면 본문으로 내립니다.

작은 화면에서 제목이 두 줄 이상으로 나뉘는 것은 의도입니다. 한 단어가 화면 밖으로 나가면 안 됩니다.

관련글은 이 게시판의 다른 개발 글을 보여 줍니다. 현재 보고 있는 글은 목록에 다시 나오지 않아야 합니다.

쿼리와 자바 코드는 읽기 확인용입니다. 운영 데이터베이스를 조회하지 않습니다.

작은 화면에서 볼 때

코드 상자의 언어 이름은 위쪽에 붙습니다. 이름이 길어도 본문을 가리지 않아야 합니다.

표 헤더는 본문과 같은 글자 색을 쓰되, 칸 배경만 조금 다르게 합니다. 녹색 칸은 쓰지 않습니다.

이 글은 개발 게시판의 긴 기록 예시입니다. 실제 장애 보고서가 아닙니다.

확인이 끝나면 같은 게시판의 짧은 글과 그림 글로 이동해 레이아웃이 달라지는지 보면 됩니다.

코드 한 줄이 화면보다 길 때, 손가락으로 상자만 밀어 보면 됩니다. 바깥 글이 따라 움직이면 안 됩니다.