'웹'에 해당되는 글 14건

  1. 2015.09.30 자바스크립트로 카카오톡, 페이스북, 트위터 공유하기 만들기
  2. 2015.06.05 HighChart를 활용한 웹/모바일 호환 그래프 만들기~
  3. 2015.05.06 웹에서 액티비티 호출하기 (1)
  4. 2015.03.25 사용자를 생각하게 하지마!
  5. 2015.03.24 스티브 크룩의 사용성 평가에 대해~
  6. 2012.06.25 웹에서 사용할 수 있는 무료 그래프 툴에 대하여
  7. 2012.05.14 [웹표준 #3] 문서 제목의 마크업은 Heading을 쓰자.
  8. 2012.05.08 [웹표준 #2] 리스트 태그를 제대로 활용하자.
  9. 2012.05.07 [웹표준 #1] 웹 표준을 어떻게 시작할까?
  10. 2012.04.27 웹 페이지 레이아웃을 설정하는 SiteMesh 세팅 및 활용에 대하여~

자바스크립트로 카카오톡, 페이스북, 트위터 공유하기 만들기

|



모바일 웹을 하다보면 SNS 공유 버튼 기능이 필요할 때가 있다. 

간단하게 카카오톡, 페이스북, 트위터 공유 기능을 자바스크립트로 구현하는 것을 정리해 보도록 한다. 


카카오톡 링크 공유하기 

카카오톡 공유하기를 위해서는 먼저 카카오톡에 개발자 계정 등록을 해야 하고, 

개발한 사이트의 URL도 앱 생성후 등록해야만 한다. 


http://developers.kakao.com 에서  기존  카카오톡 계정으로 설정하면 된다. 



내 어플리케이션으로 이동해서 신규 어플리케이션을 웹으로 만든 다음, 

"설정 > 일반"에서 Javascript 키 (빨간색으로 표시)를 사용해서 카카오톡 링크를 구현할 수 있다. 

그리고 카카오톡으로 공유하기를 보내기 위해서는 반드시 플랫폼이 등록되어야 한다. 

위와 같이 사이트 도메인을 추가하고 저장하면 된다. 

만약 플랫폼이 등록되어 있지 않으면 공유하기 시 에러가 나타난다. 


카카오톡 링크 공유하기는 공식 개발자 가이드에 잘 설명되어 있다.

간략히 옮겨보면 최종적으로 사용자에게 보여지는 카카오톡은 다음과 같다. 



여기에 보이는 라벨, 이미지, 버튼 아이콘 및 텍스트 등을 모두 수정할 수 있다. 

참고로 버튼 아이콘은 관리자 화면(맨 처음 그림에서 Mini 왼쪽의 아이콘 수정)에서 바꿀 수 있다. 


카카오톡 개발자 가이드에 나와 있는 소스는 다음과 같으니 참고하기 바란다.  



페이스북 공유하기 

페이스북이나 트위터는 URL 패턴으로 되어 있어 상대적으로 간편하다. 

다만, 페이스북은 메타 태그를 통해서 더 많은 정보를 제공할 수 있어 해당 메타태그를 잘 작성하는 것이 필요하다. 


페이스북의 공유를 위한 메타 태그의 정보는 다음과 같다. 


그리고 다음 URL로 글을 보내면 된다. 

http://www.facebook.com/sharer/sharer.php?u=공유할 글의 URL


최종적으로 현재 글의 공유하기 버튼을 만든다면 다음과 같이 할 수 있다. 


참고로 페이스북의 경우에는 캐싱을 하기 때문에 내용이 바뀌었을 때 바로 적용되지 않는다. 

이럴 경우에는 다음 디버깅 URL로 이동해서 "Fetch new scrape information" 버튼을 클릭해 다시 불러오기를 한 후 실행하면 된다. 


트위터 공유하기

트위터 공유는 메타 태그 등이 필요없이 URL 패턴으로만 전송하면 되므로 간단하다. 

https://twitter.com/intent/tweet?text=글 제목&url=공유할 글의 URL


자바스크립트로 구현하면 다음과 같이 할 수 있다. 


실행하면 다음과 같이 트위터에 공유할 수 있는 화면이 나타난다. 





Trackback 0 And Comment 0

HighChart를 활용한 웹/모바일 호환 그래프 만들기~

|



하이차트(high chart)의 가장 큰 장점은 자바스크립트 기반으로 웹과 모바일을 모두 지원한다는 점이다. 

모바일 트래픽이 증가함에 따라 최근 하이차트(high chart)를 그래프 툴로 활용하는 경우를 종종 볼 수 있다. 


웹에서 사용할 수 있는 무료 그래프 툴에 대하여 에서 여러가지 그래프 툴을 설명했었는데, 오늘은 하이차트의 활용에 대해 정리해보도록 한다. 


하이차트(highchart) 설치

하이차트를 설치하는 것은 매우 간단하다. 

jQuery와 같은 자바스크립트를 추가하고 이어서 하이차트의 자바스크립트를 포하하면 된다. 


주의할 점은 순서가 jQuery  다음에 하이차트라는 것이다. 

가끔 highcharts.js 파일을 jquery.min.js보다 앞에 써서 오류가 발생하는 경우가 있다.


하이차트(highchart) 예제

하이차트 사이트에 있는 내용으로 간단한 만든 다음 소스를 살펴보자. 


41번째 줄의 <div> 태그의 id 값 (container)을 12번째 줄의 스크립트에서 참조해서 하이차트를 그린 것을 주의 깊게 봐야 한다. 

HTML과 JQuery 문법 일부만 알면 정말 쉽게 하이차트를 활용할 수 있다. 



실제 하이차트와 관련해서는 많은 소스와 데모가 사이트에 나와 있다. 

기본적인 차트 이외에 주식 차트를 위한 high stock, 지도를 위한 high map도 있으니 살펴보면 된다. 


Ajax로 값을 가져오기 

실제 차트를 그리기 위해서는 값을 외부에서 가져와야 하는 경우가 많다. 

Ajax로 값을 가져오도록 호출하고 해당 데이터가 리턴되었을 때부터 그래프를 그리는 소스는 하이차트 사이트의 Ajax 데모를 보면 된다. 


중간에 Ajax를 처리하기 위한 $.getJson(...) 이 추가 된 것을 알 수 있다. 


json 타입의 데이터를 가져와서 변환해 사용하는 부분은 high stock의 다음 예제를 살펴보면 된다. 

http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/stock/demo/candlestick-and-volume/


13~26번째 줄이 json 타입으로 리턴된 데이터를 내부에서 사용할 ohlc와 volume 변수에 저장하는 부분이다. 

그리고 하단의 series에서 해당 변수를 사용해서 차트를 그린 것을 확인할 수 있다. 

json으로 값을 가져와서 위와 같은 형태의 배열로 변환해 활용하면 된다. 


만약 멀티 차트를 그리기 위해 여러 개의 ajax를 호출해야 한다면, 

다음 소스를 참고하는 것이 좋다. 

http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/stock/demo/compare/

 

위 예제는 세 종류의 값을 가져오는 부분을 $.each(names, ... 형태로 반복해서 호출해 처리하고 있다. 

여러가지 차트를 한번에 그릴 때 활용하면 좋을 듯 하다. 


하이차트(highchart)에서 흔히 하기 쉬운 실수들 

이제 highchart를 사용하면서 자주 하는 실수를 정리해 보려고 한다. 


첫번째는 데이터에 문자열을 넣어서 발생하는 오류이다. 

하이차트는 숫자를 가지고 그래프를 그리는 형태이기 때문에 당연히 값으로 숫자가 넘어올 것을 기대하고 있다. 


숫자 대신 다음과 같은 형태로 문자를 전달하면 Highcharts Error #14와 같은 오류가 발생한다. 

series: [{ data: ["3", "5", "1", "6"] }]


두번째는 데이터 정렬과 관련된 문제이다. 

그래프에서 X축이 되는 데이터가 정렬되어 있지 않은 경우에 Highcharts Error #15와 같은 오류가 발생한다. 

성능상의 이유로 하이차트 내부에서는 데이터 정렬을 하지 않는다. 

그러므로 라인 차트나 주식 차트를 사용할 때는 반드시 정렬된 데이터를 제공해야 한다. 





Trackback 0 And Comment 0

웹에서 액티비티 호출하기

|



웹앱을 만들다보면, 웹에서 안드로이드 앱의 특정 액티비티를 호출해야 하는 경우가 종종 발생한다. 

오늘은 HTML의 링크를 클릭했을 때, 안드로이드 액티비티를 호출하는 간단한 방식을 정리해 보도록 한다. 


웹뷰를 작성하는 코드는 안드로이드 웹뷰(WebView) 사용하기 를 참고하기 바란다. 

이 소스에 HTML 링크를 처리하는 부분을 추가할 것이기 때문이다. 


웹에서 액티비티 호출 방식

웹에서는 HTML의 <a> 태그를 활용해서 액티비티를 호출한다. 


<a href="app://...">Call Activity</a>

이런 형태로 호출하고, 안드로이드 액티비티에서 URL 로딩하는 부분에서 app://로 시작하는 것을 별도로 처리하면 된다. 


필요에 따라서 app:// 이후 문자열을 가지고 특정 파라미터를 전달하는 형태도 가능할 것이다. 


웹 HTML 소스

간단한 테스트를 위해서 app:// 링크를 가진 HTML 파일을 하나 생성한다. 


웹에서 실행 후, 링크를 눌러보면 아무런 반응을 하지 않는다. 


안드로이드 코딩

안드로이드 웹뷰(WebView) 사용하기 에서 만든 MiniWebActivity에 관련 내용을 추가해 보도록 한다. 

웹의 링크를 받아서 다른 액티비티를 실행할 것이므로 인텐트(intent)를 사용해야 한다. 

이를 위해 ApplicationContext를 알아야 할 필요가 있다. 


5번째 줄에 mContext 변수를 선언하고, 11번째 줄에서 getApplicationContext()로 할당했다. 


이제 URL 로딩에서 app://으로 시작하는 부분을 처리해야 한다. 

안드로이드 웹뷰(WebView) 사용하기 에서 WebViewClient를 상속받아서 WebViewClientClass를 inner class로 구현한 것을 기억할 것이다. 

이 클래스의 URL 로딩을 오버라이드한 메소드에서 app://을 처리하면 된다. 


4~8번째 줄을 보면 URL에서 app://으로 시작할 경우, 

인텐트를 사용해서 MainActivity를 실행하도록 설정되어 있다. 


전체 소스를 살펴보면 다음과 같다. 




Trackback 0 And Comment 1

사용자를 생각하게 하지마!

|



미니 서평

모든 웹 사용자는 다르다. 

그러니 웹 사용 방식도 모두 다르다고 보면 된다. 


사용자와 디자인 이해

스티브 크룩의 "사용자를 생각하게 하지마!"를 읽으면서 생각이 많아졌다. ^^

웹 페이지를 만들고 나서 1~2년이 흐르면 왠지 디자인이 오래된 것 같은 느낌에 리뉴얼을 시작한다. 

그러나 중요한 것은 오랜 디자인이라고 느끼는 것은 우리가 자주 봤기 때문이 아닐까? 

처음 접속하는 사용자는 과거 디자인이 더 낫다고 느끼지 않을까? 하는 생각을 가끔 했었다. 


어찌 보면 웹 페이지를 주기적으로 리뉴얼 하는 것보다

사용자들이 쉽게(생각없이) 활용할 수 있도록 만드는 것이 더 중요하지 않을까 한다. 


"편리하게 쓸 수 있는 사이트나 앱을 만들기 위해 제가 해야 할 가장 중요한 일은 무엇인가요?"

답은 간단하다. "두 번 이상 클릭하게 하지 않는 것이 가장 중요해요", "사용자의 언어로 이야기하세요", 

"일관성을 유지하세요."라는 말처럼 복잡하지 않다. 

그 답은 바로... 사용자를 고민에 빠뜨리지 마라!


사용성 평가

이런 측면에서 스티브 크룩의 직접 하는 사용성 평가는 상당히 신선했다. 

다른 이야기들은 UI/UX가 강조되면서 고민을 해 봤던 주제였지만, 

사용성 평가를 해 볼 생각을 못해봤던 것이다. 

그래서 사용성 평가 부분만 별도로 정리해봤다. 



버려야 얻는다

책을 읽으면서 서정현님의 "더 늦기전에 더 잃기전에" 중에서 "버려야 얻는다"라는 구절이 떠올랐다. 

버려야 얻는다

대부분 버리지 못해 

새로운 것이 들어설 수 없다. 

버리면 마치 죽을 것처럼 갖가지 것들에 

미련이 남는다. 하지만 진실로 열정을 다했다면

돌아서 버릴 수도 있다. 하지만 한 번도

치열하게 살지 못했다면 미련이 남는다. 

미련없이 살아야만 버리는 것도

과감할 수 있다. 이것은 물질, 

정신 모두에 해당된다. 


밑줄 긋기

사람들이 실제 웹을 사용하는 방식..

1. 사용자는 웹 페이지를 읽지 않는다. 훓어본다. 

2. 사용자는 최선의 선택을 하지 않는다. 최소 조건만 충족되면 만족한다. 

3. 사용자는 작동방식까지 이해하려 하지 않는다. 적당히 임기응변한다. 


웹 관례를 활용하지 않으려면 (a) 사람들이 별도로 익히는 수고를 하지 않아도 될 정도로 명확하거나 설명 없이도 이해할 수 있어서 관례 만큼이나 좋은 것으로 대체해야 한다. 

아니면 (b) 익히는 수고를 약간 들이더라도 그만큼의 가치가 있는 것으로 대체해야 한다. 

여러분의 새로운 아이디어가 더 낫다는 것을 확신할 때 혁신하라. 하지만 그렇지 않을 때는 관례를 잘 활용하라. 


웹 페이지를 편집할 때 모든 것이 시각적 잡음이라고 가정하고 시작하는 편이 좋다. 

'결백이 증명되기까지 유죄로 추정'하는 접근법이라고 할 수 있다. 

진짜 도움이 되는 부분만 남기고 나머지는 모두 없애라. 

사용자의 시간과 주의력에는 한계가 있으므로 정말 중요한 부분 외에 모두 없애도록 하라. 


사용자는 웹에서 늘 선택을 하기 마련이다.

안내를 넣어야 할 지 고민될 때는 만든 사이트를 사용하기 편하게 하려고 할 때 가장 중요한 요소가, 

선택을 고민 없이 할 수 있게 하는 데 있다는 점을 기억하라. 


불필요한 단어는 생략하라. 

건강한 문체는 간결하다. 문장에 불필요한 단어가 없어야 하고 문단에는 불필요한 문장이 없어야 한다. 

그림에 불필요한 선이 없어야 하고 기계에 불필요한 부품이 없어야 하는 것과 같은 이치다. 


웹 디자인의 빅뱅이론의 바탕에는 우리가 알고 있는 그 빅뱅이론처럼 

새로운 웹 사이트나 웹 페이지에 처음 접속한 몇 초가 매우 중요하다는 아이디어가 깔려있다. 

이렇게 초기에 받은 인상이 실제 그 페이지에서 어느 정도 시간을 보낸 후에도 거의 변하지 않는다. 


19세기 아마추어 수학자였던 윌리엄 포스터 로이드가 창안한 공유지의 비극(The tragedy of the commons)이 있다. 

공유된 자원은 남용 때문에 반드시 파괴된다. 

과잉 홍보로 홈페이지를 뒤덮지 않으려면 꾸준히 조심하는 방법밖에 없다. 

딱 하나만 더 넣자는 욕심은 끊임없이 샘솟기 때문이다. 


웹 디자인 회의는 웹 사용자들이 우리와 비슷하다는 믿음 때문에 교착 상태에 빠지곤 한다. 

개인적, 직업적 의견의 충돌이 정체기에 들어서면 대화는 보통 사용자 대부분이 무엇을 좋아하는지 싫어하는지, 

즉 평균 웹 사용자가 정말 좋아하는 것이 무엇인지 알아내는 방향으로 흘러간다. 

하지만 진짜 문제는 평균 사용자는 존재하지 않는다는 데 있다. 

사실 사용자들이 웹을 사용하는 모습을 관찰하면 할수록 이와 정반대의 결론에 이르게 된다. 


핵심은 이렇다. "사용자 대부분이 풀다운 메뉴를 좋아할까?" 같은 질문은 비생산적이다. 

"이 플다운 메뉴, 이 항목, 이 페이지, 이 맥락에서 이 단어를 선택하면 이 사이트를 사용하는 사용자 대부분에게 좋은 경험을 제공할 수 있을까?"가 좋은 질문이다. 

이런 질문에 답하는 방법은 딱 한 가지다. 

평가해 보는 것이다. 

팀의 기술, 경험, 창의성, 상식을 집합적으로 활용해서 평가용 버전을 완성해야 한다. 

설사 매우 조잡한 버전이 되더라도 말이다. 

그래서 사람들이 평가용 버전을 가지고 이게 어떤 사이트인지, 사용 방법은 무엇인지 알아내는 모습을 주의 깊게 관찰한다. 


사용성을 구성하는 또 다른 주요 요소가 있다. 

그것은 바로 사용자에 대한 배려심을 갖추고 옳은 행동을 하느냐 하는 부분이다. 

"내 사이트가 이해하기 쉬운가?"라는 질문뿐 아니라 "내 사이트가 예의 바르게 작동하고 있는가?"라는 질문도 해야 한다. 


우리가 스스로를 부르는 이름은 중요하지 않다. 

우리가 어떤 태도를 취하는지, 우리가 기여할 수 있는 기술은 무엇인지가 중요하다. 




Trackback 0 And Comment 0

스티브 크룩의 사용성 평가에 대해~

|



스티브 크룩의 "사용자를 생각하게 하지 마! (Don't Make Me Think)"에 보면 사용성 평가에 대한 이야기를 하고 있다. 

우리는 뭔가 고객 대상으로 평가를 하고 설문을 받아야 한다면 거창한 것을 생각하는데

스티브 크룩이 말하는 사용성 평가는 저렴한 비용으로 효과적으로 자주 수행할 수 있는 방법인 듯 하다. 



"Rocket Surgery Made Easy" 사이트에 보면 사용성 평가와 관련된 많은 내용을 확인할 수 있다. 

여기에서는 스티브 크룩의 핵심 내용만 정리해서 공유하도록 한다. 


웹 디자인 만평

먼저 누구나 공감할 만한 웹 디자인 만평을 살펴보자. 



"2주 후..."에도 동일한 논쟁을 하고 있는 것을 보면 남의 일 같지 않을 것이다. ^^

이런 상황을 스티브 크룩은 해답이 없는 "종교적 논쟁"이라고 표현한다. 

그리고 종교적 논쟁을 해결할 수 있는 방법은 "평가"하는 것이다. 


사용성 평가의 중요성

그래서 사용성 평가가 중요하다고 한다. 

물론 전문 업체에 의뢰해서 사용성 평가를 할 수 있지만

적은 비용으로 프로젝트 초기부터 자주 사용성 평가를 하는 것이 더 바람직하다고 이야기 하고 있다. 


사용성 평가 주기와 참가자 수

그럼.. 스티브 크룩이 직접 사용성 평가를 진행하는 방법을 정리해 보기로 한다. 

평가 주기는 한달에 한번 오전 시간이 좋다.

오전 시간에 하는 이유는 사용성 평가를 관찰할 팀원들의 참여율을 높일 수 있기 때문이다.

사용성 평가할 사용자의 수는 1회 평가시 3명 정도가 적절하다.

한번 평가에서 모든 문제를 찾을 필요가 없으며 3명 정도 테스트하면 수정해야 할 분량은 충분하다.


참가자 선정과 진행 방법

참가자는 해당 분야에 맞는 사람을 찾기보다는 일반인들과 같은 해당 분야의 초보자를 선정하는게 좋다. 

평가는 책상 하나, 의자 두 개가 있는 조용한 장소가 적합하다. 

팀원이나 이해관계자는 다른 방에서 사용자의 테스트를 지켜 보는 것이 좋다. 

이를 위해서 고투미팅(GoToMeeting)이나 웹엑스(WebEx)와 같은 화면 공유 소프트웨어로 화면을 함께 보고 

캠타시아(Camtasia)와 같은 화면 녹화 소프트웨어를 사용해서 녹화하는 것도 필요하다. 


사용자와 함께 할 진행자는 차분하고 다른 사람의 감정에 잘 공감하며 이야기를 들어주는 사람을 선택하면 된다. 

진행자는 참가자가 편안하게 본인의 임무에 집중하게 해야 할 뿐 아니라 

생각하고 있는 내용을 최대한 많이 소리내어 말하게 해야 한다. 


사용자 평가 구성

평가할 과제는 평가 당시 평가할 만한 내용이 얼마나 만들어졌는냐에 영향을 받는다. 

평가 시간을 1시간으로 설정했다면 과제는 35분 정도로 채우면 적당하다. 


1시간 평가는 일반적으로 다음과 같이 구성한다. 

  • 인사(4분): 참가자가 진행 과정을 이해한 상태에서 평가에 임할 수 있도록 진행 방법을 설명한다.  
  • 배경 질문(2분): 참가자에 대해 몇 가지 질문을 던진다. 참가자의 긴장을 풀어주는 동시에 그들의 컴퓨터나 웹 관련 지식 수준이 어느 정도인지 가늠하는 데 도움이 된다. 
  • 홈페이지 둘러보기(3분): 평가할 사이트의 홈페이지를 열어서 둘러보고 그 사이트에서 무엇을 할 수 있을 거라 생각하는지 참가자에게 물어보라. 
  • 과제(35분): 참가자가 일련의 과제를 수행하는 모습을 관찰하는 사용성 평가의 핵심이다. 
  • 심층 질문(5분): 참가자에게 평가 중에 일어났던 일에 대해 묻거나 관찰실에 있던 이들이 묻고 싶었던 질문을 던질 수 있다. 
  • 마무리(5분): 도와주어 고맙다는 인사를 하고 수고비를 지급한 후에 나가는 문을 안내한다. 


스티브 크룩은 사용성 평가를 진행할 때 미리 준비한 대본을 그대로 읽는다고 한다. 

이때 사용하는 대본은 "Rocket Surgery Made Easy"에서 받을 수 있다. 

test-script.pdf


평가 후 브리핑

사용성 평가 후 내부 회의를 통해 고칠 내용을 정하는 것도 중요하다.

너무 많은 문제를 해결하려고 하지 말고 가장 중요한 문제를 먼저 고치는 데 집중해야 한다. 


  • 공동 목록을 만들어라
  • 가장 심각한 문제 10가지를 고른다. 
  • 순위를 매겨라
  • 목록을 정돈하라
  • 매우 쉽게 고칠 수 있는 문제는 따로 목록을 만들어라
  • 새로운 문제를 더하려는 충동을 자제하라
  • 새로운 기능에 대한 요청은 가려서 들어라
  • 일시적으로 길을 잃었다가 아무 도움없이 정상 궤도로 돌아오는 경우는 문제가 아니다.


프로젝트를 진행하면서 완료된 이후에 나타나는 사용성 문제들을 예방하기 위해서 한번쯤 진행해 볼 만한 가치는 있는 것 같다. 





Trackback 0 And Comment 0

웹에서 사용할 수 있는 무료 그래프 툴에 대하여

|



웹 사이트를 개발하다보면 통계나 각종 차트에 대해서 그래프를 출력해야 하는 경우가 있습니다. 

Flash나 Ajax를 이용해서 그래프를 출력할 수 있는 툴 들이 있어서 소개하도록 하겠습니다. 

제가 직접 사용해 본 그래프 툴을 소개할 예정인데요. 

Fotographer INNO 님의 웹 디자인에 유용한 차트 & 그래프를 보니 정말 다양한 툴이 있는 것 같습니다. 

좀 더 다양한 그래프를 보고 싶으신 분은 위 링크를 한번 방문해 보시기 바랍니다. 


Highcharts - Ajax로 모바일까지 지원하는 그래프 툴

Highcharts는 Ajax로 되어 있는 그래프 툴로서 상용이 아닌 경우, 무료로 사용할 수 있구요. 

상용 버전도 1개발자에 약 40만원 정도로 그리 비싸지 않습니다. 

일단 Ajax로 구성되어 있어서 모바일에서도 똑같이 보여진다는 것이 가장 큰 장점입니다. 

그래프 이미지도 상당히 깔끔하게 나옵니다. 



JQuery, MooTools, Prototype과 같은 Javascript를 사용해서 동작할 수 있기 때문에 생각보다 쉽게 적용할 수 있습니다. 

데이터는 컴마(,)로 구분된 텍스트나 JSON 형태로 전달해 주면 되구요. 

CSV, XML, 또는 php/jsp와 같은 프로그래밍에서 제공할 수도 있는 형태로 되어 있습니다. 



특히 재미있는 기능은 확대/축소를 지정해 두면 일부 영역을 드래그 하면서 확장할 수 있다는 것입니다. 

데이터가 많은 것을 한눈에 보여주고 확장 기능을 주고 싶을 때 유용하게 활용할 수 있을 것 같습니다. 


추가로 Highchart를 웹에서 직접 테스트할 수 있는 URL을 제공해 줍니다. 

아래 사이트에 들어가시면 위의 두번째 차트에 대한 내용을 직접 편집하면서 볼 수 있습니다. 

http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/column-basic/


Open Flash Chart - Flash를 기반으로 한 오픈 소스

Flash 기반으로 만들어진 오픈 소스입니다. 

개발자가 유료 버전의 그래프를 튜닝해서 쓰다가 수정 사항들을 이야기 했는데 

대응이 너무 화나게 해서 아예 새롭게 만들어서 Open Flash Chart를 오픈 소스로 제공했다는 스토리가 있는 소스입니다. ^^


플래시 기반이기 때문에 모바일에서는 제대로 동작하지 않습니다만 

웹만 사용할 때는 유용하게 활용할 수 있는 툴입니다. 

OFC와 OFC2가 있으며 데이터를 출력하기 위해서는 JSON을 활용하고 있습니다. 



그림에서 보이는 것처럼 Highchart 보다 덜 세련되어 있지만 나름 웬만한 그래프는 모두 처리할 수 있습니다. 


Fusion Charts Free

Fusion Charts Free는 플래시 기반의 그래프를 표출하는 오픈 소스로서 다양하고 예쁜 그래프를 제공해 주고 있습니다. 

다음 그림을 참고해 보시죠.. 


참고로 유료로 판매하는 Fusion Charts XT와는 다른 것이라고 하네요. 

Fusion Chart XT는 플래시가 아닌 Javascript/HTML5 기반으로 구성되어 있다고 합니다. 

실제로 통계 사이트들 중에서 그래프도 다양하고 디자인도 상당히 괜찮아서 Fusion Chart XT를 사용하는 곳이 꽤 되는 것 같습니다. 










Trackback 1 And Comment 0

[웹표준 #3] 문서 제목의 마크업은 Heading을 쓰자.

|



HTML에서 문서 제목 부분은 어떻게 쓸까?

HTML 문서도 일반 문서처럼 제목, 소제목 들을 사용하는 경우가 많이 있습니다. 

이때 여러분은 어떤 태그를 많이 사용하는지요? 

아마도 대부분은 다음과 같은 형태를 많이 사용할 것 같습니다. 

<p><b>미니의 프로그래밍 이야기</b></p>

여기에 <font> 태그는 사용하지 않는게 좋다고 하니 CSS의 style을 적용해서 폰트 크기를 키우기도 하겠죠.. 

<p style="font-size:24px;"><b>미니의 프로그래밍 이야기</b></p>

원하는 크기대로 나오고 괜찮은 것 같다고 생각합니다. 

그러나 이렇게 작성하면 HTML 태그의 기본 속성인 의미 전달이 안됩니다. 

즉, 위 부분만 보고서 문서의 제목이라고 판단하기는 쉽지 않기 때문이죠.. 

(주로 누가 문서만 보고 판단을 할까요? 한번 생각해 보세요 ^^)


그래서 <span> 태그를 한번 사용해 봅니다. CSS의 class를 활용하면 좀 더 낫겠죠.. 

<span class="heading">미니의 프로그래밍 이야기</span>

이렇게 하면 CSS에 heading 부분에 대한 스타일을 적용해서 멋지게 꾸밀 수는 있습니다. 

그러나 이것도 문서만 보고서 제목이라고 판단하기는 쉽지 않습니다. 물론 사람을 알 수 있죠. 

제가 여기에서 말하는 누군가는 바로 검색엔진과 같은 웹 로봇들을 의미합니다. 


실제로 SEO(Search Engine Optimization)과 같은 검색 엔진 최적화 작업들을 많은 웹 페이지가 수행합니다. 

이유는 검색엔진에 많이 노출됨으로써 사이트로 유입을 증가하기 위함이죠. 

그렇다면 사람 뿐만 아니라 검색 엔진도 쉽게 이해할 수 있도록 HTML 문서를 작성해야 합니다. 

이럴 때 사용하는 문서의 제목이 바로 <h1>, <h2>와 같이 사용하는 Heading입니다. 

<h1>미니의 프로그래밍 이야기</h1>


HTML Heading 사용하기 

HTML에서는 제목으로 사용하기 위한 태그로 <h1>, <h2>, <h3>, <h4>, <h5>, <h6>의 6가지 태그를 제공하고 있습니다. 

이 태그들은 숫자가 커지면 폰트 크기가 점점 작아지는 특성을 가지고 있습니다. 

즉, 가장 큰 제목은 <h1>, 그 다음 중 제목은 <h2>, 그리고 소 제목은 <h3>와 같이 사용하면 됩니다. 

이와 같은 Heading 태그를 사용하면 어떤 장점이 있을까요? 


검색엔진 최적화

앞서 이야기한 것 처럼 Heading 태그를 사용하면 검색 엔진에 HTML 문서를 분석하기 쉽습니다. 

즉, 검색엔진은 <h1>과 같은 태그가 적용되어 있는 부분을 문서의 제목이라고 판단해서 색인(인덱스)를 적용하게 되는 것이죠. 

만약 여러분의 웹 사이트를 좀 더 잘 검색되려고 하려면 Heading 태그를 적절하게 사용하면 됩니다. 



스타일 적용의 용이성

또한 CSS 스타일을 적용하기 쉬워집니다. 

다음과 같이 <h1> 태그에 대한 스타일을 적용하면 아래에 밑줄이 그어진 멋진 제목이 만들어질 것입니다. 

CSS에서 padding과 border에 대해서 이해하기 위해서는 다음과 같은 박스 모델을 이해하고 있어야 합니다. 

실제 콘텐츠 영역의 경계선 (Border)을 중심으로 안쪽 여백을 Padding, 바깥쪽 여백을 Margin이라고 합니다. 

그리고 다음과 같이 값을 4자리 숫자로 지정하게 되면, 위에서부터 시계방향으로 Top -> Right -> Bottom -> Left 순으로 지정한 것으로 이해하면 됩니다. 

이 두 가지만 기억하고 있으면 CSS에서 어떤 형태의 Margin, Padding, Border는 모두 이해할 수 있을 것입니다. 

좀 더 자세한 정보는 제가 예전에 작성한 2012/01/20 - [프로그래밍/Web] - CSS의 Margin, Padding, Border 개념을 명확하게 하자 를 참고하세요


주의할 점

HTML4.01에서 HTML5로 넘어가면서 <h1>..<h6> 태그에 있던 속성인 align 속성이 deprecated 되었습니다. 

즉, HTML5에서는 해당 정렬 속성을 처리하지 못한다는 것입니다. 

대신 CSS를 활용해서 정렬을 처리하도록 하고 있으니 이점도 유의하시기 바랍니다. 


오늘은 기본적이지만 매우 중요한 문서의 제목을 나타내는 Heading 태그에 대해 살펴봤습니다. 

웹 표준 관련 강의는 초보자들을 위한 것인 만큼 이렇게 쉬운 것도 해 볼 생각이니 부담없이 보시면 좋을 것 같습니다. 

그럼. 좋은 하루 되세요~~ 






Trackback 0 And Comment 0

[웹표준 #2] 리스트 태그를 제대로 활용하자.

|



리스트 태그는 언제 사용할까?

제 블로그에 있는 분류 목록을 화면에 출력한다고 생각해 보죠. 

가장 간단한 방법은 다음과 같이 <br> 태그를 사용하는 것입니다. 

원하는대로 리스트 형태로 출력되기는 합니다. 

그러나 이런 코딩에서 문제점은 무엇일까요?

이 리스트에 스타일을 변경시킨다면 즉, 색상을 바꾸거나 글꼴이나 크기를 변경할 경우, 

현재 상태에서는 각각의 라인에 <font> 태그를 적용하는 방법이나 각각 <span> 태그를 넣고 CSS의 class로 스타일을 적용하는 방법 뿐으로 보입니다. 

이런 경우에 바로 리스트 태그를 사용해야 합니다. 

위와 같은 경우는 순서가 중요하지 않기 때문에 <ul> 태그로 감싼 <li> 태그를 사용하면 되겠죠. 

그럼 리스트 태그에 대해서 한번 살펴보도록 하겠습니다. 


리스트 태그의 종류 

리스트 태그에 대해 좀 더 자세하게 살펴보기 전에 먼저 리스트 태그의 종류를 알아보려고 합니다. 

보통 리스트 태그하면 두 가지 종류 (Unordered List, Ordered List)를 생각을 하는데요. 

Definition List라고 한가지가 더 있습니다. 각각에 대해서 자세히 살펴보도록 하죠. 


Unordered List

순서가 중요하지 않은 리스트로서 <ul> 태그를 사용해서 각 리스트 항목을 감싸고, 각각의 리스트 항목은 <li> 태그를 사용합니다. 

위 예제의 일부분을 Unordered List로 나타내면 다음과 같습니다. 

결과를 보면 다음과 같이 나타납니다. 

  • Beginner
  • XML Developer
  • 프로젝트 관리론


Ordered List

순서가 중요한 리스트입니다. <ol> 태그를 사용하고 각 항목은 마찬가지로 <li> 태그를 사용합니다. 

Unordered List와 달리 점(.)으로 출력되지 않고 숫자로 나타나게 됩니다. 예제와 결과를 보시죠. 

다음과 같이 숫자로 순서가 표기된 것을 알 수 있습니다. 

  1. Beginner
  2. XML Developer
  3. 프로젝트 관리론


 Definition List

<dl> 태그를 사용하는 Definition List는 기존 리스트와 조금 다릅니다. 

무언가 정의를 내릴 때 사용하는 것인데요. 

내부에는 <dt>와 <dd> 태그를 포함하고 있습니다. 

<dt>는 정의하는 것의 용어를 나타내고, <dd>는 정의하는 것의 설명을 나타냅니다. 

즉, "<dt>는 <dd>이다."라고 표현할 수 있는 항목에서 사용하는 것이죠.. 

예제를 살펴보시죠. 

결과는 다음과 같이 나타나구요. HTML 문서의 구조화를 위해서는 잘 활용하는 것도 좋을 것 같습니다.

테이블 태그와 비슷하지만 분명히 용도는 다른 것이니 기억해 두세요~~ 

Beginner
- 초보자를 위한 강좌
XML Developer
- XML과 관련된 개념 및 개발 강좌


리스트 태그의 확장

<br>태그 대신 리스트 태그를 써야 한다고 앞에서 이야기 했는데요. 

사용자에 따라 리스트 태그의 기본으로 나타나는 점이나 숫자등이 표시되지 않고, 들여쓰기도 안되기를 원할 수 있습니다. 

이런 것을 해결하는 것이 바로 CSS 입니다. 

즉, 스타일시트를 활용해서 문서의 표현을 다루는 것이죠. 

이러한 구조와 표현의 분리가 바로 웹 표준의 핵심 개념이라고 할 수 있습니다. 

CSS에 대해서는 나중에 자세히 살펴보도록 하구요. 

여기에서는 리스트에 대한 것만 집중해서 이야기하도록 하죠. 

list-style: none; 이 부분이 바로 점이나 숫자와 같이 리스트 스타일을 출력하지 않도록 하는 것입니다. 

padding-left: 0; 은 왼쪽 들여쓰기를 하지 않도록 설정하는 부분이 되겠죠. 

이렇게 하면 맨 처음 보여드린 <br> 태그를 사용한 것과 비슷하게 출력이 됩니다. 

이제 색상을 넣거나 폰트 크기 등을 변경하려면 <li> 태그에 스타일 관련 코드를 넣으면 되겠죠. 

리스트 태그에 대해서 기본적인 내용을 쭉 살펴봤습니다. 

어떤 내용이든지 쉽게 이해할 수 있도록 정리하는 것은 즐겁기도 하지만 쉽지만은 않은 것 같네요. 

오늘도 좋은 하루 되세요,






Trackback 0 And Comment 0

[웹표준 #1] 웹 표준을 어떻게 시작할까?

|



시작하면서

현재 IT 프로그래밍을 보면 정말 배워야 할 것이 너무 많은 것 같습니다. 

Java 분야만 해도 JSP, Java, Struts, Spring, Hibernate, SiteMesh, iBatis, Google App Engine, Hadoop, NoSQL 등등.. 

정말 나열해 보니 끝도 없네요. 아마 요즘 시대에 프로그래밍을 시작했다면 막막했을지도 모르겠습니다. 


학교에서 강의를 하면서 항상 기본부터 시작하라고 이야기를 많이 합니다. 

그래서 저도 최근 이슈들을 하나씩 정리하려구 하고요. 그 첫번째로 웹 표준부터 시작하려고 합니다. 


90년대 후반 처음 웹 프로그래밍을 시작할 때, HTML 태그를 배웠던 기억이 납니다. 

<font> 태그로 글꼴의 크기나 색상을 이쁘게 하고 <iframe>으로 구조를 잡기도 하고, <table> 태그 정도 쓰면 우쭐하던 시기였죠. 

그러다가 웹 표준에 대한 이야기가 나오면서 오히려 초기에 HTML을 배웠던 사람들에게 웹 표준이 어렵다는 인상을 주기도 합니다. 

XHTML을 준수해야 하고  CSS로 형식을 설정하는게 왠지 낯설기만 하지요. 

이런 분들을 위해서 웹 표준을 하나씩 정리해 보려고 합니다. 


웹 표준이란?

웹 표준이란 말 그대로 웹의 표준을 지킨다는 것을 의미합니다. 

현재 웹에서 표준은 W3C 기준으로 매우 다양하지만 기본적으로 HTML4.01을 XML 형태로 표현한 XHTML을 지키고

스타일을 지정할 수 있는 CSS를 활용한다는 것을 말합니다. 


제 블로그를 자주 보시는 분들은 어디서 많이 본 것 같을 수도 있을 것 같습니다. 

바로 XML 강의에서 했던 구조를 나타내는 XML 문서와 스타일을 나타내는 XSL/CSS 문서를 HTML 버전으로 정리해 둔 것이죠.. 


2002/08/01 - [XML Developer/XML기초] - 1.1 XML이란?

2011/11/08 - [XML Developer/XSL] - XSL에 대하여



웹 표준의 필요성

그렇다면 웹 표준은 왜 필요한 것일까요?

첫째, 문서의 구조와 모양(스타일)을 분리할 수 있습니다. 

HTML 자체는 문서의 내용이나 구조만을 나타내고 보여지는 모습은 CSS를 통해서 처리하는 것이죠. 

CSS의 Media Query등을 활용해서 브라우저 크기나 모바일에서도 동일한 콘텐츠를 다양하게 보여줄 수도 있을 겁니다. 


둘째, 웹 접근성이 높아집니다. 

현재는 스마트폰이 활성화 됨에 따라 PC뿐만 아니라 모바일에서도 웹페이지를 많이 접속하고 있습니다. 

또한 웹 브라우저도 IE에서 벗어나 구글 크롬, 사파리, 파이어폭스 등 다양한 브라우저들이 등장함에 따라 모든 브라우저 호환성을 유지하기 위해서도 반드시 웹 표준을 지켜야 합니다. 


셋째, 웹 페이지의 접속 속도를 향상시킵니다. 

웹 표준을 지키지 않으면 각 브라우저에서 Quirk Mode로 접속되어 웹페이지를 처리하는데 느려질 수 있습니다. 

조금이라도 빠른 서비스를 제공하려면 반드시 웹 표준으로 사이트를 작성하는 것이 중요합니다. 


웹 표준 준수 여부 확인하기

웹 표준을 제대로 지켜서 작성했는지 확인하기 위한 Validation들이 많이 있습니다. 

이중에서도 W3C에서 제공하는 http://validator.w3.org/를 한번씩 활용해 보시기 바랍니다. 

모바일 웹 사이트에 대한 검증사이트도 제공하는데요. http://validator.w3.org/mobile/ 에서 확인할 수 있습니다.


2011/11/28 - [프로그래밍/Web] - 모바일 웹 사이트 제작을 위한 표준~


마치면서

웹 표준에 대한 정리는 기본적인 HTML 마크업인 <list>, <h1>, <a>, <form>, <table>, <div>등의 사용방법에 대해서 정리해 볼 계획입니다. 

그리고 CSS의 활용법 및 레이아웃, 텍스트 스타일, 이미지 처리 등에 대해서 앞으로 살펴보도록 하겠습니다. 


그럼! 오늘도 좋은 하루 되세요~~





Trackback 0 And Comment 0

웹 페이지 레이아웃을 설정하는 SiteMesh 세팅 및 활용에 대하여~

|



1. SiteMesh의 정의

SiteMesh(http://www.sitemesh.org/)는 웹 페이지의 레이아웃을 효율적으로 처리할 수 있도록 도와주는 프레임워크입니다. 

쉽게 말해서 웹사이트의 동일한 상단, 하단, 메뉴 부분을 한곳에서 관리하고 각각의 페이지는 실제 내용만을 관리할 수 있도록 해줍니다.

즉, 상단/하단/메뉴와 같이 반복되는 부분이 각 페이지마다 들어가 있으면 추후 유지보수가 어렵기 때문에 

SiteMesh와 같은 프레임워크를 사용하는 것이죠.


웹사이트를 제작하던 초기에는 iframe으로 나누어서 처리하기도 했었구요. 

SiteMesh 이전에는 include를 활용해서 이런 형태를 구현하기도 했었습니다. 

그러나 iframe은 확장이 어렵고 지원하지 않는 브라우저도 많이 있었네요. 

또한 include는 모든 페이지마다 해당 부분을 삽입해줘야 하는 이슈가 있었죠.

그래서 실제로 SiteMesh를 사용해보면 얼마나 편리한지 알 수 있을 겁니다. 


2. SiteMesh의 처리 방식

SiteMesh는 기본적으로 Java Servlet 환경에서 Filter 형태로 동작하고 있으며 

다음 그림과 같이 Decorator 페이지를 한번 필터링 하는 방식입니다.

기존 페이지는 웹서버가 바로 렌더링된 페이지를 보내주지만 SiteMesh에서는 Decorator 페이지를 한번 더 거치게 된다는 것이죠. 

다음 그림을 보면 SiteMesh의 방식을 좀 더 자세히 이해할 수 있을 것 같네요. 

미리 중간에 있는 이미지와 같이 Decorator를 정의해 둡니다. 

상단의 {title}과 우측의 Body-Content만 각각의 파일들은 가지고 있으면 되는 것이죠.

즉, welcome.jsp와 search.cgi와 같은 파일에는 본문에 들어갈 내용만 가지고 있으면 되는 겁니다. 

이제 Filter를 통해 decorator를 거치면서 하단과 같이 동일한 상단, 하단, 메뉴를 가지고 있는 페이지로 사용자에게 전송됩니다. 

개념은 매우 간단하구요. Java 뿐만 아니라 CGI, PHP, ColdFusion 등에서도 SiteMesh를 활용할 수 있다고 합니다. 


3. SiteMesh의 다운로드 및 설치

먼저 SiteMesh를 다운로드해야 하는데요. 현재 SiteMesh3 알파버전이 소개되고 있습니다. 

SiteMesh2를 사용하려면 여기를 눌러서 sitemesh-2.4.2.jar 파일을 다운로드 하시면 됩니다.


설치하는 방법은 /web/WEB-INF/lib 폴더에 복사하면 됩니다. (여기에서 /web은 프로젝트의 Web Content 폴더를 의미합니다.)

그리고 /web/ 하위에 SiteMesh의 Decorator를 위한 폴더를 하나 만들고 SiteMesh를 적용할 jsp 파일을 하나 생성하면 됩니다. 

/web/decorators/decorator.jsp 

여기에서 decorators 폴더명이나 decorator.xml 파일명은 다른 것을 사용하셔도 됩니다. 

나중에 SiteMesh 설정에서 맞춰서 지정만 해주면 되니까요.. ^^


실제 decorator.jsp에는 다음과 같은 형태로 지정하면 됩니다. 

먼저 tablib를 설정해 주셔야 합니다.

그리고 <decorator:head/> <decorator:body/> 부분이 실제 페이지의 <head>와 <body>의 내용을 넣는 부분이라고 보시면 됩니다. 


4. SiteMesh의 설정

이제 마지막으로 SiteMesh의 설정을 해보도록 하겠습니다. 

3개의 XML 파일을 처리해 줘야 하는데요. 모두 /web/WEB-INF/ 하위에서 작업하면 됩니다. 


1) web.xml

SiteMesh는 Filter 형태로 동작한다고 했으므로 web.xml에 필터 관련 설정을 해줘야 합니다. 

특별히 수정할 사항 없이 그대로 지정해 주시면 됩니다. 


2) sitemesh.xml

이어서 sitemesh와 관련된 설정을 해줘야 합니다.

이 부분에서도 맨 위의 <property> 부분의 value만 맞춰서 적어주시면 되는데요. 

기본적으로 /web/WEB-INF/ 하위에 모든 설정파일을 둘 경우, 그대로 사용하셔도 됩니다. 


3) decorator.xml

마지막으로 Decorator를 설정하는 부분을 살펴보도록 하시죠.. 

여기에서는 SiteMesh를 적용할 곳의 패턴들을 지정할 수 있습니다. 

위 예에서는 /en과 /ko 하위의 모든 파일에 sitemesh를 적용하라는 것인데요. 

excludes 를 활용해서 특정 파일이나 폴더만 제외할 수도 있습니다. 

그리고 여기에서 사용하는 defaultdir 이나 page는 SiteMesh 다운로드 및 설치에서 생성한 폴더와 파일명이라는 것을 기억해 두시기 바랍니다. 


SiteMesh를 자주 사용하면서도 한번도 정리한 적이 없었던 것 같아서 작성해봤네요. 

처음 사용하시는 분들에게 도움이 되었으면 합니다. 


Sitemesh 더 알아보기...

웹 페이지 레이아웃을 설정하는 SiteMesh 세팅 및 활용에 대하여~

Sitemesh 활용시 하단의 자바스크립트 처리하기

Sitemesh에서 메타 태그로 Decorator에 값 전달하기~






Trackback 0 And Comment 0
prev | 1 | 2 | next