구루의 기술뉴스 ( GuruNews ) 70회차 입니다.

아이폰5 의 출시와 함께 다양한 방면에서 나오고 있는 iOS 6의 변경점들에 대해 정리한 글들을 메인으로 선정했습니다.

[ 모바일 – 아이폰/안드로이드 ]

• 아이폰5/iOS6 의 HTML5 새기능들 정리 MediaCapture&File API 를 이용한 파일업로드와 카메라제어,Web Audio,CSS3 필터,풀스크린 지원,애니메이션 타이밍 API 등
• iOS6 에 추가된 Smart App Banners 사용방법 과 제한점 메타태그 한줄로 사용가능. URL로 인자도 넘길수 있고, 아이폰앱의 웹 랜딩사이트에는 필수 아이템이 될듯
• iOS6 의 사파리가 POST 메시지를 캐슁하는것 때문에 다양한 문제 발생중 Ajax에서도 문제가 발생하므로, 모바일웹/하이브리드앱에선 필수체크 해야할 듯
• 사소한 것 까지 짚고 넘어가는 iOS 6 사용팁
• iOS6 의 iMessage앱이 각 연락처별로 키보드세팅을 저장했다가 마지막에 사용한 키보드를 불러내준다고 2개이상의 언어로 여러 국가의 사람들과 대화를 하는 사람들에게는 아주 유용할듯. 디테일!
• The Amazing iOS 6 Maps iOS6의 지도를 놀리는 사이트
• Android niceties – 안드로이드 앱도 이쁠수 있다. 멋진 안드로이드 앱 화면만 모아놓은 사이트

[ 웹사이트, 웹서비스, 웹기술 ]

• 아이폰5 웹사이트 분석 video태그를 쓰지않고 JPEG/JSON/Canvas를 이용해서 비디오를 보여주네요.
• GIFSockets – AnimatedGIF 를 이용한 실시간 커뮤니케이션 라이브러리. 만우절 장난같지만 특별한 용도로 쓰임이 있다고..
• GitHub가 Command Bar 기능을 소개 UI의 상단 검색창에서 다양한 GitHub 기능을 커맨드 라인처럼 이용가능. 요즘 가장 Geek 한 회사가 GitHub인듯
• Vimeo 가 작은 금액을 보내서 비디오 제작자를 후원할 수 있는 Tip Jar 서비스를 오픈 2013년에는 Pay-to-View 서비스까지 오픈할 예정이라고
• How To Build A Trustworthy Website – 신뢰할 수 있는 웹사이트 만들기 국내사이트들은 Reputation ( 사용자수/프레스평가/추천사 등) 을 디자인으로 승화시키는 것에 약한 듯
• Responsive Patterns – 반응형 디자인 패턴 모음 사이트
• PNG와 프레임간 차이값,JSON 메타데이터를 이용해서 애니메이티드 GIF와 비슷한 효과 만들기 Animated GIFs the Hard Way SublimeText 홈페이지에 있는 애니메이션이 이거였군요. 파이썬 스크립트도 공개

[ 프로그래밍/HTML5/CSS/Javascript ]

• Bootstrap Form Builder – 부트스트랩 테마 사용자를 위한 Form 화면 드래그&드롭 생성기. 부트스트랩이 점점 더 편리해지는군요.
• Teaching Materials – 웹 개발자 양성을 위한 기초 온라인 교육과정. HTML & CSS , Javascript 까지 나와 있네요
• jQuery Gantt 에디터– JSON Import/Export,Undo/Redo지원,국제화,서버동기화 까지 가능한 간트차트 오픈소스. MIT 라이센스라 좋네요 😉
• Fokus – 문장/객체를 선택하면 그부분을 제외한 영역을 흐리게 만들어주는 하이라이트 효과 JS 라이브러리. Hakim 아저씨의 새 작품. 깔끔하네요
• Stellar.js – 모바일 호환되는 Parallax 스크롤링 라이브러리
• Reveal.js – CSS 3D를 이용한 HTML 기반 프리젠테이션 프레임워크. 이걸 이용해 만든 HTML편집이 필요없는 온라인 슬라이드 에디터 rvl.io
• Divshot – 웹앱을 위한 인터페이스 빌더. 부트스트랩 기반의 드래그앤 드랍 웹UI 에디터. 현재 베타라서 초대신청만 가능

[ DB,클라우드,웹서버 기술 ]

• Gith – Node.js 용 GitHub WebHook 모듈. 깃헙 푸쉬할때 훅킹해서 데이터를 전달받는 기능을 위한 모듈. GitHub를 사내시스템과 연동해서 사용시 쓸만할듯

[ 추천글 ]

• 웹을 지탱하는 기술 인터넷의 역사부터 웹의 탄생, HTTP와 REST등 현재의 웹을 이해하는데 필요한 것들을 정리해봤습니다. 웹의 기반기술을 제대로 아는 것이, 좀더 웹을 진지하게 접근하는 것의 시작이라고 생각합니다

피드백 환영합니다!
제 블로그를 RSS리더에서 구독하시거나 , 제 블로그를 이메일로 구독하실수 있습니다

제가 감수를 했던 멘토르 출판사의 “웹을 지탱하는 기술” 책 내용을 가지고, 발표를 할수있도록 슬라이드를 만들어봤습니다. 학교에서 JSP수업을 진행하기에 앞서서, 아직 웹에 대한 기초가 부족한 친구들을 위해 설명하려고 만든 자료입니다.

현업에 계신 개발자 분들은 다들 아시는 내용이겠지만, 정작 우리 주위엔 웹을 많이들 쓰고, 관련해서 일을 하면서도 웹의 내부에 대해서는 잘 모르고 있는 사람들이 많습니다. 대학에서 이 부분을 따로 교육하기엔 너무 기초적일 수도 있는듯 해서, 교육과정에는 정작 잘 없는 것 같구요.

간단하게 인터넷의 역사부터 웹의 탄생, HTTP 와 REST 등, 우리가 현재의 웹을 이해하는데 필요한 것들만 간단히 정리하려고 했는데, 하고 보니 69페이지나 되는군요. 웹에 대한 기초를 잡는 스터디용 자료로 활용하시면 좋을 것 같습니다.

2~14 페이지까지는 강원대학교 문양세 교수님의 웹 프로그래밍 실습 수업자료에서 발췌하였습니다.
( 전 예전에 받아둔건데, 지금은 링크가 닫혀있네요. )

구루의 기술뉴스 ( GuruNews ) 69회차 입니다.

오늘은 SEOMOZ 사이트에서 정리한 “Google Algorithm Change History” 글을 메인으로 선정했습니다. SEO에 관심있으신 분들은 꼭 체크해봐야할 사이트입니다.

[ 웹사이트, 웹서비스, 웹기술 ]

• 구글 검색 알고리즘 변경의 역사 공식자료는 아니지만 외부에서 이정도 자료들을 정리했다는것이 대단. 매년 구글이 5~600번씩 검색알고리즘을 변경하여 SEO에 영향을 주기때문에 해외 웹 사이트 관리자에겐 주요 관심사
• Zapier – 업무시스템간의 연동을 위한 쉽고 편하지만 강력한 매쉬업 서비스. 엔터프라이즈용 소프트웨어 개발회사라면 눈여겨 봐둘만 한 서비스인 것 같습니다
• 멋진 SaaS를 만드는 8가지 눈에 확띄는 가치제안/액션 제시/이미지로 보여주기/설명 비디오/찾기쉬운 컨택정보/동작하는 데모/무료 트라이얼/그리고 돋보이게 하는 필수불가결 요소(서비스/팀/보안..)
• 포스퀘어의 Connected App 성공사례들 체크인하는 사람에게 도네이션 기능을 주는 Snoball/바에 체크인시 맥주정보를 트래킹하는 Untappd/건강한 음식을 추천해주는 Eat This,Not That
• 구글 스프레드쉬트에도 토론기능이 추가 각 셀당 코멘트를 달수 있고, 멘션 기능도 동작. 최근 구글앱스 스크립트의 성장을 비롯해서, 이렇게 기능을 착착 붙여나가는 구글이 정말 무섭네요

[ 모바일 – 아이폰/안드로이드 ]

• 9/12 이후 아이폰 라인업은 어떻게 될것인가 예상 3GS는 선불용이 되고, 무료폰이 4 가 될지, 4S가 될지. 어쨋든 3년반된 3GS가 계속 살아남을것 같다에 한표
• PMCalendar – iOS용 팝업캘린더 오픈소스. 여러개의 날짜 선택기능 제공. iOS 기본캘린더와 비슷한 테마 지원

[ 프로그래밍/HTML5/CSS/Javascript ]

• Data::Anonymization – 사용자데이터를 추출해서 퍼포먼스 테스트/데이터 분석등 진행시 주요 개인정보들을 익명화 해줄때 쓰는 루비기반 툴
• Enquire.js – 반응형웹사이트 만들기를 도와주는 가벼운 JS 라이브러리. CSS MediaQuery 조작이 쉬워집니다
• F2EM – A Front End Engineer’s Manifesto “USER FIRST” , “SIMPLICITY IS RESPECT”
• BigScreen – Full Screen API 를 쉽게 사용할수 있도록 해주는 자바스크립트 라이브러리
• XHR2 – 흔히들 AJAX 2 라고 부르는 XMLHTTPRequest Level 2의 추가기능 에 대한 소개. 리퀘스트타임아웃/바이너리 데이터 전송/데이터 전송 상태 모니터링/안전한 CORS
• iOS 웹앱에서 네이티브 느낌 내기 위한 팁 10가지 3D트랜스폼 미리적용해두기/요소 가릴때도 3D트랜스폼/이미지는 CSS3 캐슁/벨로시티 스크롤링/화면 벗어난 큰 이미지 숨김/탭이벤트 오버레이&탭 하이라이트 제거
• node-dbox – 드롭박스 API 사용을 위한 Node.JS SDK
• 백악관이 첫번째 GitHub 리포를 개설. 드루팔 기반의 청원 사이트 웹앱 Petition 운영중인 We the People 의 코드를 공개해서 다른 정부/조직들이 시민참여용도로 사용하기 바란다고

[ DB,클라우드,웹서버,DevOps ]

• Sysadmin 이 알아야할 10가지 백업은 복원가능할때만 좋은것/모니터링이 안된다면 프로덕션상태가 아닌것이다.. 어느회사에나 적용가능한 문구들
• GitHub사이트를 빠르게 유지하는 방법 퍼포먼스 대쉬보드/미션컨트롤바/New Relic, 그리고 슬로건 “It’s not fully shipped until it’s fast”
• Etsy는 어떤 하드웨어를 쓰는가 HP DL380/2U에 4개노드(CPU2개짜리),12개의 HDD가 꼽히는 슈퍼마이크로 6026TT-H6RF/하둡용은 2U에 HDD24개 꼽힘. 이런정보도 재미나군요
• SoundCloud의 아키텍처 변천사 아파치/레일즈/MySQL 에서 시작해 nginx/HAProxy/RabbitMQ/Varnish/멤케쉬디/카산드라/ElasticSearch 등을 붙여간 내역을 잘 정리했네요
• Eureka – 넷플릭스가 공개한 클라우드 로드밸런싱 & 페일오버 툴. 프록시방식인 AWS ELB에 비해 REST기반의 C/S 방식으로 인스턴스/호스트 레벨에서 처리되어 부족한 갭을 메워줌

[ 추천글 ]

• UX가 대체 뭐길래.. 그게 왜 필요하다고? Boersma의 T-Model 을 사용하여 UX의 역할을 보다 실무적으로 정의한 글의 번역본
• 팀 쿡 애플 CEO가 지독한 일벌레라는데.. “태어날 때부터 위대한 사람은 없다. 위대한 사람은 남들이 자고 있을 때 위대해진다.”

피드백 환영합니다!
제 블로그를 RSS리더에서 구독하시거나 , 제 블로그를 이메일로 구독하실수 있습니다

OSX 의 iTunes 에서 한글 MP3 가져올 때 태그정보 깨질경우가 종종 있는데 처리방법입니다.

Unicode Rewriter 라는 프로그램을 다운받아서 설치합니다.
Java 로 된 재미없는 UI 를 가진 프로그램입니다만, 잘 동작합니다.

메뉴에서 Encoding->East Asia->Korean->EUC_KR 을 선택합니다.

이제 파일/폴더를 리스트에 끌어다 놓고 Convert 하면 완료. 즉시 MP3 가 변경됩니다.

예전에 윈도우즈에서는 비슷한 일이 있을때는 무료인 MP3Tag 프로그램을 사용했습니다만, 요즘은 맥으로 기본 환경을 바꾸고 있는지라 비슷한 방법이 없나 해서 찾아봤습니다.

추가 2012-09-05
트위터 에서 NCrash 님께서 제보해주셨는데 Mac OSX 용으로 포팅된 MP3Tag 버전이 있네요. 윈도우즈용 소프트웨어를 리눅스에서 실행하기 위해 사용하던 Wine 프로젝트에 기반하고 있는 무료엔진인 Wineskin 을 이용하고 있습니다.

구루의 기술뉴스 ( GuruNews ) 68회차 입니다.

오늘은 새로 업데이트된 Facebook iOS앱의 개발에 관련된 이야기를 상세히 소개한 Facebook Engineering 페이지의 “Under the hood: Rebuilding Facebook for iOS” 글을 메인뉴스로 선정했습니다. 앱 하나이긴 하지만, 사용자수로는 전세계에서 가장많은 사용자를 가진 모바일 앱이기도 합니다.

[ 모바일/프로그래밍/HTML5/CSS/Javascript ]

• 페이스북 새 iOS앱의 개발이야기 Three20 프레임웍 제거 / 그동안 다양한 플랫폼을 지원하기 위해 HTML5덕을 봤지만, iOS 사용자의 성향을 고려해서 속도에 주안점을 두고 주요부분을 네이티브로 재개발/하지만 빨리 자주 바뀌는 부분들은 Fallback Renderer와 함께 HTML5코드 계속 사용예정.
• Rootbeer – 자바 바이트코드를 GPU에서 실행할수 있도록 CUDA 코드로 변환해주는 GPU컴파일러. 어느 정도의 자바코드를 지원해 주는지 궁금하군요
• JSbooks – 자바스크립트 관련 무료 이북 들만 모아놓은 사이트. 자바스크립트 언어 관련 외 Node.js/Coffescript/Backbone 포함 24종
• Node.js 프레임웍 비교 Derby/Meteor/SocketStream/TowerJS/Express 의 장단점 정리. 아래에 있는 선택 흐름도가 재미 있으면서도 유용하네요
• 부트스트랩용 날짜/기간 선택 컨트롤 기 설정된 어제/오늘/7일간/30일간/이달/지난달 등을 불러오는게 있어서 통계화면에 쓰기 좋을듯
• FTPM – 구글 웹폰트 & Node.js 기반 폰트 패키지 매니저. 시스템 폰트관리/웹폰트(woff)생성/폰트용 CSS 또는 DataURI 생성 지원
• Avgrund – CSS 트랜스폼과 필터를 이용한 깔끔한 모달 윈도우 처리
• Infinity.js – 웹을 위한 UITableView. 이미지를 포함한 긴 리스트의 스크롤 속도를 빠르고 부드럽게 만들어줌. 데모 필감. 어떻게 한건지 정말 빠르네요
• justGage – 멋진 게이지를 보여주는 자바스크립트 플러그인. Raphaël 기반. SVG로 되어있어서 거의 모든 브라우저에서 동작. 관리자 화면에 좋을듯
• 구글 Apps Script를 이용하여 구글 Analytics 리포팅을 자동화 하기 GA 자료에서 원하는 데이터만 뽑아서 대쉬보드 만들기가 정말 쉬워졌네요

[ DevOps,DB,클라우드,웹서버 기술 ]

• Digg v4 의 아키텍쳐와 프로세스 40명에서 14명으로의 조직 구조의 변화/코드리뷰와 Continuous Deployment/Thrift활용 및 새 기능의 AB 테스팅 등에 대한 상세설명
• [DevOps] Chef’s Concepts.1 – Chef.series #2 쉐프 연작글 2번. 쉐프의 Cookbook 컨셉에 대해 자세히 알아봅니다.
• 아마존 백업전용 스토리지 서비스 Glacier. 저장은 한달에 1테라당 $10 정도라 싸다고 하지만, 읽는 비용이 매우 비쌀수 있어 (3테라 읽을때 2만불?) 숨겨진 지뢰가 있을지도 모른다고 Is There a Landmine Hidden in Amazon's Glacier?
• Cassandra Summit 2012 비디오와 슬라이드 공개
• DevOps is about Collaboration; NoOps is about Automation. NoOps is The Peak of DevOps.
• Buffet – 성능에 중점을 둔 Node.js 기반 스태틱 파일 서버. 모든 파일을 메모리로 로딩해서 서빙. Varnish를 앞에 두는 것 보다도 빠르고, 자주 디플로이 할때는 이게 더 편하다는 설명..

[ 추천글 ]

• [kth 모바일 리포트]앱스토어! Blue Ocean인가? Blood Ocean 인가? 계속 경쟁이 치열해지는 앱스토어. 지난 1년반동안 300위까지의 통계를 분석한 자료를 공개합니다

피드백 환영합니다!
제 블로그를 RSS리더에서 구독하시거나 , 제 블로그를 이메일로 구독하실수 있습니다