From c672111d18d0d07679427be3f93d6226f1af8070 Mon Sep 17 00:00:00 2001 From: umsangdon Date: Tue, 13 Oct 2026 12:19:55 +0900 Subject: [PATCH] =?UTF-8?q?chore(=EC=9A=94=EA=B5=AC):=20193~195=20?= =?UTF-8?q?=EC=A1=B0=EC=82=AC=20AN=20=E2=80=94=20=EC=96=B4=EB=8A=90=20?= =?UTF-8?q?=EA=B8=B0=EA=B8=B0=EB=93=A0=20=EA=B0=99=EC=9D=80=20=EA=B8=B0?= =?UTF-8?q?=EB=8A=A5=20=C2=B7=20=EA=B8=B0=EA=B8=B0=20=EB=B0=94=EB=80=9C=20?= =?UTF-8?q?=EC=95=8C=EC=95=84=EC=B1=84=EA=B8=B0=20=C2=B7=20=EC=86=90?= =?UTF-8?q?=EA=B0=80=EB=9D=BD=20=EB=8C=80=EC=9D=91=ED=91=9C=20=C2=B7=20?= =?UTF-8?q?=EB=8F=84=EA=B5=AC=20=C2=B7=20=EC=B6=9C=EC=B2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_01C6BNBFXFndbqYxu6sZuknK --- docs/raw/요구_1010_2/조사_AN_기기대응.md | 111 +++++++++++++++++++++++ 1 file changed, 111 insertions(+) create mode 100644 docs/raw/요구_1010_2/조사_AN_기기대응.md diff --git a/docs/raw/요구_1010_2/조사_AN_기기대응.md b/docs/raw/요구_1010_2/조사_AN_기기대응.md new file mode 100644 index 000000000..23043d182 --- /dev/null +++ b/docs/raw/요구_1010_2/조사_AN_기기대응.md @@ -0,0 +1,111 @@ +# 조사 AN — 어느 기기든 같은 기능 · 기기 대응 방향 (요구 193~195 · 조사만) + +대상 = 휴대폰 · 태블릿 · PC 어디서든 같은 기능. 사용자 확정 방향 = 기기별 따로 개발 없음 · 페이지는 데스크탑 보고 개발 → 공통 층이 다른 기기에 자동 반영 · 특수한 경우만 따로. 코드 · 계획서 없음 · 인터넷 조사 셋(사람 · 제품 / 기기 바뀜 알아채기 / 손가락 꼴 · 도구) + 코드 훑음(10-13). + +## 1. 한눈 결론 + +- 사용자 방향 = 업계 정석. W3C One Web(2008) · Apple · Microsoft · Google · NN/g 모두 「기능은 같게 · 배치 · 보이는 양 · 입력 방식만 바꿈」. +- 기기 이름으로 가르지 않음 — 아이패드 사파리는 Mac 으로, 고급 안드로이드 태블릿 크롬은 데스크탑으로 자기를 알림. 실행 중 세 가지를 계속 봄: 쓸 수 있는 폭 · 지금 쓰는 입력 · 되는 기능. +- 배치는 폭으로만 바꿈 · 입력(손가락 · 마우스)은 누를 자리 크기 · 동작 번역에만 씀(입력은 수시로 뒤바뀜 → 배치를 흔들면 누르는 도중 화면이 움직임). +- 공통 층 세 곳으로 거의 모든 페이지가 손대지 않고 맞춰짐: ① 공통 CSS(폭 구간 · 손가락이면 누를 자리 크게) ② 입력 번역 파일 하나(길게 누름 → 우클릭 · 두 손가락 → 휠 확대 · 두 번 톡 → 더블클릭 · 끌기) ③ 지도 · 3D 라이브러리에 이미 든 손가락 기능. +- 「데스크탑만 보고 개발」을 지키는 울타리 = 자동 점검(Playwright 기기 흉내로 모든 페이지를 작은 화면 · 터치로 열어 넘침 · 가려짐 · 못 누름 찾음) + 마지막 실기기(iOS 고유 흠). +- 특수한 경우 = CAD · 그림 정밀 고르기(꾹 누르면 십자선 · 돋보기) · 표 칸 편집 화면 자판 · 3D · 큰 지도 무게 · 붙여넣기. +- 피할 것 = 새 부품 체계 통째 도입(Ionic · Material Web · Fluent · Spectrum) · 모바일 전용 화면 · 기기 이름 갈래 · 확대 막기(user-scalable=no) · 멈춘 도구(Hammer.js · what-input · detect-it · Touch Punch). +- http 주소(Tailscale IP) = 「안전하지 않은 주소」 → 클립보드 읽기 · 카메라 · 위치 · 앱 설치(PWA) · Web Share 막힘 = 기기 아닌 주소 탓 기능 차이. 푸는 길 = Tailscale https 인증서(90일 갱신 · 기기 이름이 공개 인증서 기록에 남음). + +## 2. 같은 생각 — 사람 · 원칙 + +| 누구 | 요지 | 출처 | +|---|---|---| +| W3C One Web(2008) | 같은 정보 · 서비스를 기기와 상관없이 · 모양은 같지 않아도 됨 | https://www.w3.org/TR/mobile-bp/ | +| Karen McGrane(2012) | "You don't get to decide which platform or device your customers use to access your content: they do." | https://abookapart.com/products/content-strategy-for-mobile | +| Josh Clark(2012) | 「Mobile = Less」는 미신 · 사용자는 데스크탑에서 되는 일을 다 기대 · 어느 PC 든 터치일 수 있다고 보고 만듦 | https://bradfrost.com/blog/post/bdconf-josh-clark-presents-the-seven-deadly-myths-of-mobile/ | +| Ethan Marcotte(2010) | 기기마다 따로 말고 같은 경험의 여러 면 | https://alistapart.com/article/responsive-web-design/ | +| Jason Grigsby(2016) | 입력은 미리 못 알고 수시로 바뀜 → 어디서나 되는 기본 입력 위에 덧붙임 · 기본 크기는 터치 기준 | https://alistapart.com/article/adapting-to-input/ | +| NN/g(2016) | 기기 간 내용 · 기능 동등 = 좋은 목표 · 화면 요소까지 같을 필요 없음 | https://www.nngroup.com/articles/mobile-first-not-mobile-only/ | +| Patrick Lauke(2020) | pointer · hover 미디어 기능을 잘못 짐작하기 쉬운 점들 | https://css-tricks.com/interaction-media-features-and-their-potential-for-incorrect-assumptions/ | + +## 3. 플랫폼 지침 + +- Apple HIG — 크기가 바뀌어도 기능은 그대로 · 바꿔도 되는 것은 보이는 양뿐 · 배치는 기기 종류 · 방향이 아니라 크기 등급으로. https://developer.apple.com/design/human-interface-guidelines/layout +- iPadOS 26(2025-06) — 창 크기 자유 조절 · 여러 창 → 태블릿도 어떤 폭이든 됨. https://www.apple.com/newsroom/2025/06/ipados-26-introduces-powerful-new-features-that-push-ipad-even-further/ +- Google 창 크기 등급 — 폭 600 · 840 · 1200 · 1600 경계 · 실행 중 바뀜 · 「태블릿 판정용 아님」. https://developer.android.com/develop/adaptive-apps/guides/use-window-size-classes +- Google 표준 배치 — 목록-상세(좁으면 한 칸씩 + 뒤로) · 보조 칸(좁으면 아래 · 바텀시트) · 피드. https://developer.android.com/develop/adaptive-apps/guides/canonical-layouts +- Android 16 · 17 — 큰 화면에서 앱의 방향 고정 · 크기 조절 금지 무시 · Google Play 2027-08 의무. 큰 화면 앱에 마우스 · 키보드(우클릭 · hover · Ctrl+휠 · 단축키)도 요구. https://developer.android.com/about/versions/16/behavior-changes-16 · https://developer.android.com/docs/quality-guidelines/adaptive-app-quality/tier-2 +- Microsoft — 기능은 한 번 만들고 모든 화면 크기에서 돌게 · 경계는 물리 화면이 아니라 앱 창 크기. https://learn.microsoft.com/en-us/windows/apps/design/layout/responsive-design +- web.dev — 입력 방식을 화면 크기로 짐작하지 말고 pointer · hover 미디어 기능으로. https://web.dev/learn/design/interaction + +## 4. 제품 사례 + +- Onshape(CAD) — 「보기 전용이나 기능 일부만 주는 길을 거부」(2015) · 휴대폰에서도 설계 · 핀치 · 여러 손가락 제스처 · 꾹 누르면 십자선 정밀 고르기 · 로그인 8건 중 1건 모바일(2018). 한계: 모바일 브라우저 3D 가 약해 앱으로 감(2018) · 도면은 iOS 에서 이름 바꿈 · 지움 · 내보내기만 · 새 기능이 모바일에 몇 주 늦음. https://develop3d.com/develop3d-blog/onshape-cloud-3d-cad-system-now-available-on-android-phones-and-tablets/ · https://www.onshape.com/en/blog/under-the-hood-cad-for-mobile +- Shapr3D — Mac · iPad · Windows 같은 기능(회사 주장) · iPad 는 펜 · 터치, PC 는 마우스 · 단축키. https://www.shapr3d.com/mac-os +- Excel — 리본이 휴대폰에서 아래 명령 막대로 · 접고 펼침. 웹판은 매크로 불가 → 데스크탑 앱으로 넘김. https://support.microsoft.com/en-us/office/show-or-hide-the-ribbon-in-excel-for-mobile-devices-91175ba0-51fd-4256-93a1-69f5a23f27e6 +- Notion — 데스크탑 「/」 명령을 모바일 「+」 메뉴가 대신. https://www.notion.com/help/workspaces-on-mobile +- 물러난 쪽 — Figma 휴대폰 앱 = 디자인 편집 불가(보기 · 댓글) · AutoCAD 모바일 = 가벼운 편집 · Airtable = 일부 기능 없음. https://help.figma.com/hc/en-us/articles/1500007537281-Guide-to-the-Figma-mobile-app · https://support.airtable.com/docs/differences-between-the-desktop-and-mobile-versions +- 교훈 — 끝까지 지킨 쪽은 손가락 입력을 새로 설계(정밀 고르기 · 회전 잠금 · 펜). + +## 5. 기기 바뀜 알아채기 — 권장 모델 + +- 셸 모듈 하나가 `` 에 지금 상태를 계속 적음: 폭 구간 · 손가락 있음(any-pointer: coarse) · 마지막 입력(pointerType) · 보안 주소 · 화면 자판이 가린 높이. +- 듣는 것: matchMedia change(폭 · 입력 · 배율) · pointerdown · visualViewport resize · screen.orientation change → 바뀔 때만 이벤트 하나. +- 공통 CSS 가 그 표시로 누를 자리를 키우고 hover 때만 보이던 것을 늘 보이게 함 · 판 안 부품은 컨테이너 쿼리(2025-08 모든 브라우저) · 캔버스 · 지도 · 3D 는 자기 ResizeObserver. +- 기능은 쓰기 바로 전에 확인 · 없으면 단추 숨김. +- 함정: 첫 화면 깜빡임(첫 값은 index.html 머리에서) · 폭 경계가 CSS · TS 두 벌이면 어긋남(한 표 + 시험) · 창 폭 ≠ 판 폭(컨테이너 쿼리) · 감지는 틀릴 수 있음 → 사용자 「터치 모드」 스위치로 덮어씀. +- 화면 높이 `100vh` → `dvh` · 노치 → `env(safe-area-inset-*)` · `user-scalable=no` 쓰지 않음(캔버스 · 지도에만 `touch-action: none`). +- 서버 쪽 기기 힌트(Sec-CH-UA-Mobile) = 크롬만 · https 에서만 → 서버는 한 벌만 냄. +- 출처: https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerType · https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/any-pointer · https://web-platform-dx.github.io/web-features-explorer/features/container-queries/ · https://developer.mozilla.org/en-US/docs/Web/Security/Defenses/Secure_Contexts · https://tailscale.com/kb/1153/enabling-https + +## 6. 손가락 · 작은 화면 대응표 (공통 층에서 자동) + +| 데스크탑 | 손가락 · 작은 화면(같은 기능) | 공통 층 자리 | +|---|---|---| +| 위 메뉴 | 좁으면 ☰ 서랍(항목 많음) | 앱 껍데기 | +| 좌측 패널 320 | 접히는 서랍 · 아래에서 올라오는 판 | 공용 레이아웃 | +| 떠 있는 끌기 판 | 비모달 바텀시트(뒤 화면 계속 조작) | 공용 판 | +| 팝업 · 겹친 팝업 | 전체 화면 시트 · 둘째는 같은 시트 안 다음 쪽 + [뒤로] | 공용 모달 관리 | +| 우클릭 메뉴 | 길게 누름 + 늘 보이는 ⋯ 단추(같은 메뉴 정의) | 공용 메뉴 + 입력 번역 | +| 더블클릭 | 두 번 톡 + 고른 뒤 보이는 [편집] 단추 | 명령 등록 | +| 휠 확대 | 핀치 + [+][−] 단추(WCAG 2.5.1) | 공용 캔버스 틀 | +| 단축키 | 같은 명령을 단추 · 명령 목록으로도 | 명령 등록 한 곳 | +| 끌어 놓기 | 손잡이 + [이동] 단추(WCAG 2.5.7) | 공용 목록 | +| 넓은 표 | 머리줄 · 첫 열 고정 + 가로 밀기 · 카드 보기는 특수한 경우만 | 공용 표 | +| 숫자 칸 | 숫자 자판(inputmode decimal · numeric) | 공용 입력 | +| PDF · 엑셀 받기 | 서버 주소 + attachment(아이폰은 blob 이 탭에서 열림) | 공용 내려받기 | + +- 입력 번역 사실 확인: iOS 사파리는 길게 누름에 우클릭 신호를 안 냄(WebKit 213953 · 2026 미해결) · 안드로이드 크롬은 냄(둘 다 오면 하나만) · 터치스크린 핀치는 휠로 안 바뀜(노트북 터치패드 핀치만 Ctrl+휠) → 두 손가락 거리 비율로 같은 꼴 Ctrl+휠을 만들면 지금 확대 코드가 받음 · 지도 · 3D 는 빼고(자체 터치) · 대상에 `touch-action: none` · 두 번 톡 더블클릭은 대개 브라우저가 냄(안 올 때만 대신). +- 누를 자리: WCAG 2.5.8 최소 24px · Apple 44pt · Material 48dp → 손가락이면 공용 단추만 키움. +- CAD 정밀 고르기: 손가락 접촉 크기만큼 고름 반경 · 꾹 누르면 손가락 위 십자선(Onshape) · 돋보기 + 스냅(AutoCAD · ARES) · 펜은 마우스처럼 정밀. +- 출처: https://bugs.webkit.org/show_bug.cgi?id=213953 · https://danburzo.ro/dom-gestures/ · https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html · https://www.nngroup.com/articles/mobile-tables/ · https://bradfrost.github.io/this-is-responsive/patterns.html · https://www.onshape.com/en/resource-center/tech-tips/tech-tip-mastering-gestures-mobile + +## 7. 도구 (2026-10-13 판) + +- 공용 층만 · 페이지 그대로: 브라우저 기본(Pointer Events · touch-action · pointer/hover 미디어 · sticky · inputmode) · maplibre-gl 6.14(핀치 · 끌기 · 기울기 내장) · three.js 0.186 OrbitControls(한 손가락 회전 · 두 손가락 확대 · 이동) · long-press-event 2.5.2(길게 누름 · 지연 500ms 로). +- 공용 부품 속만: Web Awesome 3.14(Shoelace 후계 · 서랍) · Tabulator 6.6(열 우선순위 접기) — 이득 작음. +- 페이지마다 손질: AG Grid · @panzoom/panzoom · interact.js. +- 멈춤: Hammer.js · @use-gesture/vanilla · Touch Punch · what-input · detect-it. +- 새 체계 통째(피함): Ionic 9 · Material Web(관리 중단 예고) · Fluent UI · Spectrum. +- 시험: Playwright 기기 흉내(화면 폭 · 터치 · 이미 쓰는 도구 → resources/tester 자동 점검) · Chrome 기기 모드(근사) · Responsively(무료 · 여러 크기 한 화면) · Polypane(유료) · BrowserStack · TestMu AI(실기기 대여 · iOS 마지막 확인). +- 포장(나중): PWA(https 필요) · Capacitor(같은 웹 코드를 iOS · Android 앱으로 · 내려받기는 플러그인 갈래). + +## 8. 우리 코드 지금 (10-13 훑음) + +- 900 이하 위 메뉴 통째 숨김 · 대신할 단추 없음(`A00_Common/app_shell.ts`). +- 좌측 패널 320 고정 · 860 이하 줄임 · 560 이하 덮개 + 손잡이(`ui_template/ui_template_overlay.css`). +- 휠 확대 14 · 우클릭 24 · 더블클릭 11 파일 · 손가락 확대 0 · pointer 방식 41(손가락 누름 · 끌기 대체로 먹음) · setPointerCapture 19. +- 100vh 27 파일 · B07 CAD `user-scalable=no`. +- http 대비 이미 있음: randomUUID 대체(`A00_Common/random_uuid_polyfill.ts` · openwebcad) · 붙여넣기 메뉴 = 보안 주소에서만(`spreadsheet_menu_items.ts`). +- 지도 maplibre-gl · 3D three.js = 손가락 기능 내장(켜는 설정만 봄). + +## 9. 확인 못 함 + +- iOS 26.1 에서 `-webkit-touch-callout: none` 이 안 먹는다는 보고(답 없음) · WebKit 301558(window 처리기 dblclick) 실린 iOS 판. +- `touch-action: manipulation` 이 dblclick 에 주는 영향 · 핀치를 Ctrl+휠로 바꿔 주는 기성 라이브러리. +- Device Posture · Viewport Segments 의 https 요구 · iPadOS 26 창 크기 바꿀 때 사파리 화면 영역 세부. +- AutoCAD · Shapr3D 현행 앱 동작 · McGrane 「access the internet」 판 문구 · Clark 「mobile users want it all」 문구. + +## 10. 다음 대화 거리 + +- 가장 좁은 기준 폭(휴대폰 세로 약 390 까지 「불편 없이」 vs 휴대폰은 가로 기준). +- https 주소 전환(Tailscale 인증서 · 기기 이름 공개 기록). +- 「터치 모드」 스위치를 사용자에게 보일지(자동 감지 + 손으로 덮어씀). +- 실기기 확인 방법(사용자 기기 · 실기기 대여).