[2019 NewbieThon] 웹뷰 속이기 대작전

app에서 사용되는 webview를 만드는 방법과 노하우들

#뉴비톤 #뱅크샐러드 #웹 # 웹뷰

Transcript

1. APP 내에 감쪽같이 WEB VIEW 속이기 대작전 이동근 이것은 WEB인가? APP인가!
2. 안녕하세요 웹 개발자 이동근 입니다. 뱅크샐러드 Web Frontend Developer 앱개발 동아리 매쉬업 단장 Github& Instagram eastroots92
3. 엄밀히 말하면 오늘은 뱅크샐러드 개발 이야기를 할거에요 개발하면서 얻은 노하우들..?
4. 그런데 뱅크샐러드 앱 아니에요?? 구글 플레이스토어 애플 앱스토어 웹 해커톤에서.. 웹 개발자가? 앱 개발 이야기를 한다고..?
5. Webview를 통해 앱에서 웹을 보여줄 수 있어요
6. Webview를 통해 앱에서 웹을 보여줄 수 있어요 장점 iOS & Android 한번에 만들 수 있다. ⌛ 앱 배포 시 기다릴 필요가 없다. (바로 반영가능) 단점 앱에비해 느리다. 퍼포먼스에 한계가 있다. 뭐가 무조건 좋다 보다, 알맞게 사용하는 것이 좋다.
 (e.g. 쇼핑몰처럼 자주 레이아웃이 바뀌는 앱들..? )
7. Webview를 통해 앱에서 웹을 보여줄 수 있어요 장점 iOS & Android 한번에 만들 수 있다. ⌛ 앱 배포 시 기다릴 필요가 없다. (바로 반영가능) 단점 앱에비해 느리다. 퍼포먼스에 한계가 있다. 뭐가 무조건 좋다 보다, 알맞게 사용하는 것이 좋다.
 (e.g. 쇼핑몰처럼 자주 레이아웃이 바뀌는 앱들..? ) 실제로 많은 곳에서 사용되고 있어요. 어떤게 웹뷰이고 네이티브인지 맞춰보세요!
13. 그래서 웹을 사용합니다
14. APP 내에 감쪽같이 WEB VIEW 속이기 대작전 ☝ 웹뷰 제작을 위한 기본 설정 ✌ 추가로 알면 좋을 팁들
15. ☝ 웹뷰 제작을 위한 기본 설정
16. Webview를 만들기 위해선 Meta Tag는 필수! Header Tag에 추가! Viewport 관련 Meta Tag를 넣어줘야 깨지지 않아요.
17. Webview를 만들기 위해선 Meta Tag는 필수! Header Tag에 추가! Viewport 관련 Meta Tag를 넣어줘야 깨지지 않아요.
19. Webview도 반응형 웹처럼
 해상도 대응이 필요합니다 Android & iPhone 아이폰 SE의 width = 320px 아이폰 X의 width = 375px 아이폰 +의 width = 414px 안드로이드 폰들은 SE와 +의 사이!
20. 근데 이거 언제 다 대응 하나요
21. Webview도 반응형 웹처럼
 해상도 대응이 필요합니다 1. width는 px보다는 %로 설정을 추천 드립니다. 단, 버튼 같은 것은 px가 더 좋아요 PX %
22. Webview도 반응형 웹처럼
 해상도 대응이 필요합니다 1. width는 px보다는 %로 설정을 추천 드립니다. 단, 버튼 같은 것은 px가 더 좋아요 2. 해상도 대응은 320 기준으로만 대응해도 Good 아이폰 SE는 화면이 너무 작아요..
23. Webview도 반응형 웹처럼
 해상도 대응이 필요합니다 1. width는 px보다는 %로 설정을 추천 드립니다. 단, 버튼 같은 것은 px가 더 좋아요 2. 해상도 대응은 320 기준으로만 대응해도 Good 아이폰 SE는 화면이 너무 작아요.. 3. Flex와 Grid를 사용해서 Layout을 잡아주세요 Flex를 이용하면 수월하게 Layout 개발이 가능합니다.
24. ✌ 추가로 알면 좋을 팁들
25. Case 1. 네 터치 영역을 남에게 알리지 마라
26. tab-highlight-color를 이용해 터치음영을 숨겨 주세요! 대체제는 rgba(255, 255, 255, 0); transparent를 넣으면 투명해지나 구형 안드로이드에선 안될 수 있습니다.
27. tab-highlight-color를 이용해 터치음영을 숨겨 주세요! 대체제는 rgba(255, 255, 255, 0); transparent를 넣으면 투명해지나 구형 안드로이드에선 안될 수 있습니다.
28. Case 2. Text Select를 안되게 막아라
29. user-select를 이용해 막을 수 있어요 더블클릭 등 선택을 막아줘요! 총 4가지 값이 존재합니다.
30. Case 3. Long Touch 시 URL 노출 막기
31. touch-callout을 이용해 막을 수 있어요 안드로이드 아이폰 자체 설정으로 막을 수도 있어요. 유저에게 불필요한 정보를 노출하는 건 유저 경험 뿐 아니라 보안적인 부분에서도 Fail
32. Case 4. 아이폰의 Over Scroll Detail 챙기기
33. Android iOS
34. 문제는 footer와 header
35. background에 Color를 넣으면 자연스러워 집니다. 단색일 경우에는 body에 background를 만약 header footer 둘 다 대응해야 한다면? ҳ࠙ࢶ
36. background에 Color를 넣으면 자연스러워 집니다. 단색일 경우에는 body에 background를 만약 header footer 둘 다 대응해야 한다면? ҳ࠙ࢶ
37. Case 5. 아이폰X 디스플레이 대응하기
38. viewport-fit과 safe-area-inset-top safe-area-inset-bottom 을 이용하면 해결! iOS version에 따라 대응이 달라요! X 뿐 아니라 full size를 이용하고 싶다면 추가!
39. 프론트엔드는 서비스와 유저를 연결시키는 중요한 역할 입니다.
40. Join us! 핀테크를 선도하고 한국 금융을 혁신하고 싶다면 지금 바로 뱅크샐러드에 합류하세요
41. 감사합니다