C.W.K.
Stream
Lesson 03 of 05 · published

모바일 플랫폼 차이

~13 min · tauri, mobile, webview, lifecycle

Level 0웹 관광객
0 XP0/56 lessons0/13 achievements
0/100 XP to next level100 XP to go0% complete
"폰은 네 코드를 돌리지만, 네 가정은 안 돌려. 데스크톱 습관이 딱 깨지는 거야."

더 거친 생애주기

데스크톱에선 앱이 사용자가 종료할 때까지 돌아. 모바일에선 OS가 주인이야: 백그라운드로 가면 앱을 suspend하고, 메모리 회수하려고 — 경고 없이 — 통째로 kill할 수도 있어. 결과는 구체적이야: 중요한 state를 메모리에만 절대 들지 마. 중요한 건 뭐든(store 플러그인이나 Rust로) 바뀔 때 영속화해서, kill되고 재실행된 앱이 깔끔히 복원되게 해. 'OS가 언제든 날 죽인다'를 엣지 케이스가 아니라 설계 제약으로 대해.

화면이 맞서 싸워

모바일 화면엔 노치, 둥근 모서리, 홈 인디케이터, 그리고 레이아웃을 밀어대는 온스크린 키보드가 있어. CSS env(safe-area-inset-*) 변수를 써서 콘텐츠가 노치나 홈바 아래 안 숨게 해. 입력은 마우스가 아니라 터치야 — hover가 없고, 탭 타깃이 더 커야 하고, 소프트 키보드가 열리면 화면 절반을 덮어. 데스크톱 멀티윈도우 모델도 사라졌어. 폰 앱은 사실상 창 하나야. 네 프론트엔드 레이아웃은 축소된 데스크톱 뷰가 아니라 진짜 모바일 디자인이 필요해.

웹뷰랑 capability도 달라

모바일 웹뷰(iOS의 WKWebView, Android의 System WebView)는 데스크톱 사촌이랑 똑같지 않아, 그러니 진짜 기기에서 렌더링을 재테스트해 — foundations 트랙의 크로스 엔진 주의가 모바일에선 더 날카로워. capability도 모바일 특정 스키마를 얻어: 일부 permission이랑 플러그인은 데스크톱 전용, 다른 건 모바일 전용이고, capability 파일은 플랫폼 스코프돼서 permission이 말 되는 데만 적용될 수 있어. 의존하는 각 플러그인이 진짜 모바일을 지원하는지 거기 있다고 가정하기 전에 확인해.

Code

safe-area inset이 콘텐츠를 노치에서 떼어·css
/* 노치, 홈 인디케이터, 둥근 모서리를 존중. */
.app-shell {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* inset 적용되려면 viewport-fit=cover인 viewport meta 필요. */
/* <meta name="viewport" content="width=device-width, viewport-fit=cover"> */

External links

Exercise

앱의 메인 레이아웃을 폰에서 살아남게 해: safe-area-inset 패딩을 더하고, viewport-fit=cover meta를 설정하고, OS가 앱을 죽이면 잃을 지금 메모리에만 든 state 한 조각을 짚어 — 그다음 영속화해. 모바일이 제일 많이 깨는 둘을 단단히 하는 거야: 레이아웃이랑 생애주기.
Hint
safe area는 env() 패딩 '이랑' viewport meta의 viewport-fit=cover 둘 다 필요해. 생애주기는 useState/메모리-Zustand나 디스크에 안 쓰는 Rust Mutex에 든 게 위험해 — store 플러그인을 거쳐 보내.

Progress

Progress is local-only — sign in to sync across devices.
이 페이지에서 버그를 발견하셨거나 피드백이 있으세요?문제 신고

댓글 0

🔔 답글 알림 (로그인 필요)
로그인댓글을 남기려면 로그인해 주세요.

아직 댓글이 없어요. 첫 댓글을 남겨보세요.