Bonjour, I'm Gichul Roh, a UI Designer in Korea. Recently I've researching iPad Publishing and flexible layouts on multi-device.Now I’m Back to Seoul and Waiting for Next Project
I was back to Seoul city last Friday after I had finished KOC Security Management System project. In the project, I designed and developed Map Prototyping & Design Guidelines for KOC SMS for last 3 months.
In first month, analysed graphical enviroment and goals regarding KOC Security Management System.
In second month, designed two type of drafts which flush 3D version and clean & flat version.
Last month, wrote KOC Map Design Style Guide and turned over to Indian UI Designers in Kuwait.
My first Arabic life was difficult due to dry & sandy wind, but was pleased by Samsung SDS coworkers !!!
Homecoming at Apr 6
I am expected home at Apr 6, 2012 during my stay in Kuwait.
Principles of UI Design
There are three design principles to keep the identity your design: Simplicity, Clarity, and Accessibility.
Simplicity
A good design is changed to as little as possible to concentrate on the essential things. Kindly avoid an optical something confused which is disarranged. Simplicity is inevitably referred to visual simplification. It will be complemented by maximizing phases in navigation. Users want to achieve their goals quicky and easily. But system or navigation is being become more complicated than before. For this reason, they will spend too much time in looking for their goals.
Human being prefers simplicity to get a complexity.
Clarity
A easy and clear design is helpful to realize objects. A good design is to avoid cluttered decorations and is based on real-life metaphors. In other words, by maintaining the meaning of real-life, it is possible to operate systems easily with an experienced knowledge. Metaphors from real-world are interacted effectively, and are helpful to overcome linguistic and cultural barriors. For instance, many people use files to organize documents, thus they will naturally feel icons like file folders necessary.
Moreover, each UI element like menus, icons, and buttons is designed to recognize without difficulty, and to fit an innate purpose. In addition, a good layout can be showed to distinguish each area such as heading, navigation, and map background.
Everyone knows the signal of Red color means danger and emergency as anxiety.
Accessibility
You should be aware of target users who would approach easily their goals, although this is not intended for unspecified individuals. Accordingly you need to look to cultural and verbal requirements for target users. Maximizing each stage on hierarchical structures, a navigation system should be designed to reach easily their final data.
Polaris has been used by sailors as a compass for a long time.
Diether Rams’ Good Design Principles.
Now a days, famous Apple product designer, Jonathan Ive got inspirations from former Braun designer, Diether Rams.
He set up Braun’s modern design layout, and had a good influence on many product designers. Actually I love Apple’s simplicity. Recently I found his design principles when I worked design guidelines. There is need to dwell on below content.
Diether Rams’ Good Design Principles.
1. Good Design is innovative.
2. Good Design makes a product useful.
3. Good Deisgn is aesthetic.
4. Good Design makes a product understadable.
5. Good Design is honest.
6. Good Design is unobstructive.
7. Good Design is long-lasting.
8. Good Design is thorough down to the last detail.
9. Good Design is environmentally friendly.
10. Good Design is as little design as possible.
Social Commerce, Couall.com of DBC Holdings
I worked with DBC Holdings known “Cafe bene” last December 2011. Opening in March 2012, a social commerce Couall.com was developed with web standard using CSS, JQuery plugin.
You can view to b612story.com/project/coaull now.
Logo Draft for SAGE Institure
Developed draft proposals for SAGE Institute last beginning of Jan 2012.
Happy New 2012 by jquery vertion
$(document).ready(function() {
$("#2012").onload(function() {
$(this).happy("you").keep("healthy").go("well");
});
});
Flex와 Flash의 미래
잡스가 플래시를 버렸듯이 최근 발표에서도 어도비가 모바일 플랫폼 개발환경을 포기했다. 2000년 초반 플래시5의 열기로 RIA시장에까지 그 영역을 넓혀왔으나, 현재는 HTML5 등 개방형 플랫폼의 영향으로 그 입지는 점차 좁아지고 있다. 플래시는 모바일에 사실 적합하지 않다. 그럼에도 불구하고, 최근 플렉스 개발에 관심을 가지게 되었다.
태생이 디자이너였기에 멀티미디어와 데이터시각화엔 아직 플렉스가 가장 낫다고 생각한다. 멀티플랫폼 지원 또한 그렇다. 에어처럼 따로 플레이어를 설치해야한다는 단점과 넘어야할 산들이 많지만 향후 콘텐츠 분야와 N스크린에 그 가능성을 열어두고 있다.
넘어야할 산들이 많지만, 멀티플랫폼 지원과 향후 스마트TV시장의 가능성이 있기에 아직 그 가능성을 열어두고 있다. 그리고 아직 기업시장과 일반시장이 따로 있기에…
<PRE> vs <XMP>, 코드보기 구현
일전에 예제를 구현하고 그 예제코드를 보여주는 HTML문서를 만들었다. 제이쿼리나 HTML, CSS, 때론 플래시AS3 코드까지 튜토리얼이나 그 구현예제를 보면 그 HTML문서의 소스보기를 하면 대개의 경우 <pre>태그로 구현되어 있다. 때론 <textarea>로. 아니면 코드를 보여주는 오픈자바스크립트 소스인 SyntaxHighlighter를 이용한 것까지.
그런데 대부분 그 소스를 다시 복사하여 해당태그를 열고 닫기는 특수문자로 바꾸어줘야 하는 번거로움이 있다. 만일 예제문서가 수십개나 수백개가 된다면 그 또한 쉬운 일은 아니다. 매번 수정보완해야 할 때는 더욱 그렇다. 그래서, 한번 예제를 작성하고 나서 복사를 하는게 아니라, 한번 작성해서 그대로 코드를 볼 수 있게끔 방법을 같은 작업자와 그 방법을 모색보았다.
우선 DOM요소로 선택하여 innerHTML로 가져와 다시 코드를 보여주는 선택자에 innerHTML로 넣는 방식을 선택했다. 그런데, 예제코드를 작성하고 다시 <pre>태그 안에 그 예제코드를 넣는 것이 쉽지 않았다. 처음엔 <pre>쪽에 문제가 있나 싶더니, 태그를 바꾸어서 <textarea>로 바꾸어서 해보아도 코드가 변형되어 보였다. 크롬, 사파리, 파이어폭스 같은 모던 브라우저는 상관없었으나, IE 계열이 문제였다. 원인은 innerHTML자체에 문제가 있었던 것이다. alert으로 찍어보니, IE 7,8에선 원 코드자체가 제대로 innerHTML 안에 담겨지지 않았던 것이다. 그래서, 비표준 계열이지만, Plain 텍스트 형식으로 태그조차 다 보여주는 <xmp>를 이용하여 보여주는 코드에 서 반대로 예제코드에 innerHTML로 넣는 방식을 취했다. 그런다음, 중간에 태그 열고닫기 문자열은 replace문로 변환해 주었다. xmp를 사용하는 것이 비표준이라 해도 어차피 코드보기는 일반사용자를 위한 것이 아니라, 보통은 개발자들을 위한 것이니깐 크게 상관없으리라 본다.
그래서, 완성된 코드는 아래와 같다.
<!DOCTYPE html>
<head>
/// 중간생략 ///
<script>
function codeView() {
var h = document.getElementById("html_viewer").innerHTML;
var str = h.replace(/& l t ;/g, '<').replace(/& g t ;/g,'<');
document.getElementById('example').innerHTML = str;
}
</script>
</head>
<body>
<!-- 예제 코드 시작 -->
<div class="example">
<div id="example"></div>
</div>
<!-- 예제 코드 끝 -->
<!-- XMP 안에 예제 마크업 코드 삽입 시작 -->
<xmp id="html_viewer">
<div class="title_heading">
<span>산너머 반촌에는 가리온이 살지요.</span>
</div>
</xmp>
<!-- XMP 예제 마크업 코드 삽입 끝 -->
<script>codeView()>/script>
</body>
</html>
이상과 감정 사이
오랜만에 아키텍처를 봤다. IA는 아닌 듯 싶다. 우리나라는 외국과 달리 순수아키텍처를 보기 힘들다.
20말30초, 밀레니엄과 더불어 나에게도 약간의 혼돈의 시대는 있었다. 전공도 전공이거니와 개인적으로 약간 자리를 못 잡은 듯… 그 길을 빠져나오면서 이성적 방법론이랄까. 아무튼 일이나 생각에서 그런 것에 나름집착했다. 그러나 이성으로 전부 해결할 수는 없다. 일이던 일상이던 100퍼센트 정답은 있을 수 없다. 사람이 향하는 일이니. 오죽하면 감성마케팅이 있으랴. 인간이란 어떠 일이던 무릇 이성과 감정이 동시에 수반하게 되어있다. 100% 객관식이 없듯이(철학에선 주관식과 객관적 주관식만 있을 뿐이다).
이성과 감정은 뇌의 다른 기관에서 작용한다. 감정은 본능에 충실하지만, 이성 위에 지배한다고 본다. 마케팅측면에서도 감정 혹은 감성에 호소하는 기법이 더 고도의 수단처럼 보인다.
jQuery 펼침메뉴(아코디언메뉴) 구현하기
jQuery. 작년부터 이름만 알고 있었고, 사실 서버측의 query문과 관련있는 줄 알았다. 그러나, 조금 알고 보니 DOM방식과 같은 원리. 1) 선택 2) 이벤트 3) 실행 순. 여타 프레임워크보다 튜토리얼도 많고, 예제도 많은게 사실.
자세한 건 여기 www.jquery.com에서 보시길.
이번엔 jQuery에서 FAQ메뉴나 서브메뉴 구현시 활용될 수 있는 펼침메뉴(혹은 아코디언메뉴).
우선, 업데이트되는 jQuery 경로 작성
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
CSS코드
<style type="text/css">
.accordion {width:200px; border:1px solid #ccc;}
.accordion ul,
.accordion li,
.accordion p {margin:0; padding:0; list-style-type:none;}
.accordion p {padding:2px; cursor:pointer;}
.accordion a {
display:block; padding:3px 0;
border-bottom:1px sodid #ccc;
text-decoration:none;
background:#eee;}
</style>
jQuery 소스
<script type="text/javascript">
$(function(){
$(".submenu").hide();
$(".left").click(function(){
$(".submenu:visible").slideUp("middle");
$(this).next('.submenu:hidden').slideDown("middle");
return false;
})
});
</script>
예제입니다.
1차메뉴
2차메뉴
3차메뉴
Like-HTML Table 만들기, How to Make Div as Tables
지난 늦여름부터 UI 프레임워크 개발에 참여하기 시작. 가끔 마크업과 CSS의 정의나 그 본질의 쓰임새를 다시 찾아보게 됨. 그런 중 데이터테이블을 <table>이 아닌 <div>로 구현하는 방법 알게 됨.
원래 <table> 태그는 데이터 형식의 표를 만들 때 사용하고, 더이상 <td> 태그 안에 img나 div를 삽입하지 않는 게 좋음. 왜냐면 그렇게 되면 페이지 렌더링 측면에서 많은 부하 발생. 그래서 나온 여러 기법 중 하나가 <div>태그로 테이블처럼 보이게 하는 것. 물론 ul과 li나 ol를 사용해도 무방. 다만, 아래 예제는 모던 브라우저만 해당됨.
우선 HTML 마크업
<div class="div_table">
<div class="tbl_caption">테이블 캡션</div>
<div class="tbl_header">
<div class="tbl_th"><p>제목1</p></div>
<div class="tbl_th"><p>제목2</p></div>
<div class="tbl_th"><p>제목3</p></div>
</div>
<div class="table_tr">
<div class="tbl_td"><p>내용1</p></div>
<div class="tbl_td"><p>내용2</p></div>
<div class="tbl_td"><p>내용3</p></div>
</div>
<div class="table_tr">
<div class="tbl_td"><p>내용4</p></div>
<div class="tbl_td"><p>내용5</p></div>
<div class="tbl_td"><p>내용6</p></div>
</div>
</div>
CSS 코드 예제
.div_table {display:table; font-size:12px;}
.tbl_caption {
display:table-caption;
padding:5px 10px; background:#ddd;
border:1px solid #ccc; border-bottom:0;
}
.tbl_th {
background:#ddd; font-weight:bold;
border:1px solid #ccc; border-left:0 none;
}
.tbl_th, .tbl_td {
display:table-cell; width:80px; height:26px;
border-right:1px solid #ccc; border-bottom:1px solid #ccc;
}
.tbl_th:first-child, .tbl_td:first-child {
border-left:1px solid #ccc;
}
.tbl_th p, .tbl_td p { margin-left:10px; }
결과는 아래와 같이.
iPad Publicating
Currently having collecting a raw data about iPad Publicating.
We are going to update here as soon as possible.
U7 Shop was renewal
Online shop for infants & toddlers, U7 Shop was renewal in last Sep 2011. In this project, by Flash AS3.0, I developed a few UI elements and flash motion such as maincover, rotation banners, review rank, etc. You can view this site useven.co.kr
2011 3Q. Analyzing UI Elements for GSHS.
2011 Summer & Fall, Analyzing UI Elements for GS Home Shopping. Maybe I plan to work as a front-end developer for 1 year in this project.
These days I am analyzing patterns of user interface with my colleagues in domestic and foreign online shops such as Amazon, ebay, Auction Korea, gmarket, etc. Also studying DOM, jquery, and HTML5.
Hmm. So hot this summer of Seoul. Just like Bangkok’s summer.
P.S) Preparing a post about iPad Publishing ASAP.
B612Story was rechanged with Ari.
B612Story, my personal blog-type website was rechanged with Ari. Ari is a WordPress Theme by Elma Studio. It’s free, and also great flexible layout against smartphones, tablets, and desktop computers. Thanks! Ari.
LS Mobile Office’s GUI
Designed GUI of LS Mobile Office, and wrote guidelines for developing UI Elements on iOS and Android last summer. These apps can work emailing, scheduling, and reading company notices. But it’s confidential files.
LGE Services Center’s mobile web
Coded LG Electronics Services Center’s mobile web in May 2011.
WZON AD Website
I was in charge of flash motion designer for recent launching WZON AD website.
Especially in this time, designed featured navigation using Particular plugin on After Effect.
B612Story was changed
My website was changed to WordPress version from full-flash site.
I need a flexible site against various devices just like iPad and smart phones.
So I plan to revamp this site step by step.
Fox Mobile
B612Story redesigned Foxm.net for Fox Mobile located Seoul city.
e-learning Content for SCU
Content Design
Wildalp Korea website
Website design
KSES Website
Website design
Watermania online shop
Produced and Website design
U7 online shop
Produced and Website design
Redesigned Useven Shop, resulting a 100% increase in sales.
