Mar 28
alonesUncategorized apple, camera, fx, image, image processing, ios, iPad, iphone
Camera+ 는 (이 글을 쓰는 순간에도) 미국 유료 전체 순위 5위에 꾸준히 머물러 있습니다.
Camera+는 기능도 기능이지만 UI가 너무 매력적이어서 자주 거론하고 배울려고 하고 있습니다.
글을 본지는 조금 되었는데, 너무 좋아서 소장하고 있다가 포스팅합니다. ^^;;
(특히 iPhone에서는) 개발자와 디자이너가 (또 기획자가) 긴밀하게 개미처럼 소통해야하는지 느끼게 하는 글인 것 같습니다.
(베르나르의 소설 개미에서 개미들은 더듬이를 통해서 생각을 완전 공유한다고 합니다. )
이 글은 Camera+를 개발한 팀에서 FX 효과를 어떻게 만들었는지 9단계에 걸친 자세한 설명과 동영상, 코드 예제까지 아주 친절하게 썼습니다.
과연 저렇게 자신들의 노하우를 공개할 수 있을까? 라는 생각이 들게 합니다. 그만큼 자신감이 있고 또 공유를 통한 더 발전을 꾀하기 위해서겠죠.
아래와 같은 멋진 FX를 만드는 과정입니다 (자세한 것은 원문을 보시고 여기는 간단히 정리만 하겠습니다)
Step 1: Concept
일반 사진 중에서 멋지게 잘 찍은 (또는 오래되어서 그 자체로 멋진 FX가 가미된) 사진을 선택합니다.
Step 2: First draft of the formula
포토샵으로 iPhone의 사진을 이용해서 color, contrast, tone등을 조절하면서 Step1에서 선택한 사진과 유사한 효과를 낼 수 있는 공식을 도출해 봅니다.
Step 3: Testing
공식을 만들고 나면 수백 장의 iPhone 사진으로 테스트를 해봅니다. 그리고 결과가 좋지 않으면 다시 Step 2로 돌아갑니다.
Step 4: In-app testing
코드로 Draft 버전의 FX code를 만들어서 App 내에서 테스트를 해봅니다.
Step 5: Wolfgang creates textures
이 부분에서 저도 좋은 아이디어를 얻었는데요, 포토샷을 이용한 공식 이외에도 이미지 위에 올린 Texture Layer를 만들어 봅니다.
(비디오를 보시면 바로 이해가 가십니다)
Step 6: Finalizing the FX formula in Photoshop
Step5의 texture를 적용하면서 포토샵의 공식을 조정해서 최종 본을 만들어 냅니다.
Step 7: Karl codes magic
FX로 사용할 코드를 만들어 냅니다.
Step 8: Karl optimization
코드 최적화를 통해서 성능 최적화를 합니다.
(이 부분은 사진 관련 앱을 해본 저로써는 정말 동감하는 부분입니다)
Step 9: Ship it!
최종으로 앱에 반영하겠죠. ㅜㅜ 예제 코드도 첨부해주는 Camera+에 감사할 따름이죠.
[후기]
이와 같은 과정은 디자이너 혼자, 개발자 혼자, 또는 같이라도 긴밀한 협업 없이는 힘들 것입니다.
포토샵으로 공식을 만들고, 수백장의 아이폰 사진으로 테스트하고, 코드로 만들고, 또 테스트하고, Texture를 만들고, 또 공식을 보정하고, 또 테스트하고, 코드를 만들고, 최적화하고…
고, 고, 고,….. 그런 긴 과정에서 하나의 멋진 FX를 만들어내고 있습니다.
Camera+를 보면 딱 짚어서 말하기 힘든 UI의 부드러움과 사용의 편리함을 보면, 그들의 이런 노력과 열정은 앱 전반에 있는 것 같습니다.
(e.g. Indicator 하나를 돌릴 때도 indicator가 작아진 상태에서 커지는 애니메이션을 통해서 indicator가 타나난다든지..)
Aug 17
alonesiphone alpha, bitmpa, colorspace, greysacle, image processing, iphone, iphone_dev, UIImage, 아이폰, 애플
네.. 제목처럼 해주는 것을 예제로 만들어서 첨부해봤습니다.
greyscale은 image processing의 한 예를 보여준 것이고, UIImage에서 pixcel 정보를 가져와 bitmpa으로 이미지 처리를 하고 다시 UIImage를 반환해주는게 의미를 더 가질 것입니다.
UIImage에서 bitmap을 만들 때, colorspace나 alpha 등의 bitmpa 정보 설정에 삽질을 좀 해서 정리해서 올려봅니다.
AloImageProcessing가 UIImge를 받아서 greysacale을 하고 UIImage를 반환해주는 녀석입니다.
outputImageView.image = [[[imageProcessing setImage:sourceImageView.image] greyscale] image];
-_-;; 요즘 손담비님이 좋아져서 ㅋㅋㅋ 아래와 같이
![[iPhone][Tutorial #5] Http Request결과를 JSON으로 쉽게 파싱 해보기](http://alones.kr/wp-content/plugins/wordpress-popular-posts/no_thumb.jpg){kind=small}