본문 바로가기
카테고리 없음

2013 웹어워드 모바일 웹 빅뱅 컨퍼런스 후기

by kipfanews 2012. 11. 7.

개인블로그에서 작성한 후기를 퍼왔습니다.

2012년 10월 25일 목요일에 한국과학기술회관에서 열린 컨퍼런스에 오후 세션부터 참석하게 되었습니다.

입구에 보이는 푸른 나무들과 정자가 눈에 보여 한 컷찍어봤습니다.  밝은 오후 햇빛이 참 따뜻했죠.

점심 식사 후 오후 세션을 참석하게 되었습니다.

자주 이 곳에서 컨퍼런스를 참석하게 되네요~^^

입구에서 반겨주는 kipfa의 대표색인 붉은색과 흰색을 사용해서 만든 배너가 센스 넘치네요.

오후 첫 세션은 Daum의 한광영 디자이너님께서 강의해주셨습니다.

한광영 디자이너님의 본인이 웹을 지내온 이야기를 해주시네요.  아마 모두들 그러하듯 이런 변화가 있는 역사들을 가지고 있다는 것은 그만큼 웹이라는 곳이 참 자주 변화가 있었기 때문이죠.

이번 시간에는 특히 스마트 디바이스들이 데스크탑을 앞지리는 현황을 주간/ 일간 등 분석을 보여주십니다.
아마 사용자인 우리들도 주말에는 컴퓨터를 회사에서 접하지 않으니 집에서도 뜸하게 접하게 되고, 오히려 스마트폰을 이용해서 웹을 이용하는 빈도수가 높아지는데 이러한 상황들을 자세히 이야기해주셨습니다. (즉, 대세는 모바일입니다.)

 
모바일에서도 모바일웹과 어플리케이션을 비교해주셨는데요. 이후에는 하이브리드웹에 대해서도 자세히 설명해주셨습니다.

 
서론으로 모바일로 웹을 구현해야하는 이유를 설명해주셨고 어떠한 방법으로 모바일웹을 구현할지 길을 알려주셨으면, 본론에서는 이제 어떻게 디바이스별로 디자인을 잡아야하는지 알려주시기 시작하셨습니다.

 
모바일 화면에서 최적의 픽셀, 최적의 여백, 최적의 크기를 그렇게 해야하는 이유와 함께 상세하게 설명해주셨습니다.
레티나 디스플레이를 위한 계산도 잘 알려주셨죠.

 
이렇게 최적의 폰트에 대해서도 잘 알려주셨습니다.
이게 바로 디자이너들이 원하는 정보가 아닐까요? 디바이스별로 틀린 크기와 색감때문에 고민을 참 많이 하거든요.

 
디자인 하는 방법 외에도 소수 몇몇 고집불통 디자이너들이 들어야할 철학도 잘 이야기해주셨어요.
가장 기억에 남는 것은…
디자이너는 설계자라는 말이 생각나네요.
어느새 웹디자이너는 비주얼만 담당하여 만드는 그래픽 디자이너로 자리잡혔는데, 저도 역시 옳지 않은 모습이라고 봅니다. 내가 만들 웹사이트를 설계하며 css로 구현할 수 있고  ux 디자인과 ui 디자인을 이용하여 사용자들에게 적합한 웹사이트를 꾸며낼 수 있는 사람이 웹디자이너가 아닐까 합니다. 


마지막으로 알려주신 힌트 내년에 트렌드가 될만한 색상들을 제공하는 패션 디자인 사이트를 알려주셨어요.
http://www.pantone.com/pages/fcr.aspx?pg=21005&ca=4

위 링크로 접속하시면 됩니다. 매 계절을 앞서 미리 유행이 될 색상들을 먼저 파악하고 활용하는 센스를 갖춰보세요 ^^


오후 두번째 세션은 KTH의 지훈 PD님! 웹에서는 야무님으로 활동하시고 계시죠.
저도 야무님에게  ’제이쿼리와 제이쿼리 모바일’이라는 정규 과정을 받았었는데, 정말 자세하면서 친절하게 강의 해주셔서 참 좋아하는 강사님이죠.
하지만 이 날 강연은 아쉽게도 디자이너들에게 너무 다가설 수 없는 깊고 먼 정보를 보여주셨습니다. ㅠㅠ
물론 저야 스크립트를 짜는 사람인지라 저에겐 필요한 정보들인데 대부분의 참석자들이 디자이너들이였고 이해하기 힘들어 하더군요.

 
그래도 다 듣기 힘든건 아니였지요. 아마 디자이너 분들이라면 아이폰5에 어떻게 대응해야하는지 궁금해서 찾아오신 분들도 많으셨거든요.
바로 궁금했던 이런 비교 정보들을 시원하게 설명해주셨습니다.
그리고 아이폰 화면을 테스트 할 수 있는 시뮬레이터를 소개해주셨어요.


짠!! 보이시나요? 화면에 아이폰이 나타났죠? 바로 저화면으로 테스트 할 수 있게 제공 되더라구요.
매번 아이폰 각 기계마다 확인할 필요는 없어졌네요. ㅎㅎ 
 웹 앱 제작시 달라진 높이값을 고려하여 제작하라고 하셨어요.
그리고 스크립트로 에이전트를 인지하거나 미디어 쿼리로 인지하여 코드를 활용할 수 있게 알려주셨어요.

이 외에도 파일 업로드 & 미디어 캡쳐, 파일 API를 활용하는 방법도 알려주셨어요.
정보들을 정신없이 보느라고 사진도 못찍었어요.&&^^

 
오후 세번째 세션은 NHN의 심상민 과장님이십니다. 
바로 콜리를 이용해서 게임 만들기와 애니메이션을 구현하는 방법에 대해서 알려주셨는데요. 

콜리는 Html5를 이용해서 자바스크립트 애니메이션과 게임을 만드는 오픈소스 라이브러리입니다.
 

http://dev.naver.com/projects/collie
해당 링크를 가시면 받으실 수 있습니다. 

이 날은 디자이너분들이 대다수다 보니 게임 만들기보다는 애니메이션을 만드는 방법에 대해서 중점적으로 강연을 해주셨습니다.
강연을 시작하기 전에 http://me2.do/GuK9PaU 이 사이트를 알려주셨고 다들 접속해보았는데 온라인 체스게임이더라구요. 

여기서는 디자이너 분들이 대다수인지라 체스 게임 개발과 관련되어 준비했던 내용들을 접으셨습니다. ㅎㅎ
대신 HTML5와 캔버스를 이용해서 이미지 애니메이션 하는 방법을 알려주셨어요.
그리고 사용성을 위해서 비교 테스트를 해주시기도 했습니다. 
 ios 각 버전별 기기별 퍼포먼스 테스트를 보여주시는데 여러 오차 범위를 해결하는 방법도 최적화하는 방법도 일러주셨죠.


아이폰만 아니라 안드로이드도 대응하기 위해서 말씀해주셨는데요. 안드로이드 4.0에도 오류가 있음을 알려주셨고 주의하라 말씀해주셨어요.

이 후에도 콜리를 이용해서 이미지 이벤트 영역을 정밀하게 찾기 위한 hitArea 적용하는 것도 보여주셨어요.
신기할 따름이더라구요. 자동으로 알고리즘을 이용해서 캔버스의 이미지 영역을 확인한다는 것이요.
여튼 배워야할 것들은 많아서 일단 무엇인지 알아만 두고 공부는 천천히 하려고 합니다.

 
마지막 세션은 메가존의 임진우 팀장님이 엣지에 대해서 강연해주셨어요. 
많은 분들이 플래시를 대체할 만한 기술이기에 솔깃하신 분들도 있고 엣지에 대해서 배워보고 싶어하시는 분들도 많이 계실꺼라 생각합니다.

저 역시 액션스크립터로 활동했던 터라 엣지에 대한 정보가 목말라 있었던 찰나였죠.
팀장님께서는 동영상으로 시연화면을 보여주셨고 중간 중간 인터페이스에 대해 알려주셨습니다.

 
기존의 플래시로 만들었던 모션을 엣지로 만들수 있다는 ‘오케이~’


이미지를 불러와서 심볼화 시키는 방법을 보여주시고 계십니다. 마치 플래시와 에프터이펙츠를 합쳐놓은 듯해 보이더군요.
일전에 제이쿼리 수업에서 간간히 보았던 정보들인지라 낯설지는 않았지만, 많은 디자이너분들이 동영상만 보면서 이해하기 힘들어하시더군요.
아쉽게도 처음부터 끝까지 대부분 동영상 강좌인지라 멀리서는 잘 보이지 않더랍니다. ㅠㅠ
거기다가 설명을 메모장으로 해주셔서 다들 제대로 보지 못해 안타까웠어요.
다음에는 더 좋은 강연 기대하도록 하겠습니다.

이렇게 모바일웹 컨퍼런스가 끝났어요. 자리가 꽉찰 정도로 많이 참여하셨고 그만큼 디자이너분들이 새로운 변화에 열정을 갖고 있으면서 정보에 목말라 있다는 느낌이 듭니다.

역시 모바일 시장은 한동안은 계속 유지되리라 봅니다.

그러면 우리 실무자들도 그 변화에 완벽히 적응할 수 있도록 기술력을 배양해야하지 않을까요? 
필요한 자료는 서로 공유하면서 힘들지만 재미있는 이 웹을 같이 만들어 나가요. 

원문 : http://werty.co.kr/blog/1833