모바일 플랫폼 차이

"폰은 네 코드를 돌려주지만 네 가정까지 돌려주진 않아. 데스크톱 습관이 깨지는 자리가 정확히 여기야."

훨씬 거친 생애주기

데스크톱에선 사용자가 끄기 전까지 앱이 계속 돌아. 모바일에선 주인이 OS야. 백그라운드로 넘어가면 앱을 재우고, 메모리가 필요하면 예고도 없이 통째로 죽여버려. 여기서 나오는 결론은 아주 구체적이야. 중요한 state를 메모리에만 들고 있지 마. 중요한 건 바뀔 때마다 저장해서(store 플러그인이든 Rust 쪽이든) 죽었다 다시 켜진 앱이 깔끔하게 되살아나게 해. '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"> */

Exercise

앱의 메인 레이아웃이 폰에서 살아남게 손봐. safe-area-inset 패딩을 넣고, viewport-fit=cover meta를 설정하고, OS가 앱을 죽이면 날아갈 지금 메모리에만 있는 state를 하나 짚어 — 그다음 그걸 저장해. 모바일이 제일 많이 깨뜨리는 둘, 레이아웃이랑 생애주기를 단단히 하는 거야.

Hint

safe area는 env() 패딩 '이랑' viewport meta의 viewport-fit=cover가 둘 다 있어야 해. 생애주기 쪽에서 위험한 건 useState나 메모리에만 있는 Zustand, 디스크에 안 쓰는 Rust Mutex 같은 거야 — store 플러그인을 거쳐 내보내.