스마트폰으로 컨텐츠가 제작되기 시작하면서 실무선에서 고민해야할 문제는 스마트폰용 웹을 만들 것인가, 앱을 만들 것인가 일 것입니다. 이 질문에 대한 이해에는 약간의 사전 지식이 필요하므로 (불필요한 분들도 많겠지만) 조금 설명을 하고 지나가겠습니다.

1. 모바일 앱

앱은 말그대로 모바일용 어플리케이션입니다. 줄여서 '앱'이라고 칭하고 있죠. 스마트폰용 OS에서 최적화되어 돌아가는 프로그램입니다. 대다수가 쓰는 데스크탑과 노트북의 윈도우 OS에 한글/오피스/게임과 같은 '커다란 앱'이 돌아가는 것처럼 말이죠. 이 앱들은 윈도우 OS에 최적화되어있습니다. 만일 컴퓨터 OS가 리눅스라면 윈도우에서 돌아가는 대다수의 어플리케이션들이 실행되지 않습니다. 지금까지 데스크탑과 노트북은 사실상 윈도우 OS가 모두 장악했으므로 이러한 문제가 거의 발생하지 않았습니다. 그런데 손에 들고 다니는 컴퓨터인 스마트폰에 와서는 얘기가 좀 달라집니다. 스마트폰을 제작하는 회사가 각각의 스마트폰용 OS프로그램을 깔고 스마트폰을 판매하기 시작하여 한 스마트폰에서 돌아가는 앱이 다른 스마트폰에서는 돌아가지 않는 '놀라운(!)' 불편함이 발생하는 것이지요. 바야흐로 나타난 스마트폰 춘추전국시대가 벌어지면서 생겨난 일입니다.

<스마트폰용 앱은 윈도우 앱처럼 바탕화면에 아이콘으로 표현되어 누르면 실행이 됩니다>

누구의 불편함이냐구요?
사용자도 사용자겠지만 사실 앱을 개발하려는 서비스 공급자에게 가장 불편한 일입니다.
하나의 기획의 서비스나, 기존 서비스를 모바일 앱으로 제공하려면 애플용 앱, 안드로이드용 앱, 윈도우용 앱, 바다용 앱... 이렇게 다 만들어 줘야할지도 모르는 상황이 발생해 버렸으니까요. 그 제작비와 유지비가 만만치 않은 것입니다.

물론 이런 불편함을 개선하고자 어플리케이션 퍼블리싱을 통합할 OS통합형 플랫폼들을 개발하려는 시도가 국내외에서 진행되고 있지만 국내의 경우는 가장 많은 활용도가 있는 애플이 통합 플랫폼에서 제외된 상태이고, 먼저 시작했다는 해외에서는 솔직히 말씀드려 아직까지 어떻게 돌아가고 있는지 조차 잘 모르겠습니다. 아직 요원한 것으로 보입니다.

2. 모바일 웹

여기서 스마트폰 전용웹의 필요성이 나옵니다. 물론 이 웹 또한 각 OS업체의 브라우저마다 다르게 표현되므로 똑같은 문제가 발생합니다. 윈도우 익스플로어 브라우저에서 잘 돌아가는 플래시 프로그램이 애플의 사파리에서는 안돌아가는 현상이 발생하는 것이죠. 그런데 여기서는 문제가 다르게 해결될 수 있습니다. 웹표준 개발이 바로 그것입니다. 모든 브라우저에서 호환될 수 있게 웹표준을 지켜서 모바일 웹을 개발하게 되면 어떤 모바일 웹 환경에서도 다 똑같이(아주 약간은 다릅니다만) 서비스를 제공할 수 있는 것이지요.

<뜨아.. 스마트폰 접근시 자사 서비스가 이 모양이면 장사 되겠습니까>

<이렇게..스마트폰용 웹을 만듭시다>

인터넷에서 정보를 제공하는 서비스를 하는 업자라면 즉, 웹서비스를 하는 업자라면 굳이 자신의 서비스를 '앱'으로 만들어봤자 껍데기만 '앱'이지 안에 메뉴나 표현은 모두 '웹'과 다를 바가 없으므로 굳이 자사 서비스를 '앱'으로 만들 필요가 없습니다. 좀 있어 보이고 싶어 "우리도 '앱'서비스를 한다!"고 외치고 싶지 않다면요. 비용대비 효과 면에서 자금력이 있는 기업이 아니라면 어플리케이션을 각각의 플랫폼별로 만들 것이 아니라 웹표준을 지키는 스마트폰용 웹페이지 하나만 만들어 주면 되는 것이지요.(제작 비용은 정말 엄청난 차이가 있을겁니다)

저는 이전에 "공공기관용 앱스, 그 방향은?" http://v.daum.net/link/6592023 이라는 포스트에 이런 언급을 해놨습니다.

공공기관 홈페이지에 나오는 서비스들이 대개가 국민들에게 기본 정보를 제공하는 것이기에 이 수준의 서비스를 스마트폰에서 제공하려는 데 굳이 '앱'을 개발할 필요가 있겠느냐 하는 것입니다. 예산 낭비인 것이죠.

요즘 m.daum.net/m.naver.com과 같이 스마트폰용 웹사이즈에 맞춘 작은 스마트폰용 웹을 웹표준에 맞춰 하나만 개발해 놓으면 그게 안드로이드폰이든 윈도폰이든 애플폰이든 다 들어갈 수 있게 됩니다. 게다가 앱처럼 바탕화면에 아이콘도 깔아놓을 수 있으니 뭐, 사실 앱과 웹의 차이가 거의 없는 것이나 다름없다고 할 수 있겠습니다. 차이가 있다면 '웹'은 네트워크가 반드시 필요하다는 것이고 어떤 '앱'은 인터넷이 연결되지 않더라도 사용할 수 있다는 것인데, 대부분의 스마트폰 사용자가 3G통신이 가능하므로 이 문제는 지엽적인 문제라고 할 수 있겠습니다.

경우에 따라 제 설명이 어려울 수도 있겠다 싶어, 정리하는 질문/답으로 글을 마무리할까 합니다.(물론 답은 매우 주관적인 제 의견입니다)

# 앱을 만들어야 할까, 웹을 만들어야 할까?

자사 핵심서비스가 무엇인지 먼저 명확히 밝히고, 해당 서비스가 스마트폰의 주요 특징(이동형/GPS/LBS/사진과영상의활용/킬링타임 등)과 연결되어 파급력있는 효과를 낼 수 있는지 판단하여 YES면 앱을 만들고 NO면 굳이 만들 필요가 없다고 생각함. 자사 핵심서비스가 웹형태로 전달 가능한 것이라면 모바일 웹을 만들어 제공하는 것이 비용 및 관리 면에서 훨씬 효과적임

# 스마트폰용 앱을 만든다면 몇 개나 만들어야 할까?

"반드시 만들어야 한다"는 결론을 갖고 있다는 전제하에, 현 단계에서는 애플과 안드로이드용 앱 2개를 만드는 것이 낫고 한 개만을 개발할 예산을 갖고 있다면 현재는 애플 앱을 개발하는 것이 나음. 단, 장기적으로는 안드로이드용 앱 개발도 필요하다고 판단됨. 윈도우나 아직 오픈되지 않은 삼성의 '바다'등의 OS용 앱은 추후 스마트폰 시장의 전개정도와 자사 기존 앱들의 효과를 판단하여 최소 1년 정도 후에 판단해도 늦지 않다고 봄

지난번에 말씀드린대로 오늘은 스마트폰용 모바일 홈페이지를 만들때 유용한 팁을 소개할까 합니다. 

앞으로는 모바일 홈페이지가 전체적으로 확대될 전망이지만, 관련 가이드라인이나 참고할 만한 것들이 부족한 현실입니다.
그래서 이 포스트를 쓰게 되었는데요, 아래에서 설명하는 정도만 적용해도 왠만한 모바일 홈페이지를 만드시는데 문제는 없을꺼라 생각됩니다.

1. 작은 모바일 화면에 맞게 웹페이지 화면 맞추기

아래 META 태그를 쓰면  화면이 모바일 화면에 딱 맞춰서 확대되어 보이게 됩니다.
다른 플랫폼은 모르겠고 아이폰 같은 경우는 가로가 480px 이라 생각해서 화면을 맞추면 되더군요

2. 가장 상위 오브젝트는 수치로 가로를 넣어줘야합니다! 
※ %로 넣어줄시  제대로 크기가 적용되지 않습니다.

ex>  <div style="width=100%;">  --->   <div style="width=480px;">

3. 아이폰에서 동영상 재생을 하고 싶다면 MP4파일을 링크 시켜라
※ 오페라 같은경우 아래와 할경우 파일이 다운이 되더군요,, 무튼 옴니아2에서도 동작은 한다는 이야기입니다.. 친구폰 데이터요금이 걱정되는 바람에 다운받다가 그냥 실행되는 화면은 보지 못했습니다. 아이폰에서는 약간의 딜레이(곰티비, 다음TV팟 모두 그렇듯)를 거치면 영상이 아주 잘 재생됩니다.

<A HREF="AAAA.mp4"> 동영상보기 </A>

4. 바로가기  아이콘 만들기 (아이폰)
모바일웹하다가  [+] 버튼을 눌루면 홈화면에 추가 라는 버튼이 있는데 그럼 아이폰에서는 어플들처럼 아이콘으로 저장됩니다. 그때 아이콘을 아래와 같이 소스로 하면 원하는 이미지로 넣을수 있습니다
아이폰 어플 특유의 라운딩과 반사처리는 자동으로 됩니다~~!!

<link rel="apple-touch-icon" href="/images/icon.png" />       ▲ 요것이 제 아이폰에 추가한 자주들락날락하는 다음,네이버,엔카 아이콘입니다. 아이콘 설정을 해주지 않을경우 메인화면을 캡쳐해서 아이콘을 생성하는데 이럴경우 굉장히 미우니 신경쓰심이 좋을듯합니다~!

마지막으로 드리고 싶은 말씀은 자바스크립트 사용시 웹표준 고려하셔야 하는 거 잊지 말아야 하는 것과,
전편에 쓴 주의사항과 오늘 작성한 팁을 활용하면 나의 모바일 웹 사이트를 쉽게 만드실수 있을꺼라 생각됩니다.