설정 · 업데이트 내역 (웹 · 휴대폰 앱) · 목록과 글

직원이 ARA SYSTEM에 무엇이 새로 생기거나 바뀌었는지 읽는 화면입니다. 업데이트할 때마다 글을 하나씩 더하는 게시판 꼴이라, 목록에서 글을 골라 들어가 읽고 [목록]이나 뒤로로 돌아옵니다. 글은 운영자가 저장소의 backend/release-notes 폴더에 글마다 파일 하나로 쓰고, 웹과 앱이 같은 글을 보여 줍니다(올리는 화면은 없습니다). A는 웹(목록, 글 화면, 좁은 폭), B는 안드로이드 앱, C는 글 파일을 쓰는 법입니다. 맨 위 글은 다음 배포에 낼 첫 글의 초안이고 날짜는 예시입니다. 나머지 세 글은 목록 모양을 보이려고 넣은 예시입니다. 초안이며 사용자 확인 전입니다(2026-11-10).

A1. 웹 · 목록 (PC 1440)

설정 왼쪽 메뉴에 셋째 묶음 정보를 새로 두고 그 아래에 업데이트 내역을 둡니다. 주소는 /settings/info/release-notes입니다. 줄을 누르면 A2 글 화면입니다.

{{ listStateTitle }}

{{ listStateNote }}

설정
통합 검색
김아라 ara.kim@arasystem.it.kr
로그아웃

업데이트 내역

웹메일과 휴대폰 앱에 새로 생기거나 바뀐 것을 알려 드립니다.

문제가 생겨 하던 일을 마치지 못했습니다. 잠시 뒤 다시 시도해 주세요.

문의 코드 3f1c0a2e

아직 알려 드릴 업데이트가 없습니다.

A2. 웹 · 글 화면 (PC 1440)

주소는 /settings/info/release-notes/{id}이고 id는 글 파일 이름입니다(예 2026-11-18). 글을 보는 동안에도 메뉴의 업데이트 내역이 고른 상태입니다.

{{ postStateTitle }}

{{ postStateNote }}

설정
통합 검색
김아라 ara.kim@arasystem.it.kr
로그아웃

{{ top.date }}

{{ top.title }}

{{ g.head }}
  • {{ l.text }}
    •

{{ mid.date }}

{{ mid.title }}

{{ g.head }}
  • {{ l.text }}
    •

찾을 수 없습니다. 이미 지워졌거나 옮겨졌을 수 있습니다.

문의 코드 3f1c0a2e

문제가 생겨 하던 일을 마치지 못했습니다. 잠시 뒤 다시 시도해 주세요.

문의 코드 3f1c0a2e

A3. 웹 · 좁은 폭 (휴대폰 브라우저 360)

지금 설정 화면이 좁은 폭에서 바뀌는 그대로이고, 목록 줄만 날짜를 제목 아래로 내립니다. 두 장 모두 메뉴가 끝나는 곳까지 내린 모습입니다.

목록

머리 줄을 감추고 날짜를 제목 아래로 내립니다. 줄 전체를 누르는 것은 같습니다.

업데이트 내역

웹메일과 휴대폰 앱에 새로 생기거나 바뀐 것을 알려 드립니다.

글 화면

[← 목록으로] 줄, 날짜, 제목, 묶음 차례와 글자 크기는 넓은 화면과 같고, 글은 한 칸으로 흐릅니다.

목록으로

{{ top.date }}

{{ top.title }}

{{ g.head }}
  • {{ l.text }}
    •

좁은 폭에서 바뀌는 것

  • 화면 폭이 840보다 좁으면(레일 72, 메뉴 208, 글 칸 560이 한 줄에 들지 않으면) 메뉴가 위로 올라가 폭 전체를 쓰고, 목록과 글은 그 아래로 내려갑니다. 지금 다른 설정 화면과 같습니다.
  • 목록 칸이 480보다 좁으면 머리 줄을 감추고 날짜를 제목 아래로 내립니다. 이것만 새로 정한 것입니다.
  • 목록에서 글을 누르면 새 주소의 화면이 열리니, 휴대폰 브라우저에서는 글을 볼 때도 메뉴 아래로 내려야 합니다(지금 설정 화면들과 같아 그대로).
  • 폭 360에서는 상단 바가 세 줄(설정, 검색 칸, 계정)이 되고, 화면 폭 480 이하에서는 메일 주소를 감추고 이름만 둡니다(15단계 그대로).
  • 글 칸의 좌우 여백 32도 그대로라 폭 360에서 글 폭은 224입니다.

B. 휴대폰 앱 (안드로이드 360×800)

설정 탭의 앱 정보 절에서 업데이트 내역 목록으로 들어가고, 줄을 누르면 글 화면입니다. 둘 다 탭 막대 없는 전체 화면이고 위 막대의 뒤로로 돌아갑니다. 글은 웹과 같고, 새 화면의 글자는 앱 테마 크기(13, 15, 16, 18)로 그렸습니다.

B1. 설정 탭

앱 정보 절의 둘째 줄(앱 버전 다음)이 새 줄이고, 오픈소스 라이선스 줄과 같은 꼴입니다. 누르면 B2 목록입니다. 이 크기에서는 [로그아웃]이 탭 막대에 조금 가리고, 내리면 다 보입니다.

설정

내 정보

김아라 ara.kim@arasystem.it.kr

알림

새 메일 알림 새 메일이 오면 휴대폰 알림으로 알려 드립니다.

앱 정보

앱 버전 1.0.0
업데이트 내역

문의

앱이나 계정 문제로 도움이 필요하면 연락해 주세요.
IT 담당 홍길동 · 02-000-0000 · 사내 메신저 @it

B2. 목록

위 막대에 뒤로와 제목을 둡니다. 줄마다 제목, 날짜, 끝에 ›이고 줄 전체를 누릅니다(68). [더 보기]는 글이 20개를 넘을 때만 있습니다(보드는 자리를 보이려고 그렸습니다).

업데이트 내역

B3. 글 · 맨 위 글

위 막대에는 뒤로만 둡니다. 날짜, 제목, 묶음 차례이고 길면 화면이 스크롤합니다. 끝에는 이전 글 줄만 있습니다(더 새 글이 없어 다음 글 줄은 없습니다).

{{ top.date }}

{{ top.title }}

{{ g.head }}
  • {{ l.text }}
    •

B4. 글 · 가운데 글

짧은 글이라 끝의 다른 글 줄이 한 화면에 들어옵니다. 다음 글(더 새 글)이 위, 이전 글(더 옛 글)이 아래입니다. 목록과 같은 차례입니다.

{{ mid.date }}

{{ mid.title }}

{{ g.head }}
  • {{ l.text }}
    •

B5. 글 · 없는 글

지워졌거나 주소가 틀린 글입니다(404 RES_001). 사전 글, 문의 코드, [목록으로]를 둡니다. 위 막대의 뒤로도 목록입니다.

찾을 수 없습니다. 이미 지워졌거나 옮겨졌을 수 있습니다.

문의 코드 3f1c0a2e

B6. 글 · 받지 못함

그 밖의 실패입니다. 사전 글, 문의 코드, [다시 시도]를 둡니다. 메일 목록의 받지 못함과 같은 꼴입니다.

문제가 생겨 하던 일을 마치지 못했습니다. 잠시 뒤 다시 시도해 주세요.

문의 코드 3f1c0a2e

B7. 목록 · 불러오는 중

줄 자리를 막대로 잡아 둡니다. 웹과 같은 결입니다.

업데이트 내역

B8. 목록 · 받지 못함

사전 글, 문의 코드, [다시 시도]를 둡니다.

업데이트 내역

문제가 생겨 하던 일을 마치지 못했습니다. 잠시 뒤 다시 시도해 주세요.

문의 코드 3f1c0a2e

B9. 목록 · 글이 없을 때

빈 메일함과 같은 꼴로 한 줄만 둡니다.

업데이트 내역

아직 알려 드릴 업데이트가 없습니다.

C. 쓰는 법 (운영자용)

화면이 아니라 설명입니다. 글 하나가 파일 하나입니다. 업데이트할 때마다 저장소의 backend/release-notes 폴더에 파일을 하나 더해 커밋하고 배포하면(백엔드를 다시 빌드) 웹과 앱에 함께 나옵니다. 고치거나 지울 때도 그 파일만 다룹니다. Gitea 웹 화면에서 해도 됩니다.

폴더와 파일

파일 이름이 날짜이자 글 주소입니다 · 마크다운의 아주 작은 일부만 씁니다

backend/release-notes/
├ 2026-11-03.md
├ 2026-11-04.md
├ 2026-11-05.md
└ 2026-11-18.md 새 글은 새 파일 하나
2026-11-18.md
{{ r.sign }}{{ r.text }}
2026-11-04.md
{{ r.sign }}{{ r.text }}

⑤의 옅은 청록 칸은 빈칸 두 개 자리입니다(보드에서 보이게 칠했습니다). ⋮ 아래는 보드에서만 줄였습니다.

화면에 나오는 모양

웹 모양 그대로 · 번호는 왼쪽 파일의 줄과 짝입니다

목록

메일 검색이 빨라지고 휴대폰 앱이 나왔습니다2026년 11월 18일
화면의 안내 글을 다듬었습니다2026년 11월 5일
왼쪽 메뉴를 정리했습니다2026년 11월 4일

글 화면 (2026-11-18.md)

2026년 11월 18일
메일 검색이 빨라지고 휴대폰 앱이 나왔습니다
휴대폰 앱
안드로이드 휴대폰 앱이 나왔습니다. 웹메일의 [설정] → [휴대폰 앱]에서 받을 수 있습니다.
앱에서 메일을 읽고 쓰고 찾을 수 있고, 새 메일이 오면 휴대폰으로 알려 드립니다. 알림에는 새 메일이 몇 통인지만 나오고, 보낸 사람이나 제목은 나오지 않습니다.
메일 검색
메일 검색이 빨라졌습니다. [조건]을 눌러 보낸 사람, 받는 사람, 제목, 본문, 기간, 첨부로 나눠 찾을 수 있습니다.

글 화면 (2026-11-04.md)

2026년 11월 4일
왼쪽 메뉴를 정리했습니다
아직 준비 중인 [ERP]를 왼쪽 메뉴에서 뺐습니다.

⑥의 메모 줄은 화면에 나오지 않습니다. ⑤는 앞 줄에 띄어쓰기 하나로 이어 붙은 자리입니다(보드에서 보이게 칠했습니다).

줄마다 뜻

{{ d.code }}
{{ d.text }}

지킬 것

  • 글 하나가 파일 하나입니다. 업데이트할 때마다 backend/release-notes 폴더에 파일을 하나 더해 커밋하고 배포합니다. 고치거나 지울 때도 그 파일만 다룹니다.
  • 파일 이름은 날짜입니다(2026-11-18.md). 같은 날 두 번째 글은 2026-11-18-2.md로 씁니다. 날짜는 파일 이름에서 읽으니 파일 안에 다시 쓰지 않습니다.
  • 파일 이름은 글 주소가 됩니다. 날짜를 고치면 주소도 바뀌어, 그전 주소로 들어오면 없는 글 화면이 나옵니다.
  • 첫 줄은 # 제목이고 꼭 있어야 합니다. 목록의 한 줄과 글 화면의 제목이 됩니다. 글 하나에 줄이 하나는 있어야 합니다.
  • 길이는 제목 100자, 묶음 머리 40자, 한 줄 500자까지입니다.
  • 굵게, 링크, 그림은 쓸 수 없고 쓴 글이 그대로 나옵니다. 단추나 메뉴 이름은 [설정] → [휴대폰 앱]처럼 씁니다.
  • 형식이 틀린 글은 시험(CI)이 막습니다. 그래도 배포되면 서버는 그 글만 건너뛰고 로그에 파일 이름과 줄 번호를 남깁니다. 서버는 그대로 뜹니다.
  • 웹과 앱이 같은 글을 보여 줍니다. 앱은 옛 판이어도 새 글을 받으니, 앱 이야기를 쓸 때 새 판을 내지 않아도 됩니다.

정한 것과 구현 때 맞출 것

정할 것 문서(2026-11-10, 목록형 · 게시판 꼴)를 따르고, 문서에 없어 보드에서 정한 것을 함께 적었습니다.

자리, 주소, API

  • 웹은 설정 메뉴의 셋째 묶음 정보 아래 업데이트 내역입니다(계정, 메일 다음). 아이콘은 이미 있는 문서 그림(file-text)입니다.
  • 웹 주소는 목록 /settings/info/release-notes, 글 /settings/info/release-notes/{id}입니다. id는 파일 이름(예 2026-11-18)이고, 글을 보는 동안에도 메뉴의 업데이트 내역이 고른 상태입니다. 탭 제목은 둘 다 업데이트 내역입니다(다른 화면처럼 라우트마다 정한 이름).
  • 앱은 설정 탭 앱 정보 절의 앱 버전 다음 줄입니다. 목록 /settings/release-notes, 글 /settings/release-notes/{id}이고 둘 다 탭 막대 없는 전체 화면입니다.
  • 목록 GET /api/release-notes?cursor=&limit= 는 { items: [{ id, date, title }], pageInfo }입니다. 최근 글부터, 기본 20, 최대 50.
  • 글 GET /api/release-notes/{id} 는 { id, date, title, sections: [{ heading, items }], previous, next }입니다. previous(더 옛 글)와 next(더 새 글)는 { id, date, title } 또는 null이고, 없는 글은 404 RES_001입니다. 올리는 API는 없습니다.
  • 웹과 앱이 같은 목록이고 거르지 않습니다. 새 글 표시(점, 개수, NEW)와 번호, 작성자, 조회 수 칸은 두지 않습니다.

목록과 글의 모양

  • 웹 목록은 머리 줄(제목, 날짜 32)이 있는 표 꼴이고, 설정의 로그인 기록 표와 같은 상자입니다. 줄(48 이상) 전체가 글로 가는 링크라 마우스를 올리면 옅은 청록 바탕, 키보드 초점은 안쪽 청록 테두리입니다. 제목이 길면 줄을 바꾸고 날짜는 오른쪽 칸(136)에 둡니다.
  • 목록 칸이 480보다 좁으면 머리 줄을 감추고 날짜를 제목 아래로 내립니다(A3).
  • 웹 글 화면은 위에 [← 목록으로] 줄(목록 보기에서 연 메일과 같은 꼴, 52), 그 아래 날짜 12.5, 제목 18(h1), 묶음 머리 14(h2), 줄 13(줄 간격 1.6), 글 폭 680까지입니다.
  • 글 끝에는 다른 글 줄(다음 글이 위, 이전 글이 아래, 목록과 같은 차례)과 [목록]을 둡니다. 없는 쪽의 줄은 두지 않습니다. 다른 글 줄은 목록 줄처럼 줄 전체를 누릅니다.
  • 앱 목록 줄은 제목 16, 날짜 13, 끝에 ›이고 68(설정 탭의 두 줄 칸과 같다)입니다. 앱 글 화면의 위 막대는 뒤로만이고 날짜 13, 제목 18, 머리 15, 줄 15(줄 간격 1.6), 끝에 다른 글 줄(64)이 있습니다. [목록] 단추는 두지 않습니다.
  • 대괄호 글은 꾸미지 않고 쓴 그대로 둡니다. 웹 설명 한 줄은 목록 화면에만 둡니다.
목록 줄 · 보통, 마우스를 올렸을 때, 키보드 초점
화면의 안내 글을 다듬었습니다2026년 11월 5일
왼쪽 메뉴를 정리했습니다2026년 11월 4일
2단계 인증과 앱 비밀번호를 쓸 수 있습니다2026년 11월 3일

상태와 [더 보기]

  • 목록은 처음 20개를 받고, 더 있으면 목록 아래 [더 보기]로 20개씩 더 받습니다(웹 44, 앱 48 폭 전체). 받는 동안 그 단추만 바쁨 표시이고, 더 받지 못하면 알림으로 알리고 받은 줄은 그대로 둡니다.
  • 목록을 불러오는 중에는 줄 자리를 막대로 잡아 둡니다. 받지 못하면 그 자리에 사전 글, [다시 시도], 문의 코드를 두고 알림은 띄우지 않습니다. 글이 없으면 "아직 알려 드릴 업데이트가 없습니다." 한 줄입니다.
  • 글 화면을 받는 동안은 글 자리를 막대로 잡아 둡니다(목록과 같은 결, 보드에는 그리지 않았습니다). 없는 글(지워졌거나 주소가 틀림, 404 RES_001)은 사전 글과 [목록으로], 그 밖의 실패는 사전 글과 [다시 시도]입니다.
  • 웹은 어떤 상태에서도 [← 목록으로] 줄이 위에 남습니다(목록 보기에서 연 메일과 같다). 앱은 위 막대의 뒤로가 늘 목록입니다.
웹 [더 보기] · 받는 동안
앱 [더 보기] · 받는 동안 더 보기

구현 때 맞출 것

  • 웹 상태는 지금의 MailLoadError(없는 글은 이름을 목록으로 둔 leaveLabel)와 StateMessage 그대로입니다. 위의 [← 목록으로]는 목록 보기 읽기 화면의 줄(MailToolButton accent)과 같은 꼴입니다.
  • 앱의 받지 못함, 빈 목록 틀(MailStateLayout, MailListError)과 불러오는 중 막대(MailListSkeleton)는 shared 쪽으로 옮겨 함께 씁니다. 받지 못함과 없는 글의 제목은 긴 문장이라 15, 글이 없음의 제목은 빈 메일함과 같은 크기입니다.
  • 앱 빈 목록의 그림은 웹과 같은 문서 그림으로 맞춥니다(Material 의 article_outlined 쯤).
  • 첫 글의 파일 이름(날짜)은 배포하는 날로 고칩니다(보드는 2026-11-18). 이름을 고치면 글 주소도 바뀝니다.
  • 웹 좁은 폭은 지금 설정 화면 그대로라, 휴대폰 브라우저에서는 목록도 글도 메뉴 아래로 내려야 나옵니다(A3).