728x90
반응형

모바일 웹과 모바일 앱 스터디를 위해서 참고할만한 내용을 정리해보았습니다. 저도 웹기획에서 모바일 웹, 모바일 앱 기획을 거치면서 시행착오를 많이 겪었던 터라 질문주신 내용이 남일 같이 느껴지지 않아서요 ^^ 아이디어 도출 및 컨셉, 비즈니스 모델 도출 등과 같은 내용은 배제하고 순수 기본적인 모바일 스터디를 위한 내용으로만 적어봅니다.

 

* 모바일 트렌드 습득 (용어 정리는 수시로~)

 

모바일 컨텐츠나 서비스, 사업 뿐 아니라 플랫폼, 광고에 이르기까지 트렌드를 익힐 수 있는 분야는 무궁무진하답니다. 먼저 Dinan님이 속한 분야에 대한 동종업계를 시작으로 점차 확장시켜 트렌드를 꾸준히 습득하고 누군가에게 설명하실 수 있을 정도로 숙지하시는 것이 도움이 많이 되실 거에요. 나중에 실제 모바일 웹이나 앱 기획시에도 작업자들과 이해관계자들을 설득하는데도 큰 도움이 되구요. 모바일 트렌드를 습득할 수 있는 방법은 웹과 크게 다르지 않으니 패스할게요^^

 

* 모바일 앱 기획

 

모바일 앱 UI기획을 위해서는 UI Pattern과 원칙을 이해하는 것이 중요하답니다. 웹 기획했던 분들이 모바일 앱을 기획하면서 가장 간과하시는 부분이 모바일, 특히 앱의 사용성이나 OS 특성, 기본 Component들에 대한 이해없이 웹에 있는 걸 그대로 축약하려는 습관이 있는 경우가 종종 있거든요. 저도 예전에는 잘 몰라서 그렇게 시행착오를 거치면서 익혀왔던 경험이 있구요. 일단 모바일 OS별로 (국내는 이미 안드로이드가 90% 가까운 점유율을 보이고 있지만 글로벌을 생각하신다면 iOS쪽도 함께 보시는 게 좋습니다.) 자주 접하는 메뉴별 UI Pattern들을 찾아보시고 기획하실 때 응용해보시는 것부터 시작해보세요.

 

저는 처음 앱 기획을 접했던 2010년부터 관련 개발자 사이트를 수시로 보면서 업데이트되는 내용들도 확인하고 기본 Pattern들을 익히면서 디자이너, 개발자분들과 커뮤니케이션을 많이 하면서 배우는 것이 더 컸던 것 같아요. 그러다보면 어떤 부분을 기획해야 하고 어떤 부분을 정리해야 할지에 대한 감이 오더라구요. 그리고 전부 커스터마이징하는 것이 아니라 이 부분은 기본 component를 활용해도 되겠구나라는 판단을 할 수 있게 되지요. 아래 사이트에 있는 걸 이해하시는 것만으로도 개발자와 커뮤니케이션을 하실 때 훨씬 수월하심을 느끼실 수 있을 거에요~ 그리고 모바일앱에서의 인터랙션도 OS별로 차이가 날 수 있으니 Workflow를 그려보실 것을 추천 드립니다.

 

참고 사이트 공유드릴게요 ^^ 이 사이트들만 숙지하셔도 스터디하시는 데 도움이 되실 거라 믿습니다.

http://sixrevisions.com/user-interface/mobile-ui-design-patterns-inspiration/
https://sites.google.com/site/designpttrns/

 

 

* 모바일 웹 기획

 

모바일 웹을 사이트 전체를 모바일화한다고 생각하시면 너무 어렵고 방대하게 느껴질 수 있으니 일단 모바일웹 랜딩 페이지들부터 한번 찾아 비교해보세요. 이렇게 최신 모바일웹을 모아서 볼 수 있는 사이트를 활용해보시는 것도 좋습니다.

http://www.umoby.co.kr/kor/main.php

 

개인적으로 모바일 웹에서 중요한 요소로 생각하는 것은 웹의 것을 그대로 모바일화 시키는 것이 아닌 핵심 요소만 요약해서 모바일에 최적화되어 보여줄 수 있는 간소화된 컨텐츠 구성, 모바일 웹 사용환경에 적합한 네비게이션 채용, 손가락 터치 오류를 줄일 수 있는 여백 구성 및 가독성 강화, 해상도를 고려한 레이아웃, 로딩 속도 등으로 정리해볼 수 있을 것 같습니다.

 

기본적으로 모바일단말에 따른 해상도 및 viewport에 대해 숙지하시고, 해상도가 다른 모바일에서 flexible하게 대응할 수 있는 가변폭 레이아웃이라던가 CSS3, HTML5 기술에 대한 이해도 필요합니다. 예를 들어 반응형 웹을 설계하신다고 한다면 고려해야 할 사항들이 어떤 게 있는지 아셔야 기획하시는데 도움이 되실 테니까요.

 

http://www.lukew.com/ff/entry.asp?1514 반응형 웹에서 주로 사용하는 레이아웃 패턴같은 걸 숙지해보시는 것도 좋구요.
http://bradfrostweb.com/blog/web/responsive-nav-patterns/ 네비게이션 패턴들도 모바일웹에서 활용하기에 도움이 되는 부분들이 있으니 참고하시면 좋을 것 같네요.

 

이런식으로 관련 분야에 대해 깊이 있게 스터디하시는 습관을 들인다면 지금 생각하시는 고민들이 한결 줄어드시리라 믿습니다.

아무쪼록 힘내세요. ^^

 

728x90
반응형
블로그 이미지

nineDeveloper

안녕하세요 현직 개발자 입니다 ~ 빠르게 변화하는 세상에 뒤쳐지지 않도록 우리모두 열심히 공부합시다 ~! 개발공부는 넘나 재미있는 것~!

,