'디자인'에 해당되는 글 2건

  1. 2010.02.25 E-Book의 Next, Prev 버튼 위치에 대해.
  2. 2009.01.24 역할 기반의 CSS

사실 다양한 제품을 만져보지는 못했고, 고작해봐야 삼성 SN-60E가 전부다.

(마음같아서는 다양한 E-Book 모델을 사가지고 만지작 대고 싶지만, 돈이 없으므로 패스)

지금까지 웹을 통해 본 E-Book들의 버튼 배열은 좀 이상한 느낌이다.

왜 다들 책을 아래로 잡고 읽는 형태로 만들었을까 하는 의문이다.

물론 버튼 배열이나, 회로등의 고려를 하다가 보니, 맨 아래쪽에 배치했는지도 모르겠다.




아이리버 스토리


삼성전자 SNE-60K

키보드의 유무는 둘째 치고라도, 일단 이전 페이지, 다음 페이지 가는 부분이 맨 아래에 위치되어 있음은 쉽게 알 수 있다.그런데 우리가 보통 책을 쥔다는 느낌은 어떤 걸까?

핸드폰 처럼 키 패드 잡고 위를 바라보는 느낌일까?

일단 내 생각에는 책을 읽는 느낌은 책을 감싸는 느낌으로 드는게 가장 일반적이라고 생각한다.

그런데 키가 맨 아래에 있으니, 당연하 손은 아래로 들고 비록 가볍기는 하지만 무게 중심을 아래로 잡고 있기 때문에, 손가락이나 손목에도 그다지 편하지는 않다.


그렇다면?

아마존에서 만든 킨들을 보자.


아마존 킨들

저기 잘은 안보일지는 모르겠지만, 킨들 분해한 사진을 보면 좀 더 가깝게 볼 수 있다.

Prev, Next Page 버튼이 어디 있는가?

다른 부분은 다 어떻게 배치하든 큰 문제가 없다. 사실 자주 쓰이는 키가 아니기 때문이다.

하지만, E-Book을 PDA라든가, 기타 다른 장비로 즐겨 보신 분들은 뼈져리게 느끼지만, 다음 페이지를 읽을 때 누르는 버튼에 따라 E-Book 사용법에 바로 영향을 끼치게 된다.


최소한 E-Book 장치는 다음 그림과 같은 형태가 되어 줬으면 한다.

mydesign

Prev, Fwd 버튼은 최소한 화면 좌우측에 배치되어 있어야 하지 않을까?

책을 쥐든 잡든 들기 좋고 다음 페이지를 향하게 할 때 어느 정도의 고려는 해줬으면 하는게 바램이다.

또, 꼴에 번쩍이는 효과 넣겠다고, 버튼에 색 칠하거나, 크롬 도금 따윈 절대 하지 말고,

차라리 내구성이 튼튼하게 아무리 눌러도 변색이나 부서짐이 없는 그런 재질로 만들었으면 한다.


우리나라 E-Book 디바이스 디자이너들.

물론 예쁘장하게 만드는 것도 중요하지만, 그보다 먼저 실용성에 대한 이해가 먼저 선결좀 되어 줬으면 한다.

좀 사용해 보고 디자인좀 해보세요!!!! 이거다.


에효...

신고
Posted by 하인도

이번 프로젝트에서 최초로 Front End 웹페이지 부분을 프로그래밍 하다 보니, 내 나름대로 CSS에 대한 개념을 다시 쌓게 되었다. 이에 대해서 정리하도록 한다.

예전에는 CSS의 역할에 대해서 크게 생각해본적이 없었다. 대부분은 Front End 웹페이지에 대한 수정이나 편집 보다는 대부분 Back 단 서비스 계열의 구성이 대부분이였기 때문이다. 또한 디자이너가 임의로 수정 또는 구성한 CSS를 그대로 가져다 쓰고, 일부 프로그램으로 구성 중에 변경될 필요가 있는 경우, Internet Explorer Toolbar를 이용하여 특정 CSS를 찾아 해당 되는 값을 변경하는게 전부였다.

그런데, 금번 프로젝트에서 JQuery를 하면서 내 자체적으로 필요한 CSS 들을 정의하고, 구성하다 보니, 디자이너들이 구성했던 내용과는 다른 구성이되어버렸다.

현재 디자이너들이 정의한 CSS들의 유형을 보면 다음과 같다.

1. HTML Element 별로 구성.
   <td> 혹은 <span>, <input> 등 특정 엘리멘트에 대해 디자인적인 적용 작업.

2. 필요한 값에 따라 구성.
   padding-left가 5 가 필요하면 gg_pl_5p 라는 이름으로,
   text가 bold로 표시되는 부분이 있으면, gg_txt_bold 라는 이름으로 정의된 방법.

각 HTML을 보면, 일단 전반적인 구성 내용은 1번의 유형대로 HTML Element에 전반적인 설정을 시도했다. 그래서 모든 페이지 해당 Element들은 기본적으로 동작하게 했다. 그리고 난 뒤, 세세한 변경 작업은 해당 부분의 class=" " 안에 특정한 상태 값에 따라 필요한 값에 해당하는 클래스들을 추가하는 방식이였다.

만일 padding-top 이 10px이고, padding-left와 right가 5px이고, 이텔릭 체라면....

class="gg_pt_10p gg_pl_5p gg_pr_5p txt_italy"

처럼 구현되어 구성되어 있는 것이다.

물론 HTML 코딩된 내역을 요청하면 필요한 사항에 맞게 구성되어 있으므로 디자이너가 원하는 대로 나오게 된다.

그런데, 이렇게 구성되면 특정 구성요소에 대한 수정이 필요한 경우, 해당 구성요소의 class들을 따라 들어가 수정하게 된다. 즉 HTML 코드가 되었든, .NET의 C# cs 코드가 되었든, PHP z코드가 되었던, 해당 코드의 class 부분을 수정하고 다시 배포를 해야 한다.

이것을 만일에 역할별로 Css를 정의하게 되면 어떨까?

현재 필자가 하는 작업이 WSS의 SharePoint이므로, WSS를 기준으로 예를 들어보겠다.

SharePoint도 결국은 WebPage를 표시하는 것이므로 WebPage 가 있을 것이다.
그리고, 그 WebPage 내에 특별한 경우가 아니라면 WebPart와 WebControl들이 있다. 그리고 그 WebPart와 WebControl을 각기 기능에 따라 다르게 구현되곤 한다.

이렇게 프로그램이 구성된 것과 동일한 구조를 가진 CSS를 가지게 되면 어떨까하는 것이다.

먼저 WebPage 라는 class를 구성한다. 그 class에서는 전반적인 페이지 자체의 css를 정의한다. 배경색이나, 기본 폰트라든가....

그리고 WebControl 에서는 WebControl이라는 class를 구성한다. 이 class에서는 기본적으로 WebControl들이 갖는 기본 형태에서 필요한 구성요소들을 정의한다. 모든 WebControl들은 이런 배경색을 가지고, Line-height 등을 결정한다. 그리고 그 WebControl로 만들어지는 특정 WebControl (예를 들면 달력 같은)이라면, 다시 NewCalendar 라는 class를 구성한다. 이 class는 WebControl의 내용을 그대로 상속 받고 단지 그 안에서 다시 overriding 해서 재 구성하게 되는 것이다.

WebPart도 마찬가지다.


즉 css를 스타일을 묶는 단순한 도구로 생각하여 구성하는 것이 아니라, 화면에 대한 전반적인 동선이나, 구성에 따라 class를 묶어 재구성하는 것이다. 이렇게 되면, 나중에 디자인적인 변경이 필요할 때, 특정 구성요소를 html 소스 상에서 편집하는 것이 아니라, css 내의 특정 값만 변경 만으로 디자인 자체를 변경할 수 있는 첫걸음이 될 수 있는 것이다.

이 개념이 나만의 특별한 생각이 아닌 현재 외국계 디자이너들의 CSS 구성하는 방법이라 생각된다.

신고
Posted by 하인도
TAG CSS, 디자인


티스토리 툴바