루키의 보석함

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

하이차트(high chart)의 가장 큰 장점은 자바스크립트 기반으로 웹과 모바일을 모두 지원한다는 점이다. 모바일 트래픽이 증가함에 따라 최근 하이차트(high chart)를 그래프 툴로 활용하는 경우를 종종 볼 수 있다. 웹에서 사용할 수 있는 무료 그래프 툴에 대하여 에서 여러가지 그래프 툴을 설명했었는데, 오늘은 하이차트의 활용에 대해 정리해보도록 한다. 하이차트(highchart) 설치 하이차트를 설치하는 것은 매우 간단하다. jQuery와 같은 자바스크립트를 추가하고 이어서 하이차트의 자바스크립트를 포하하면 된다. 주의할 점은 순서가 jQuery 다음에 하이차트라는 것이다. 가끔 highcharts.js 파일을 jquery.min.js보다 앞에 써서 오류가 발생하는 경우가 있다. 하이차트(hi..

웹앱을 만들다보면, 웹에서 안드로이드 앱의 특정 액티비티를 호출해야 하는 경우가 종종 발생한다. 오늘은 HTML의 링크를 클릭했을 때, 안드로이드 액티비티를 호출하는 간단한 방식을 정리해 보도록 한다. 웹뷰를 작성하는 코드는 안드로이드 웹뷰(WebView) 사용하기 를 참고하기 바란다. 이 소스에 HTML 링크를 처리하는 부분을 추가할 것이기 때문이다. 웹에서 액티비티 호출 방식 웹에서는 HTML의 태그를 활용해서 액티비티를 호출한다. Call Activity 이런 형태로 호출하고, 안드로이드 액티비티에서 URL 로딩하는 부분에서 app://로 시작하는 것을 별도로 처리하면 된다. 필요에 따라서 app:// 이후 문자열을 가지고 특정 파라미터를 전달하는 형태도 가능할 것이다. 웹 HTML 소스 간단한 테..

미니 서평 모든 웹 사용자는 다르다. 그러니 웹 사용 방식도 모두 다르다고 보면 된다. 사용자와 디자인 이해 스티브 크룩의 "사용자를 생각하게 하지마!"를 읽으면서 생각이 많아졌다. ^^ 웹 페이지를 만들고 나서 1~2년이 흐르면 왠지 디자인이 오래된 것 같은 느낌에 리뉴얼을 시작한다. 그러나 중요한 것은 오랜 디자인이라고 느끼는 것은 우리가 자주 봤기 때문이 아닐까? 처음 접속하는 사용자는 과거 디자인이 더 낫다고 느끼지 않을까? 하는 생각을 가끔 했었다. 어찌 보면 웹 페이지를 주기적으로 리뉴얼 하는 것보다 사용자들이 쉽게(생각없이) 활용할 수 있도록 만드는 것이 더 중요하지 않을까 한다. "편리하게 쓸 수 있는 사이트나 앱을 만들기 위해 제가 해야 할 가장 중요한 일은 무엇인가요?" 답은 간단하다...

스티브 크룩의 "사용자를 생각하게 하지 마! (Don't Make Me Think)"에 보면 사용성 평가에 대한 이야기를 하고 있다. 우리는 뭔가 고객 대상으로 평가를 하고 설문을 받아야 한다면 거창한 것을 생각하는데 스티브 크룩이 말하는 사용성 평가는 저렴한 비용으로 효과적으로 자주 수행할 수 있는 방법인 듯 하다. "Rocket Surgery Made Easy" 사이트에 보면 사용성 평가와 관련된 많은 내용을 확인할 수 있다. 여기에서는 스티브 크룩의 핵심 내용만 정리해서 공유하도록 한다. 웹 디자인 만평 먼저 누구나 공감할 만한 웹 디자인 만평을 살펴보자. "2주 후..."에도 동일한 논쟁을 하고 있는 것을 보면 남의 일 같지 않을 것이다. ^^ 이런 상황을 스티브 크룩은 해답이 없는 "종교적 논쟁..

웹 사이트를 개발하다보면 통계나 각종 차트에 대해서 그래프를 출력해야 하는 경우가 있습니다. Flash나 Ajax를 이용해서 그래프를 출력할 수 있는 툴 들이 있어서 소개하도록 하겠습니다. 제가 직접 사용해 본 그래프 툴을 소개할 예정인데요. Fotographer INNO 님의 웹 디자인에 유용한 차트 & 그래프를 보니 정말 다양한 툴이 있는 것 같습니다. 좀 더 다양한 그래프를 보고 싶으신 분은 위 링크를 한번 방문해 보시기 바랍니다. Highcharts - Ajax로 모바일까지 지원하는 그래프 툴Highcharts는 Ajax로 되어 있는 그래프 툴로서 상용이 아닌 경우, 무료로 사용할 수 있구요. 상용 버전도 1개발자에 약 40만원 정도로 그리 비싸지 않습니다. 일단 Ajax로 구성되어 있어서 모바일..

HTML에서 문서 제목 부분은 어떻게 쓸까? HTML 문서도 일반 문서처럼 제목, 소제목 들을 사용하는 경우가 많이 있습니다. 이때 여러분은 어떤 태그를 많이 사용하는지요? 아마도 대부분은 다음과 같은 형태를 많이 사용할 것 같습니다. 미니의 프로그래밍 이야기 여기에 태그는 사용하지 않는게 좋다고 하니 CSS의 style을 적용해서 폰트 크기를 키우기도 하겠죠.. 미니의 프로그래밍 이야기 원하는 크기대로 나오고 괜찮은 것 같다고 생각합니다. 그러나 이렇게 작성하면 HTML 태그의 기본 속성인 의미 전달이 안됩니다. 즉, 위 부분만 보고서 문서의 제목이라고 판단하기는 쉽지 않기 때문이죠.. (주로 누가 문서만 보고 판단을 할까요? 한번 생각해 보세요 ^^) 그래서 태그를 한번 사용해 봅니다. CSS의 cl..

리스트 태그는 언제 사용할까?제 블로그에 있는 분류 목록을 화면에 출력한다고 생각해 보죠. 가장 간단한 방법은 다음과 같이 태그를 사용하는 것입니다. Beginner XML Developer 프로젝트관리론 컴퓨터공학 프로그래밍 리뷰 미니이야기 원하는대로 리스트 형태로 출력되기는 합니다. 그러나 이런 코딩에서 문제점은 무엇일까요? 이 리스트에 스타일을 변경시킨다면 즉, 색상을 바꾸거나 글꼴이나 크기를 변경할 경우, 현재 상태에서는 각각의 라인에 태그를 적용하는 방법이나 각각 태그를 넣고 CSS의 class로 스타일을 적용하는 방법 뿐으로 보입니다. 이런 경우에 바로 리스트 태그를 사용해야 합니다. 위와 같은 경우는 순서가 중요하지 않기 때문에 태그로 감싼 태그를 사용하면 되겠죠. 그럼 리스트 태그에 대해서..

시작하면서현재 IT 프로그래밍을 보면 정말 배워야 할 것이 너무 많은 것 같습니다. Java 분야만 해도 JSP, Java, Struts, Spring, Hibernate, SiteMesh, iBatis, Google App Engine, Hadoop, NoSQL 등등.. 정말 나열해 보니 끝도 없네요. 아마 요즘 시대에 프로그래밍을 시작했다면 막막했을지도 모르겠습니다. 학교에서 강의를 하면서 항상 기본부터 시작하라고 이야기를 많이 합니다. 그래서 저도 최근 이슈들을 하나씩 정리하려구 하고요. 그 첫번째로 웹 표준부터 시작하려고 합니다. 90년대 후반 처음 웹 프로그래밍을 시작할 때, HTML 태그를 배웠던 기억이 납니다. 태그로 글꼴의 크기나 색상을 이쁘게 하고 으로 구조를 잡기도 하고, 태그 정도 쓰..

1. SiteMesh의 정의 SiteMesh(http://www.sitemesh.org/)는 웹 페이지의 레이아웃을 효율적으로 처리할 수 있도록 도와주는 프레임워크입니다. 쉽게 말해서 웹사이트의 동일한 상단, 하단, 메뉴 부분을 한곳에서 관리하고 각각의 페이지는 실제 내용만을 관리할 수 있도록 해줍니다. 즉, 상단/하단/메뉴와 같이 반복되는 부분이 각 페이지마다 들어가 있으면 추후 유지보수가 어렵기 때문에 SiteMesh와 같은 프레임워크를 사용하는 것이죠. 웹사이트를 제작하던 초기에는 iframe으로 나누어서 처리하기도 했었구요. SiteMesh 이전에는 include를 활용해서 이런 형태를 구현하기도 했었습니다. 그러나 iframe은 확장이 어렵고 지원하지 않는 브라우저도 많이 있었네요. 또한 inc..