Human Interface Guidelines์ ๋ํ ํด์๊ณผ ์ฃผ๊ด์ ์ธ ์ฌ๋ก ๋ถ์์ ์ถ๊ฐํ ๊ธ์ ๋๋ค.
Modality ๐ถโ๐ซ๏ธ
Modality - Patterns - Human Interface Guidelines - Design - Apple Developer
Modality Modality is a design technique that presents content in a separate, focused mode that prevents interaction with the parent view and requires an explicit action to dismiss. Presenting content modally can: Ensure that people receive critical informa
developer.apple.com
Modality๋ ๋ช ํํ ๋๊ฐ๊ธฐ ์ก์ ์ด ์๊ตฌ๋๋ ์ผ์์ ์ธ ๋ชจ๋์์ ์ปจํ ์ธ ๋ฅผ ๋ณด์ฌ์ฃผ๋ ์ค๊ณ ๊ธฐ์ ์ ๋๋ค.
๋ชจ๋ฌ ํํ๋ก ์ปจํ ์ธ ๋ฅผ ๋ณด์ฌ์ฃผ๋ ๊ฒ์
- ์ฌ์ฉ์๊ฐ ๋ ๋ฆฝ์ ์ธ ์์ ์ด๋ ๊ด๋ จ๋ ์ต์ ์งํฉ์ ์ง์คํ ์ ์๋๋ก ๋์ต๋๋ค.
- ์ฌ์ฉ์๊ฐ ์ค์ํ ์ ๋ณด๋ฅผ ๋ฐ๊ณ ํ์ํ ๊ฒฝ์ฐ ์กฐ์น๋ฅผ ์ทจํ๋๋ก ๋ณด์ฅํฉ๋๋ค.
๋ค์ํ ์์คํ ๋ชจ๋ฌ ๊ฒฝํ์ ๊ฐ๋ฅํ๊ฒ ํ๊ธฐ ์ํด
iOS๋ alerts, activity views, share sheets, action sheets๋ฅผ ์ ๊ณตํฉ๋๋ค.
์ฑ์์ custom๋ ๋ชจ๋ฌ ์ปจํ ์ธ ๋ฅผ ์ ๊ณตํ๊ธฐ ์ํด์ presentation style์ ์ง์ ํ์ฌ ์ฌ์ฉํ ์ ์์ต๋๋ค.

- PopOver์ iPad์์๋ง ์ฐ๋ ์ ํ ์คํ์ผ
- ์์ Over์ด ๋ถ์ผ๋ฉด ์ด์ ์ ๋ทฐ๊ฐ ๊ณ์ธต ์์์ ์ฌ๋ผ์ง์ง ์์์ ๋ฐฐ๊ฒฝ์ ํฌ๋ช
ํ๊ฒ ํ๋ฉด ์๋ ๋ทฐ๊ฐ ๋ณด์
๋๋ค
- ์ฃผ๋ก ์ปค์คํ alert๋ฅผ ๋ง๋ค๋ ๋ฐฐ๊ฒฝ์ ํฌ๋ช ํ๊ฒ ํ๊ณ overfullscreen์ ๋ง์ด ์ฌ์ฉํ๊ฒ ๋ฉ๋๋ค.
1. Use modality when it makes sense
ํ์ฌ ์์ ๊ณผ ๋ค๋ฅธ ์์ ์ ์ ํํ๊ฑฐ๋ ์ํํ๋๋ฐ์
์ฌ์ฉ์๋ค์ ์ฃผ์๋ฅผ ์ง์ค์์ผ์ผ ํ๋ ์ค์ํ ๊ฒฝ์ฐ์๋ง ๋ชจ๋ฌ ๊ฒฝํ์ ์ ๊ณตํด์ฃผ์ธ์.
๋ชจ๋ฌ ๊ฒฝํ์ ์ฌ์ฉ์๋ฅผ ํ์ฌ ์ํฉ์์ ๋ฒ์ด๋๊ฒ ํ๊ณ ๋ด๋ฆฌ๋ ์กฐ์น๊ฐ ํ์ํ๊ธฐ ๋๋ฌธ์
๋ถ๋ช ํ ์ด์ ์ด ์์ ๋๋ง ์ฌ์ฉํด์ผ ํฉ๋๋ค.
2. Reserve alerts for delivering essential - and ideally actionable - information
์ผ๋ฐ์ ์ผ๋ก alert๋ ๋ญ๊ฐ ์๋ชป๋์๋ ๋ํ๋๊ฒ ๋ฉ๋๋ค.
ํ์ฌ ๊ฒฝํ์ ๋ฐฉํดํ๊ณ tap์ ํตํด ๋ทฐ๊ฐ ์ฌ๋ผ์ง๋ ๊ฒ์ ์๊ตฌํ๊ธฐ ๋๋ฌธ์
์ฌ์ฉ์๊ฐ ๋ชจ๋ฌ๋ก ์ธํด ํ์ฌ ๊ฒฝํ์ ์นจ์ ๋ฐ์์๋ ์ด๋ฅผ ์ ๋นํ๋ค๊ณ ๋๋ผ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค.
์๋์ ๊ฐ์ด ์ฌ์ฉ์๊ฐ ์์ ํ ๋ ์ ์คํ๊ฒ ์งํํด์ผ ํ๋ ๋ถ๋ถ(์ญ์ , ๋ณ๊ฒฝ, ๋ฑ๋ก ์ทจ์ ๋ฑ)์์ alert๊ฐ ๋ฑ์ฅํฉ๋๋ค.


3. In gerneral, keep modal tasks simple, short, and narrowly focused
๋ชจ๋ฌ์์ ํด์ผ ํ๋ ์์ ์ด ๋๋ฌด ๋ณต์กํ๋ค๋ฉด,
์ฌ์ฉ์๋ ๋ชจ๋ฌ๋ก ๋ค์ด์ค๋ฉฐ ์ผ์์ค๋จํ๋ ์ผ์ ๋ํ ์ง์ค๋ ฅ์ ์์ด๋ฒ๋ฆด ์ ์์ต๋๋ค.
๋ชจ๋ฌ์ด ์ฑ ๋ด์ ์๋ก์ด ์ฑ์ด๋ผ๋ ๋๋์ด ๋ค์ง ์๋๋ก ํด์ผ ํฉ๋๋ค.
ํนํ, ์ฌ์ฉ์๊ฐ ๊ธฐ์กด์ ์์ ์ผ๋ก ๋๋์๊ฐ๋ ๋ฐฉ๋ฒ์ ์์ด๋ฒ๋ฆด ์ ์๊ธฐ ๋๋ฌธ์
๋ชจ๋ฌ ๋ด์์ ๋ณด๊ธฐ์ ๊ณ์ธต ๊ตฌ์กฐ๋ฅผ ํ์ํ๋ ๊ฒ์ ์ฃผ์ํด์ผ ํฉ๋๋ค.
4. Consider using a fullscreen modal style for immersive content or a complex tast
๋ชฐ์ ํ ์ฝํ ์ธ ๋ ๋ณต์กํ ์์ ์๋ fullscreen modal style์ ๊ณ ๋ คํด๋ณด์ธ์ฌ
fullscreen modal ๊ฒฝํ์ ์ฐ๋งํจ์ ์ต์ํํด์ค๋๋ค.
๋ฐ๋ผ์ ๋น๋์ค, ์ฌ์ง, ์นด๋ฉ๋ผ ๋ทฐ๋ฅผ ๋ณด์ฌ์ฃผ๊ฑฐ๋ ๋ฌธ์๋ ์ฌ์ง์ ์์ ํ๋ ๋ฑ
์ฌ๋ฌ ๋จ๊ณ์ ์ผ์ ์ํํ๋ ๊ฒฝ์ฐ์ ์ ํฉํฉ๋๋ค.

5. Always include a button that dismisses the modal view
ํญ์ ๋ชจ๋ฌ ๋ทฐ๋ฅผ ๋ด๋ฆฌ๋ ๋ฒํผ์ ํฌํจํ์ธ์
์๋ฅผ ๋ค์ด Done ์ด๋ Cancel์ ์ฌ์ฉํ ๊ฒ ์ ๋๋ค.
๋ฒํผ์ ํฌํจํ๋ ๊ฒ์ ๋ชจ๋ฌ ๋ทฐ๊ฐ ๋ณด์กฐ์ ์ธ ๋ทฐ(๊ธฐ์ , ์ค๊ณ)์ด๋ฉฐ ๋ด๋ฆฌ๋ ์ ์ค์ฒ์ ๋ํ ๋์ ์ ์ํ๋ ๊ฒ์
๋ณด์ฅํด์ค๋๋ค.
์์ธ์คํ ์ด ๊ด๊ณ ๋ชจ๋ฌ ํ๋จ์ ์ค๋์ ๊ทธ๋ง๋ณด๊ธฐ๋ ๋ซ๊ธฐ ๋ฒํผ๊ณผ ๊ฐ์ด ๋ชจ๋ฌ์ ๋ซ์ ์ ์๋ ๋ฐฉ๋ฒ์ ์ ์ํ๊ณ ์๊ณ
๋ธ๋๋์ ๊ด๊ณ ๋ชจ๋ฌ ์ฐ์ธก ์๋จ์ X ๋ฒํผ, ํ๋จ์ ์ค๋ํ๋ฃจ ๋ณด์ง์๊ธฐ ๋ฒํผ์ด๋
๊ด๋ จ๋ ๋ค๋ฅธ ๋ทฐ๋ก ์ด๋ํ ์ ์๋ ๋ฐฉ๋ฒ(๋ฒํผ)์ ์ ์ํ๊ธฐ๋ ํฉ๋๋ค.


6. When necessary, help people avoid data loss by getting confirmation before closing a modal view
ํ์ํ ๊ฒฝ์ฐ ๋ชจ๋ฌ๋ทฐ๋ฅผ ๋ซ๊ธฐ ์ ์ ํ์ธ์ ๋ฐ์์ ์ฌ์ฉ์์ ๋ฐ์ดํฐ ์์ค์ ๋ฐฉ์งํ ์ ์์ต๋๋ค.
์ฌ์ฉ์๊ฐ ๋ชจ๋ฌ ๋ทฐ๋ฅผ ๋ด๋ฆฌ๋ ์ ์ค์ฒ๋ฅผ ์ฌ์ฉํ๋ ๋ฒํผ์ ์ฌ์ฉํ๋ ,
๋ด๋ฆฌ๋ ์ก์ ์ผ๋ก ์ธํด ์ฌ์ฉ์๊ฐ ์์ฑํ ์ปจํด์ธ ๋ฅผ ์์ด๋ฒ๋ฆด ์ ์๋ค๋ฉด
๊ทธ ์ํฉ๊ณผ ํด๊ฒฐ ๋ฐฉ๋ฒ์ ์ ์ํ๋ action sheet๋ฅผ ๋ณด์ฌ์ฃผ์ธ์.
์ผ์ ์ ์์ฑํ๋ ๋์ค์ X ๋ฒํผ ๋๋ ์๋๋ก ๋ด๋ฆฌ๋ ์ ์ค์ฒ๋ฅผ ํตํด ๋ทฐ๋ฅผ ๋๊ฐ๋ ค ํ๋ฉด,
์ค๋ฅธ์ชฝ๊ณผ ๊ฐ์ alert๋ฅผ ๋์ ์ค์๋ก ๋ทฐ๋ฅผ ๋๊ฐ๋ ๊ฒฝ์ฐ๋ฅผ ๋ง์๊ณผ ๋์์ ์์ฑ ์ค๋จ ์ ํ์ธํ ๊ธฐํ๋ฅผ ์ฃผ๊ณ ์์ต๋๋ค.


7. Make it easy to identify a modal viewโs task
๋ชจ๋ฌ ๋ทฐ์ ์์ (๋ชฉ์ )์ ์ฝ๊ฒ ์ ์ ์๋๋ก ํ์ธ์.
์ฌ์ฉ์๊ฐ ๋ชจ๋ฌ ๋ทฐ๋ก ๋ค์ด์ค ๋, ์ด์ ์ปจํ ์ธ ์์ ๋ฒ์ด๋ ๋ฐ๋ก ๋์๊ฐ์ง ์์ ์ ์์ต๋๋ค.
๋ชจ๋ฌ ๋ทฐ์ ์์ ์ ๋ํ๋ด๋ ํ์ดํ์ ์ ๊ณตํ๊ฑฐ๋
์์ ์ ์ค๋ช ํ๊ฑฐ๋ ๊ฐ์ด๋๋ฅผ ์ ๊ณตํ๋ ์ถ๊ฐ์ ์ธ ๋ฉํธ๋ฅผ ์ ๊ณตํ์ฌ
์ฌ์ฉ์์๊ฒ ๊ทธ๋ค์ด ์ง๊ธ ์ฑ ๋ด์ ์ด๋์ ์์นํ๊ณ ์๋์ง๋ฅผ ์๋ ค์ค ์ ์์ต๋๋ค.
๋น๊ทผ๋ง์ผ์ ๊ธ์ฐ๊ธฐ ๋ทฐ์ ์ปคํผ์ฑ์ ์์ฃผ ๋ฌป๋ ์ง๋ฌธ ๋ทฐ์์๋
๋ชจ๋ฌ๋ทฐ์ ์๋จ ๊ฐ์ด๋ฐ์ ํด๋น ๋ทฐ์ ํ์ดํ์ ๋ณด์ฌ์ฃผ๋ฉฐ ์ฌ์ฉ์๊ฐ ์ด๋์ ์์นํ๊ณ ์๋์ง๋ฅผ ์๋ ค์ฃผ๊ณ ์์ต๋๋ค.


8. Coordinate the modal viewโs appearance with your app
์ฑ์ ๋ฐ๋ผ ๋ชจ๋ฌ ๋ทฐ์ ๋ชจ์์ ์กฐ์ ํ์ธ์.
์๋ฅผ ๋ค๋ฉด, ๋ชจ๋ฌ ๋ทฐ๊ฐ ๋ค๋น๊ฒ์ด์ ๋ฐ๋ฅผ ํฌํจํ๋ค๋ฉด ์ฑ ๋ด์ ๋ค๋น๊ฒ์ด์ ๋ฐ์ ๋๊ฐ์ด ๋ณด์ฌ์ ธ์ผ ํ ๊ฒ ์ ๋๋ค.
CGV ์ฑ์์๋ ์ด๋์๋ ์ง๊ธ์๋งค ๋ผ๋ ํ์ ์ ํตํด ์๋์ ๊ฐ์ ๋ชจ๋ฌ๋ทฐ์ ์ ๊ทผํ ์ ์์ต๋๋ค.
์กฐ๊ธ ๋ ๋น ๋ฅด๊ฒ ๋ฐ๋ก ์ ๊ทผํ๊ณ ๋น๊ต์ ๊ฐ๋ณ๊ฒ ๋์ฌ ์ ์๋ค๋ ์ ์์ ์ ์ฒด ํ๋ฉด์ ๋ฎ๋ fullScreen์ด ์๋,
๋ค์ ์ด ์ ์ ๋ทฐ๊ฐ ๋ณด์ด๋ overFullScreen / overCurrentContext presentation ์คํ์ผ์ ์ฌ์ฉํ ๊ฒ ๊ฐ์ต๋๋ค.
ํฐ๋น ์ฑ์์๋ ๋ฉ์ธ์์ ํน์ ์ฝํ ์ธ ๋ฅผ ๋๋ฅผ ๊ฒฝ์ฐ ์๋์ ๊ฐ์ ํ๋ฉด์ด fullScreen ์ผ๋ก ๋ฑ์ฅํฉ๋๋ค.
์์ ์ฝํ ์ธ ๋ฅผ ๋ค๋ฃจ๊ณ , ํด๋น ์ฝํ ์ธ ์ ๋ํด ์์ธํ๊ฒ ์ ๋ฌํ ๋ถ๋ถ์ด ๋ง๊ธฐ ๋๋ฌธ์ ๊ทธ์ ๋ง๋ presentation ์คํ์ผ์ ์ฌ์ฉํ ๊ฒ ๊ฐ์ต๋๋ค.


9. Choose a modal transition style that makes sense in your app
์ฑ๊ณผ ์ด์ธ๋ฆฌ๋ transition style์ ์ฌ์ฉํ๊ณ , ์ผ์์ ์ธ ํ ์คํธ ์ ํ์ ๋ํ ์ธ์์ ๋์ด์ธ์.
๊ธฐ๋ณธ ์ ํ์ ์์ง์ผ๋ก ๋ชจ๋ฌ ๋ทฐ๋ฅผ ์๋ก ์ฌ๋ผ์ค๊ณ ๋ซํ ๋๋ ์๋๋ก ๋ด๋ ค๊ฐ๋ฉฐ ๋ซํ๋๋ค.
์ฑ ๋ด์์ ์ผ๊ด๋ ๋ชจ๋ฌ transition style์ ์ฌ์ฉํ์ธ์
์๋์ ์ง๊ทธ์ฌ๊ทธ์ ๊ฐ์ด ๋ซ๊ธฐ ๋ฒํผ์ด ์๋๋๋ผ๋,
๋ทฐ๋ฅผ ์๋๋ก ๋ด๋ฆฌ๋ ์ ์ค์ฒ๋ฅผ ํตํด ํ๋ฉด์ ๋ซ์ ์ ์๋ค๋ ์ฌ์ค์
์ต์ด ๋ชจ๋ฌ๋ทฐ๊ฐ ์๋์ ์ฌ๋ผ์ค๋ ์ผ๊ด๋ ๋ชจ๋ฌ transition style์ ํตํด ์๋ ค์ฃผ๊ณ , ์ ๋ํ๊ณ ์์ต๋๋ค.

'UIUX' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[HIG] Web views๐ (0) | 2022.11.04 |
---|---|
[HIG] Navigation Bar ๐งญ (0) | 2022.05.31 |
[HIG] Loading ๐ (0) | 2022.05.23 |
[HIG] Onboarding ๐ซ (0) | 2022.05.20 |
[HIG] ๐ง Tab Bars (0) | 2022.04.29 |