UX/UI 디자인 툴 / 앱 vs 웹 / Android와 iOS 의 차이점
UX/UI 디자인 툴과 사용법
UX/UI 디자인 툴
1. 피그마 (Figma)
전세계 1위 🖤 피그마는 전 세계적으로 가장 많이 사용되는 디자인 툴로, 협업과 프로토타이핑에 강점을 지님.
2. 스케치 (Sketch)
주로 대기업에서 사용되며, 피그마와 함께 사용되는 경우가 많다.
3. 어도비 XD (Adobe XD)
삼성 지정 툴 : 삼성에서 기본 사용 툴로 지정된 어도비 XD는 통합된 디자인과 프로토타이핑 기능을 제공!
*회사마다 사용하는 툴이 다르므로 다양한 툴을 익혀두면 좋다(:
그래픽 디자인 툴
포토샵 (Photoshop)
: 그래픽 디자인의 기본 툴. (우리 함께한지 벌써 12년째..★)
일러스트레이터 (Illustrator)
: 확장 가능한 벡터 그래픽을 만드는 데 필수적. (너두★)
고품질 프로토타이핑
프로토파이 (ProtoPie) — 디자인 핸드오프
: 사용자 테스트와 프레젠테이션을 위한 상호작용이 가능한 고품질 프로토타입을 만드는데 사용.
제플린 (Zeplin) — 개발자와의 협업
: 디자인 사양과 자산을 개발자에게 쉽게 전달할 수 있게 해주는 툴로, 프로젝트 단위로 관리할 수 있는 장점이 있다(:
로티파일즈 (LottieFiles) — 애니메이션
: 애니메이션을 코드로 변환하여 사용할 때 사용됨(:
앱과 웹의 차이점
웹 | 앱 | |
사용 접근의 차이 | 브라우저에서 URL만 검색하면 바로 접근 가능 | 스토어에서 설치를 먼저 해야 접근 가능 |
업데이트 및 유지보수 | 수정 후 서버에 적용하면 바로 업데이트 | OS별 마켓 정책 기준으로 심사를 받아야 업데이트 가능 |
성능과 호환성 | 다양한 단말기에 제한 없이 호환성이 뛰어나지만 성능은 앱보다 떨어짐 | 카메라, GPS 등의 기능 활용이 뛰어나고 네트워크 연결 없이도 동작 가능 (ex.캘린더, 포토 에디터) |
검색 용이 | O : SEO 기준으로 검색 가능 | X : 마켓에서 설치 후 접근 |
반응형 | O : 다양한 디바이스 해상도에 맞춰 제작 (px, em, vw, % 사용) | X : 주요 OS 디바이스 해상도에 맞춰 제작 (dp, sp, pt 사용) |
개발 비용과 시간 | 더 적은 비용과 시간으로 개발이 가능하며, 특히 빠른 배포와 유지보수가 필요한 경우에 유리 | 초기 개발 비용과 시간이 더 많이 소요 |
개발 언어 | HTML, CSS, JavaScript, Python, PHP, Java | Swift, Objective-C, Java, kotlin |
사용 단말기 | 제한 없지만 크로스 브라우징 필요 | OS에 따른 기능적 제한이 존재함 |
개인화 마케팅 | 유료 소프트웨어 사용하지 않으면 개인화 마케팅 어려움 |
개인화 마케팅 가능(Push notification) |
Android와 iOS 의 차이점
Android | iOS | |
운영체제 (OS) | 구글에서 만든 운영체제 | 애플에서 만든 운영체제 |
서체 | Roboto | San Francisco(SF) |
단위 | dp, sp | pt |
탭 크기 | 48 x 48 dp | 44 x 44 pt |
내장 네비게이션 | O | X |
메인 네비게이션 | 상단 탭 | 하단 네비게이션 바 |
보조 네비게이션 | 드로어 메뉴(햄버거 메뉴) | 하단 네비게이션 바 '더보기' 메뉴 |
CTA | 플로팅 액션 버튼 | 상단 네비게이션 바 우측 |
벡터 에셋 | SVG |
Q. 어떤 OS의 사용성이 더 좋을까?
정답은 없다. 뭐가 더 좋고 나쁘다는 어느 OS에 익숙하느냐의 차이일 뿐(: 서로 좋다고 느끼는 부분도 다르기 때문이다. 가성비, AS, 삼성페이, 타 기기와의 호환, 카메라 화소, 감성, 익숙함 등.. 그나마 Android와 iOS는 시간이 갈 수록 서로 비슷해져 가는 중이다. 이러한 OS차이를 이해해야하는 이유는 기획하고 개발하는 중간단계에서 UI디자인할때 어떤 OS를 설정하고 어떤 디바이스 해상도 규격으로 작업을 할 지이런 것들을 기획과 개발 파트에서 서로 논의가 되는 부분이기에 환경을 이해해야 한다는 것!
프로젝트 규모, 기간, 개발 환경에 따라 디자인 방식이 달라진다.
ex. Android 만 우선적으로 진행, 타깃은 50대로 갤럭시 S8~9 사용률이 높을 경우.
-> Android 가이드라인, 컴포넌트, 해상도, 단위 맞춰 디자인~개발, QA 및 플레이스토어 앱 배포
ex. MVP는 하이브리드 앱으로 개발 진행할 경우.
-> Android와 iOS 차이를 이해하고, 기준이 되는 OS 선정 후 작업. 아예 다른 부분은 별도로 제작
'UX • UI Design' 카테고리의 다른 글
내비게이션 : Navigation Bar / Segmented Controls / Tab bars / States (0) | 2024.06.25 |
---|---|
썸존과 터치 포인트 + 제스처 (탭 / 롱 프레스 / 핀치 / 플링 etc) (1) | 2024.06.24 |
UI 디자인 : 레이아웃 / 컬러 / 아이콘 / 서체 / 그래픽 / UGC (0) | 2024.06.23 |
앱이 만들어지는 과정 (0) | 2024.06.22 |
UX • UI 디자인 중요성 / 성공한 간단 앱 사례 (0) | 2024.06.20 |
댓글
이 글 공유하기
다른 글
-
썸존과 터치 포인트 + 제스처 (탭 / 롱 프레스 / 핀치 / 플링 etc)
썸존과 터치 포인트 + 제스처 (탭 / 롱 프레스 / 핀치 / 플링 etc)
2024.06.24 -
UI 디자인 : 레이아웃 / 컬러 / 아이콘 / 서체 / 그래픽 / UGC
UI 디자인 : 레이아웃 / 컬러 / 아이콘 / 서체 / 그래픽 / UGC
2024.06.23 -
앱이 만들어지는 과정
앱이 만들어지는 과정
2024.06.22 -
UX • UI 디자인 중요성 / 성공한 간단 앱 사례
UX • UI 디자인 중요성 / 성공한 간단 앱 사례
2024.06.20