I became interested in computer graphics with painting software Dr.Halo and Deluxe Paint, during the era of XT computers. I was fascinated with computer hardware & software, especially curious about how they construct beautiful graphics. The curiosity inspired me to study electrical engineering at Korea University, from semiconductor to operating system and I started working in the web design and development fields in 1999 with dot-com startups and internet boom.

After the military service and receiving my bachelor of engineering degree from Korea University, I worked at Samsung Electronics as a software research engineer, in the Telecommunication R&D Center, focusing on the user interface for GSM/WCDMA and experimental mobile phones. My collaboration with the creative team and previous experience in web design fueled my desire to become a designer.

From 2007 to 2009, I studied visual communication design at SADI(Samsung Art & Design Institute) and now I am studying at Parsons The New School for Design, in the MFA Design & Technology program. My current research interests include designing applications for evolving new mobile platforms, data visualization and 3D graphics. I’m currently working on diverse UI design projects and mobile Apps for iPad, iPhone and Android.

View Resume/CV | Download PDF

Featured Works

http://www.twitknoll.com

Background

Twit Knoll is my project initiated from the Major Studio, last semester (Prof. Katherine Moriwaki) and I introduced initial prototype on May. This project started from my interest ‘warm interface’ and includes my research area such as visualizing live data with API, UX on evolving mobile platforms, 3D graphics. You can find the concept and design process documentation on this page.

http://www.cre8ive.kr/blog/?cat=311

In this summer, my primary objective was to finish core functions and to launch the initial version of Twit Knoll. Through the progress, there were a lot of unexpected issues and I had to refine the design continuously. Especially, continuous memory warning from iPad’s limited memory made me afraid of using  images and animations. Even though iPad’s screen is large and support 1024×768px resolution, the RAM is 256MB. Supporting both landscape and portrait mode was also big issue – it was not simple as I expected because I used images to construct all of the screen.

First I finished the Friend Timeline scene and brought this structure to the Public Timeline. Then I designed and developed Mentions and Direct Messages. Finally, I designed and developed User Profile scene. In this process I also continuously modified and rendered 3D graphics for rich user experience. Of course there are many features that I had to exclude in this version because of technical and design issues. Here are some of the history of my summer progress.

Tweet Message Box and Readability

After demonstrating the first prototype in April, I started design and develop ‘Friend Timeline’. During the development, I continuously refined the design and the final design is somewhat different with the initial design. In the aspect of reading tweets, there were issues of readability and I iteratively revised the design of message balloon box and the typefaces. I initially used UIWebView – a UI element of iOS – to detect user names and URLs. However I had to changed this to use UITextView because the Web View look bad when it was scaled down (text was shown without anti-aliasing). (To give the users the sense of distance, I used scaling transform for the birds and their message boxes.) UITextView supported anti-aliasing with scaled down size and showed good quality of text and enhanced readability.

Secondly, I also had to revise the design of message box. I had to consider the width of paragraph and also had to think about the overlapping relationship with other birds and their message boxes. I used Korean, English and Japanese to design the text box.

<Initial prototype on draft sketch – Had to think about the location of message box>

<Initial prototypes – Message Box design – Testing the width and height of text>

<Initial prototypes – Message Box design – Overlapping>

<Message Box design – Revised>

Tweet UI

In the initial design, I located the buttons for RE(Reply), RT(Retweet), DM(Direct Messages) and PF(User Profile) in the message box. But this looked somewhat complex and I wanted to give birds touch interaction. Then I became to think about my behavior of reading and browsing tweets. I usually just read and scroll the tweets. I use the buttons only when I met good tweets to share or when I have to reply to someone. So I decided to hide the buttons and to show it when the user touches birds. This made a good reason for the users to interact with birds.

<Tweet UI – Separated with Message Box>

<Tweet UI design – Revised>

Multiple UI orientation support – Landscape and Portrait

For every scenes, I had to think about the portrait mode (I started this project only in landscape mode). To reduce the amount of memory usage, I had to use one background image for both orientation. Since the display resolution of iPad is 1024×768px, I made 1024×1024px sized background image to support both orientation. But in the entrance of each scene, I wanted to have some transition animations and I utilized hidden length of the image for panning animation. With this 1024×1024 background images, I had to adjust position of birds and message boxes. For the Friend Timeline scene, I used different background images for landscape and portrait to give more rich user experience.

In the technical aspect, I had to get two UI state of the device – previous orientation of device before launching TwitTown, current orientation of device. For previous orientation of device, I could use the orientation of status bar of iOS. For the current orientation of device and rotation event, iOS provided status information and callback methods.

UIInterfaceOrientation interfaceOrientation = [self getDeviceOrientation];
UIInterfaceOrientation interfaceOrientation = [[UIApplication sharedApplication] statusBarOrientation];
- (void)willAnimateRotationToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation duration:(NSTimeInterval)duration

<UI design for landscape and portrait orientation>

Bird character animation

Subtle animations can enhance the user experience and immersiveness but on iPad, it costs memory. For 1 second short animation, we need 30 sequential png images. So I optimized the number of frames, size of the images(birds) and type of animations. Finally, I made three different types of animation for birds – Flying(Incoming new tweet), Speaking(Idle), Shifting(Browsing), Dancing(For touch interaction).

<Bird animation – 10 frame images for touch interaction (Total 40 frame)>

Gesture for browsing tweets

From paper prototype and iPad prototypes, user testing gave me good inspiration for browsing tweets. In the final design, I programmed gesture recognizer for both up/down and left/right direction.

Memory warnings

Memory warning was one of the most difficult hurdle for me in this project. Since all of the App is constructed with images, it uses a lot of memory. Pure 1024×1024 of background PNG image’s every file size was 1-3MB, which is huge for memory of mobile devices. Consequently, after switching between scenes, the App crashed continuously. I went through long iterative process of refactoring, optimizing the code, testing, debugging. Finally, I could resolve the problem with re-designed code with releasing and deallocating all the memories for the scenes that are not on the current screen. Endless test and optimizing with tool Instruments(Leaks/Object Alloc) was somewhat painful.

Submission

I prepared final distribution binary and submitted on August 1st, 2010. This is the icon design.

Next steps

Even though it took a longer time than I expected, it’s been a great pleasure to make small moves and improvements both in design and technical aspects. I love this project because I could enjoy every elements – 3D design, UI design, software structure design and programming. Above all, it is great to finish a huge project. However, I think this is the beginning of this project, since there are lot of exciting design elements to do. There are many fun visualization ideas that I couldn’t do because of memory issues but I think I can make it soon with optimized way. In the functional aspect, there should be the function ‘Search Users’, so that users can find a friend with names and follow. Navigating through the followers or following of a specific user is also important basic functions that I should add.

]]> http://www.cre8ive.kr/blog/?feed=rss2&p=2916 0 http://www.cre8ive.kr/blog/?p=2796 http://www.cre8ive.kr/blog/?p=2796#comments Thu, 22 Jul 2010 05:57:00 +0000 admin http://www.cre8ive.kr/blog/?p=2796 * The final title of the application has changed to ‘Twit Knoll’

http://www.twitknoll.com

Background

One of my research interests is 3D and virtual space and it always attracts me. I continuously try to bring some 3D graphics or 3-dimensional space into my design work. This interest in 3D also led me to initiate the project TwitTown for iPad. These days, 3D became another important element in movie theater and entertainment. Consumer electronics companies are competitively announcing 3D TVs and many film makers are also into making 3D movies. As a previous engineer who studied electrical engineering in college, I became to interested in the technologies. During the research, I could find the mechanism of active shutter glasses that is used in 3D TVs and some hologram technologies.

3D Movies in theater were ignited by the movie ‘Avatar’

Success of 3D Movies also brought 3D TVs into home entertainment

At the same time, a lot of design studios in Seoul, Korea are jumping into interactive design and some of design studios are using the hologram technologies in big presentations, product demos and showcases. I could have a chance to visit some of those company and introduced the technologies.

Samsung Jet presentation using 3D hologram

After these kind of interesting research about 3D technologies and their design applications, my focus moved to the 360 degree 3D panoramic world constructed by photos.  This was the example that I found on the web : a panorama made with Papervision.

http://www.papervision3d.org/demos/panorama/

Questions

Series of demos of these realistic 3D panorama virtual world inspired me to study about panorama photos. The question was simple – “How can I make a 3D panorama world with my photos and drawings?”, “I want to build my own 3D world!”

Building a prototype space

Since I’ve been interested in 3D, I was familiar with Papervision3D – 3D engine for Flash, and I started research about building virtual space. My initial prototype with simple sphere structure was like this. I just used one of my photos taken in NYC. (1504×1000px)

<You can move your mouse to change the camera view>

As you can see, the photo image was simply used for the texture of environmental sphere. After this rapid prototyping, I could see some important elements in the photo – both ends should be continuous because they will be connected. Also, it looks like the ratio of the photo is also important. Currently the image is very distorted. So I extended the photo with horizontally flipped one and tested again.(3004×1000px)

<You can move your mouse to change the camera view>

As you can see from this prototype, now I can have full 360 degree of continuous space. But the buildings and cars are severely distorted. Why?

Special method to take 360 degree photos

After some days of research, I found a website which introduces how to take panorama photos and I realized the fact that normal wide formatted panorama photos are not proper for 360 degree world. For example, these photos are just normal wide/long panorama photos.

Additionally, I could remind the planar figure of the earth.

The website, Panoguide(http://www.panoguide.com) provided diverse method of taking panorama photos and I could find the special method and devices to take 360 degree panorama photo. Basically, we have to take diverse photos from different angles then stitching software stitches the photos like these.

Do you see the difference? Yes, they have some weird distorted space but, when these images are mapped onto the surface of the sphere, it gives us perfect 360 degree panorama VR.

Unfortunately, it is not easy to make this type of photo. With wide lens camera, you have to shoot 23 photos like this.

Or use special camera like this. (Just like Google street view cam)

Then, a stitch software such as PTGUI stitches and blends the photos into texture for 360 sphere.

Ok then… How about the reverse?

After these exciting research, I started thinking about interesting topic. These photo taking methods and stitching process is to convert the real world into 2D texture (for 3D Sphere). Then would it be possible to create 2D textures not from the real world but from my drawings?
In simple sentence – “I want to create 360 VR city from my drawing”.

I thought this is possible because I could see some patterns from the 360 panorama photos. Just like the image below, I could see some hidden curves which are commonly shown in the photos of 360 panorama photos.

So I draw a rough sketch based on the curves that I draw roughly. From the Panoguide website, I found the information that the image should be 2:1, and I used 3000×1500px for the scanned image of my drawing.

<You can move your mouse to change the camera view>

As you can see, even though there are some weird spots and somewhat distorted, it show quite good 360 VR view of the street and buildings. After this, to get more accurate curve guidelines, I draw the curves from the 360 VR images like this.

<You can move your mouse to change the camera view>

Finally, my own world.

Based on previous prototypes and sketches, I draw a imaginary city and the camera (user’s viewpoint) will be located on the intersection of two streets.

This is the initial sketch to check out layout and distortion.

<You can move your mouse to change the camera view>

And this is revised my final drawing and 360 VR.

Final 360 degree VR in Full Screen : Please be patient for loading texture image.

http://www.cre8ive.kr/Projects/PanoramaVision/PanoramaVision.html

Right Click the screen and select ‘Go Full Screen’ on the menu

Application for real world : Installation for an exhibition

After this project, I was lucky to apply this experience to real installation work for an exhibition. An exhibition of cartoon artist in Korea who is famous for social cartoons. The interactive installation was designed to provide a fun way to explore his cartoon world in 360 degree panorama view. The display will be 50-inch flat panel LCD screen and I suggested an interesting interface for this installation – A trackball interface from Kensington. This interface provides visitors more familiar way to rotate the sphere view of 360 degree virtual world with same shaped, sphere. The ball is huge enough so that it works well with huge sphere of VR. The exhibition will be opened in September in Seoul, so I will not be able to see the actual users and their reactions but I’m really excited. Photos of the installation will be available soon.

]]> http://www.cre8ive.kr/blog/?feed=rss2&p=2865 0 http://www.cre8ive.kr/blog/?p=2769 http://www.cre8ive.kr/blog/?p=2769#comments Sat, 08 May 2010 03:03:54 +0000 admin http://www.cre8ive.kr/blog/?p=2769

Finally, bada SDK has been released to the public.
http://www.bada.com/

Even though the IDE is based on Eclipse, it runs only on Windows. I’m not sure but, this may be a limit for new developers.
Android SDK or MOTODev are also based on Eclipse and they are available both PC and Mac.
I have a number of friends who are using Mac for developing Apps for iPhone and Andorid on Mac.

So, this is the IDE – not that different with usual Eclipse IDE. The booting time of simulator was fast.
(Faster than Android, but much slower than iPhone SDK. As you know, iPhone simulator’s booting is almost instant)

Here are some of the screen shots.

 
Programming is based on C++. Just by looking at the Entry cpp file, you can see the event driven structures.

SDK also provides diverse Example application with source codes.

One of the interesting tool in the simulator is ‘Event Injector’. You can emulate events such as
incoming phone calls, SMS, GPS and Sensors.

This is the first public release of bada SDK, and I can see the possibilities.
However, the most important thing is - why would developers want to develop Apps in bada?
What would be the benefit? What kind of new user experience and developer experience it can provide?

bada platform should provide answers for these questions to attract developers. 
Needless to say - the number of available bada device on the market is the most important thing. 
And in my perspective, the Developer Experience is another important and crucial thing, just as I described before.
(Success of Apple’s App Store is not only about the UX(User Experience) – there were great DX(Developer Experience)

Somewhat faster than beta 1 in general UI interaction.

Here is the sample tweet data (one entry is one tweet)

Parsing XML with DOM method is an iterative process.
As you can see below, continuously use NodeList and Node object to explore the elements of XML document
In this example, I extracted <name> element under the <author>

]]> http://www.cre8ive.kr/blog/?feed=rss2&p=2738 1