muik blog☆

공모전 참가로 여름방학 대부분을 보내고 약간은 아쉬움으로 개강을 앞두고 있었다. 마침 도쿄에 있는 반가운 친구의 연락을 받고, 또 다른 친구와 흥분된 마음에 바로 여행 준비를 했다.

개강하기 전에 다녀오려고 최대한 빠르게 바로 3일 후 항공권 예매를 했다. 준비는 바로 학교 도서관에서 도쿄 여행책 4권을 빌려 남은 3일 내내 읽었다.

출국일! 짐은 백팩하나 매고 준비를 몇일 안해서 그런지 그다지 설레이진 않았다. 또 주변 사람들이 도쿄는 서울과 비슷하여 실망할 수도 있다는 말에 큰 기대는 안했다.

하네다 공항 도착! 공항에서 친구네 동네로 가기 위해 지하철을 탔다. 우리나라 보다 훨씬 많고 다양한 지하철 라인에 놀라 걱정되긴 했지만 곳곳의 표시판과 노선도가 잘 안내해주어 큰 어려움 없이 목적지까지 갈 수 있었다.

여행 시작인 지하철 너무 재미있었다. 처음엔 어렵고 당황했지만 새로운 환경을 이해하고 적응하는 것이 어드벤쳐 게임을 실제로 하는 것 같이 흥미로웠다.

새롭고 흥미로움은 5박 6일내내 걸어다니면서 계속되었다. 지금 생각하면 어떻게 하루종일 그렇게 계속 걸어다녔는지 모르겠다. 역시 즐거운 것을 하면 고통을 잊게 되나보다..

도쿄는 나에게 서울과 엄청 다른 새롭고 놀라운 도시였다. 지하철에서 마지막 한사람까지 내릴때까지 기다리고 지하철내에서 조용한 분위기 등의 정해진 질서를 철저히 지키는 시민 의식에 놀랐다. 패션, 건물, 자동차 등의 개성이 넘치는 모습은 매우 새로웠고 일본인의 창의성에 부러움을 느꼈다. 길거리가 깨끗한 도시, 비만이 별로 없고 자전거를 많이 타는 시민들, 곳곳에서 볼 수 있는 기모노 입은 사람들 그리고 친절하게 대해주는 사람들의 모습은 나에겐 너무나 신기하고 부러운 모습이었다.

이번 여행은 많이 배우고 경험하는 즐겁고 뜻깊은 여행이었고, 친구가 이래저래 많이 사주고 챙겨준 덕분에 정말 잼있는 도쿄 여행이 되었다. 혁우야 고마워~

도쿄의 첫 모습: 아카사카 밤거리, 일본식 라면집
  

길거리, 특이한 건물들

오다이바
    

혁우네 동네 길거리, 신오쿠보 지하철
 

도쿄돔 시티
 

센소지

국립과학박물관의 로켓, 우에노 시장

메이지진구, 하라주쿠 다케시타도리

한글 표기 지하철, 신주쿠 밤거리

도쿄 도청에서 본 야경

오즈 공모전을 계기로 모바일 기기에서 쉽고 빠르게 이용할 수 있는 쇼핑 검색 웹서비스를 만들어 봤습니다.

이번 프로젝트를 하면서 UI와 UX에 대해 많은 고민을 해보는 경험이 되었답니다:)

주요 기능

• 네이버 쇼핑 검색 API를 이용한 최저가 쇼핑 검색
• 초성 입력에 대한 상품명 추천
• 검색한 상품에 대한 관심 상품 등록/제거
• 스크롤하기 편리한 스크롤 버튼
• 자동 상품 추가 검색
• 다양한 상품 표시 스타일 변경

사이트 URL: http://muik.net/shopper

자세한 정보: http://muik.net/shopper/doc.html

아르고폰(LH-2300)으로 쇼핑 해보기

스크린샷

첫 화면

초성 입력

초성에 대한 상품명 추천

"가을신상" 검색 화면

간단 스타일로 보기

갤러리 스타일로 보기

세로 모드에서 갤러리 스타일로 보기

세로 모드에서 간단 스타일로 보기

세로 모드에서 일반 스타일로 보기

세로 모드에서 첫화면

세로 모드에서 초성에 대한 상품명 추천 화면

YouTV는 모바일 기기에서 YouTube 비디오를 TV처럼 편하게 볼 수 있는 모바일 웹서비스 입니다.

사이트 URL: http://muik.net/youtv

TV처럼 편리하게 사용할 수 있게 디자인에 많은 고민을 했어요. 화면 구성은 비디오가 재생될 수 있는 꽉 찬 화면에 채널선택[C], 재생을 제어하는 버튼 3개로 꼭 필요한 기능으로 구성했고, 동작도 TV처럼 한 프로그램이 끝나면 자동으로 다음 프로그램이 재생됩니다. 물론 광고는 없고요^^

채널은 YouTube RSS로 단순한 플레이리스트가 아닌 수시로 새로운 내용으로 변경됩니다.

채널 버튼[C]을 누르면 채널 목록이 나오는데 현재 보고 있는 시청수를 기준으로 정렬되서 보이고, 사용자는 그 시간대에 인기있는 채널을 쉽게 선택할 수 있어요. 또한 사용자가 원하는 채널을 검색어를 입력하여 검색할 수 도 있고요.

채널 검색 시 채널이 없다면 자동으로 채널을 추가하여 TV의 고정된 채널이 아닌 무한 채널을 가지는 특징도 있답니다.

처음엔 터치웹폰용으로 개발하였지만 YouTube Chromeless Player가 지원되지 않아 웹뷰어용이 되었습니다. 또한 다양한 기기에서 지원되도록 W3C 표준에 맞게 개발하였고, Internet Explorer 6~7, Firefox 3에서도 잘 동작하도록 크로스 브라우징을 고려하여 개발 하였습니다.

아래의 활용방법을 보고 이용해보세요.

좋아하는 가수(이효리) 채널 보기

1. YouTV 접속
2. 왼쪽의 [C]버튼을 클릭
3. 채널목록 상단 검색창에 ‘이효리’ 입력
4. 검색 결과의 ‘이효리’ 채널을 선택

‘이효리’의 동영상을 마음껏 편하게 감상할 수 있답니다.

이외에도 좋아하는 음악, 드라마, 스포츠, 뉴스 등 다양한 채널을 마음껏 즐겨보세요~!

학교에서 nhn과 산학협력을 체결한 덕분에 지난 한달간 nhn WP(Web Professional, 웹전문가) 과정 교육을 들을 수 있었다. 이번 교육은 nhn UI 개발센터에서 개발하는 실무자 분들이 직접 강의해주어 더욱 생생한 강의가 되었다.

강의 첫 날은 양주일 UI개발센터장님의 User Interface와 웹에 대해 깔끔한 키노트를 진행해주셨다. 센터장님이라 그런지.. 뭔가 멋져보였다..

UI: User Interface

• Usability(사용성) - 사용하기 쉽게
  • Functionality - Usability tradeoff
• Accessibility(접근성) - 많이 사용되게
• Affordance(행위유발) - 특징 고려하여..

웹은 협력을 배워나가는 우리 능력 그 자체

그리고 이날 가장 강조하신건..

책 많이 보기!

이날 추천하신 책은..

• 조엘 온 소프트웨어
• 웹 2.0 경제학
• 구글 아마존화 하는 사회

덕분에 책 한권이라도 더 읽게 되었다. ㅎㅎ

둘째날부터 본격적인 UI 개발 교육이 시작되었는데 조호영 Flash UI 개발팀장님이 맡아주셨다. 짧은 일정으로 Flash가 무엇이고 어떤 것인지 그리고 무엇을 할 수 있는지에 대해 알려주셨고, 대학생들에게 도움이 될 많은 이야기를 해주셨다.

그 중 가장 기억에 남는 이야기는..

단지 취직하려 하지 말고 내가 하고 싶은 것, 잘할 수 있는 일을 하자.

예전부터 꿈꿔오던 것은 내가 하고 싶은 일을 하며 즐겁게 사는 것이었다. 하지만 역시 졸업할때가 다가오니 취업의 압박에 부담을 가지게 됬지만 이 말을 듣고 힘이 되었다.

회사가 좋은 것은 전문가들과 일하고 물어보며 함께할 수 있다는 것

나와 비슷한 사람들 그리고 많은 전문가들과 함께 한다면 잼있을 것이라 생각이 들었고 지원동기가 하나 늘었다.

가르치지 않고 할 수 있는게 좋은 UI

Flash 교육을 마친날 팀장님이 한턱 쏘셨다. 인원이 12명이나 되는데 2차까지 넉넉히 사주셨는데 역시 팀장님이라 연봉이 쫌 센듯.. 역시 술자리에서 밤새 많은 이야기를 해주셨는데 회사와 Flash에 대한 열정과 애정이 대단했다.

다음 과정은 웹표준화팀장이신 박태준님이 웹표준화에 대해 강의해주셨다. 웹표준화는 예전부터 이슈가 되긴 했지만 요새야 보편화 되고 있는거 같다. nhn의 웹표준화팀은 우리나라 최초로 전문적으로 웹표준화를 실현하는 팀이고 박태준님이 직접 팀을 만들었다고 한다. 남들이 하지 않는 것을 처음하면서 많은 어려움이 있었던것 같고 지금은 많은 것을 효율적으로 바꾸고 좋은 성과를 내고 있는 것 같아 대단했다.

웹표준화를 통한 이점

• 트래픽 감소
• 페이지 로딩 제어
• 워크 프로세스 병렬화

웹표준화를 통해 네이버 트래픽이 줄었는데 방문자가 많다보니 그 양이 엄청 줄었고 비용적으로 상당히 절감하게 됬다. 테이블 레이아웃이 아닌 div 레이아웃으로 로딩 순서를 제어가능하게 됬다.

가장 인상적인 효과는 워크 프로세스 병렬화였다. 보통 웹 프로젝트는 기획->디자인->개발->.. 의 직렬화 였다. 하지만 ‘마크업 개발’ 단계를 추가로 디자인과 개발을 동시에 병렬적으로 수행하여 개발기간을 단축시키고, 디자인과 개발 사이에서 생기는 문제를 상당부분 해소한다. 실제로 nhn에서 업무에 적용시켰고 초기지만 개발기간을 단축시키는 성과를 이뤘다고 한다.

다양한 XHTML, CSS팁은 상당한 창의성이 독보였고, 팀원들을 위해 제작했다는 동영상을 보고 웹표준화팀원들은 팀장님과 비슷하게 참 잼있고 활동적인 팀인 것 같다. 그 이유는 아무래도 다른 개발팀과는 다르게 절반이 여성이라..

마지막은 Ajax 교육으로 항상 글로만 보던 ‘행복한 고니‘님 이신 Ajax 개발팀의 김태곤님이 맡아주셨다. 몇년전부터 phpschool을 통해 명성을 알고 있었는데 실제로 보니 신기했다. Javascript의 지존으로 생각했던 그 분은 예상과는 달리 젊은 분이었고 ‘got linux?‘ 검정 티셔츠 입은 모습이 멋졌다.

자바스크립트에 대한 책으로는 JavaScript: The Definitive Guide 을 추천해주셨고 얼마전에 ‘자바스크립트 완벽 가이드’ 한글 번역본도 나왔다. 이 책 한권이면 자바스크립트 개발하는데 든든한 힘이 될 것 같다.

ECMAScript

자바스크립트의 역사를 알아보면서 Javascript는 ECMAScript라는 것을 알았다.

It’s NOT simple.

자바스크립트는 간단하고 쉽다고 인식 되어 있는데 그렇지 않다.

자바스크립트 게임 추천 사이트

http://blog.nihilogic.dk - 자바스크립트를 이용하여 다양한 게임을 만드는 사람 블로그이다. 게임을 해본 후 자바스크립트에 대한 기존의 상식이 깨지게 되었다. 캔버스를 이용해 이미지를 안쓰고 직접 그리고 3D게임도 구현했다. 파이어폭스를 이용해야 게임을 빠르고 원할하게 즐길 수 있다. 14kB 자바스크립트로 구현한 마리오 게임 해보기

엘리베이터 - Javascript 실습 과제

둘째날 setTimeout을 이용하여 애니메이션을 구현하는 걸 실습 해본 후 흥미로운 과제를 내주었다. 엘리베이터를 setTimeout을 이용하여 자바스크립트로 구현하는 것이다.

Elevator in Javascript

처음엔 간단해 보였지만 실제 엘리베이터처럼 동작하려면 고려해야 할 것이 많았다. 단순한 애니메이션 과제를 하는 것 보다 훨씬 잼있었다. 애니메이션 실습해 보려면 엘리베이터 만드는 걸 개인적으로 강추한다. 이 과제가 원래 입사지원 문제로 제출했다가 떨어졌다고 한다.

Javascript Debugging

Firebug는 Firefox 플러그인으로 자바스크립트 디버깅을 할 수 있는데 break point를 찍을 수도 있고 profile로 실행로그를 보는 등 정말 좋은 유용한 기능을 보고 놀랐다. 그리고 IE에서 동작하는 IE Developer Toolbar가 있었고 다양한 디버깅 툴을 알게 되었다.

한달간 총 12일의 짧은 기간이었지만 새롭고 즐거운 교육이었다.

얼마 전 다음 UI Devday에서 UI개발에 급 관심이 높아졌는데 이번 UI 개발 교육으로 더욱 흥미가 높아지고 잼있어졌다!

몇일 전 오랜만에 누나랑 코엑스 메가박스에 영화보러 갔다. 에스컬레이터를 내려와 메가박스 입구에 근처에 대형 스크린의 YouTube 포토 서비스가 눈에 띄었다. 터치 스크린으로 동작하게 되어 있었고 간단하고 쉬운 UI로 다양한 UCC 동영상을 쉽게 볼 수 있었고, 또한 사진도 찍을 수 있었다.

사진은 단지 몇번의 터치만으로 쉽게 찍을 수 있었고, 인화를 예상했지만 디지털 시대에 맞게 이메일로 보내주었다.

이 날 본 영화는 ‘원티드’로 내용은 이해되지 않는 부분도 있고 좀 이상하긴 했지만, 액션은 정말 멋있고 역시 안젤리나 졸리.. 쩔었다.

돌아오면서 누나가 얼렁 남친이 생기길 바랬고, 포토 서비스를 이용해보면서 앞으로 계획 중인 프로젝트 아이디어에 큰 도움이 될꺼 같은 느낌이 들었다.