루키의 보석함

모바일 웹을 하다보면 SNS 공유 버튼 기능이 필요할 때가 있다. 간단하게 카카오톡, 페이스북, 트위터 공유 기능을 자바스크립트로 구현하는 것을 정리해 보도록 한다. 카카오톡 링크 공유하기 카카오톡 공유하기를 위해서는 먼저 카카오톡에 개발자 계정 등록을 해야 하고, 개발한 사이트의 URL도 앱 생성후 등록해야만 한다. http://developers.kakao.com 에서 기존 카카오톡 계정으로 설정하면 된다. 내 어플리케이션으로 이동해서 신규 어플리케이션을 웹으로 만든 다음, "설정 > 일반"에서 Javascript 키 (빨간색으로 표시)를 사용해서 카카오톡 링크를 구현할 수 있다. 그리고 카카오톡으로 공유하기를 보내기 위해서는 반드시 플랫폼이 등록되어야 한다. 위와 같이 사이트 도메인을 추가하고 저장..

모바일 앱 개발을 하다 보면, 아이폰 개발자와 안드로이드 개발자가 각각 필요한 경우가 많습니다. 물론 두 가지를 혼자서 하는 경우도 있겠지만 대부분의 경우에는 전문적으로 나누어져 있지요. 그러다 보니 개발이나 운영에 있어서 비용이 두 배로 들어가는 경향이 있습니다. 그래서 모바일 앱 초창기부터 하나의 소스로 모든 앱을 개발할 수 있다는 플랫폼들이 나왔었던 것 같습니다. 그중에서 폰갭(phonegap)이라고하는 오픈 소스로 이루어진 하이브리드 앱 개발 도구에 대해서 간략하게 소개하려고 합니다. 모바일 웹앱과 하이브리드 앱 현재 모바일 웹 페이지들을 보면 마치 앱처럼 동작하도록 구성하기도 합니다. 아이폰용 Web App 만들기에서 소개해 드린대로 파이낸셜 타임즈 처럼 HTML5로 앱처럼 구성하는 경우가 있습..

작년 영국의 파이낸셜타임즈는 애플의 앱스토어의 폐쇄성과 수익 분배 이슈에 대응하기 위해서 HTML5를 활용한 웹 앱을 도입했다고 합니다. 그래서 빠른 업데이트가 가능하고 기존의 웹사이트와 통합해서 관리할 수 있게 되었고, 가입자도 5개월만에 1백만 접속자가 웹앱에 접속함으로 인해 성공한 사례로 회자되고 있습니다. 실제로 아이폰으로 파이낸셜타임즈(http://app.ft.com)에 접속해 보면 "홈 화면 추가"를 통해 Web App으로 등록을 유도하도록 잘 설명되어 있습니다. 처음 등록한 후, 일반 앱처럼 실행되고 로컬 저장소도 사용하는 것을 보면서 잘 만들었다는 생각이 들기도 했습니다. 아직 HTML5가 보편화되지는 않았지만 향후 발전 가능성에 대해서는 잘 보여준 사례라고 할 수 있을 것 같습니다. 실제..

포털 사이트를 비롯한 모바일 웹을 살펴보면 좌우로 스와이프 하는 기능들이 많이 포함되어 있습니다. 협소한 공간에 여러 컨텐츠를 배치하기 위한 방법으로 활용되고 있는데요. 이러한 스와이프를 구현하기 위해서는 꽤 많은 자바스크립트와 코드가 들어가야 합니다. 오늘 소개할 SwipeView는 이러한 기능을 처리해 주는 스크립트를 제공하는 거네요.. http://cubiq.org/swipeview cubig.org 사이트를 보면 이외에도 상당히 괜찮은 모바일 웹 기반의 소스들을 제공하고 있습니다. 먼저 스와이프가 적용된 동영상과 데모 페이지들을 살펴보시죠. 이미지 갤러리에 대한 데모 페이지는 다음과 같습니다. http://cubiq.org/dropbox/SwipeView/demo/gallery/ 이미지 이외의 컨..

요즘 모바일 웹을 기반으로 앱을 개발하는 Web App이 대세인 것 같습니다. 그런데 모바일 웹으로 개발하는데 있어 한가지 이슈가 있습니다. 아이폰의 경우,