'ui'에 해당되는 글 3건

  1. 2010.04.11 비스킷 UI에 대한 유감. (4)
  2. 2010.01.30 [Google Apps Engine] JSP 사용하기
  3. 2007.01.18 지금은 Windwos Vista가 좋다. (2)

뭐 사실 이번 E-Book 장치 구매는 완전히 인터파크의 컨텐츠 하나 보고

구매 한 것이니 디바이스에 대한 불만 가득한 마음은 내가 감내해야 할 부분이라고 생각한다.

하지만, 정말이지 책을 보다 쉽고 즐겁게 읽을 수 있도록 해주겠다는 약속과는

다른 UI라니. 설마 이런 UI에서 미묘한 버그를 수정해 보겠다고, 발송 일자를 뒤로 미룬걸까?


내가 바라본 비스킷의 H/W, S/W UI는 정말이지 많이 쳐져도

30점 이상 맞기는 틀렸다고 본다.

사용자의 편의 보다, 장치의 한계와 입력 장치의 제한에 불만만 가득한

디자이너와 프로그래머가 서로 싸우듯이 대충 만든 설계의 결과물이라고나 할까?


1. 첫번째 불만 -  NEXT와 PREV

원래 Next 버튼은 책 내용의 다음 페이지를 보기 위한 버튼이다.

아무래도 이 디바이스 디자이너의 버튼 설계는 이른바 양손 잡이를 위한 배려랍시고

NEXT 버튼을 좌우로 박았다, 큼직하게. 대신 Prev 버튼은 위쪽에 NEXT 보다 작게

만들어주었다는...

그런데 보통 사람이라면, 이 NEXT와 PREV는 각기 상반된 동작이기 때문에,

버튼 위치도 그렇게 생각하게 된다. 즉 NEXT가 오른쪽이면 PREV는 왼쪽.

NEXT가 왼쪽이면 PREV면 오른쪽이라는 것이다. 양손 잡이를 위한 부분이라고 하지만,

도리어 버튼 위치에 대한 혼란만 가중하고 있다.

이건, H/W 문제.

이번엔 S/W 문제를 보자. "서재" 라는 부분이 있는데, 책을 고르는 부분이다.

그런데, 웃기는 것 책이 여러권인 경우 화면에 한번에 표시 불가능이기 때문에,

페이지 기법을 사용하여 구성하게 되어 있는데, 이 모든 조작이 - 화살표 - 버튼만

가능하다. 심지어 다음 페이지로 가려면, 맨 아래의 페이지까지 커서를 움직여서

이전/다음 을 가야 한다. 아주 작은 부분인데, 테스트할 때는 책 1~2권만 넣어 보셨나 보다.

이거 대략 2~3주 써보면 환장 할지도 모를 불편함.


2. 두번째 불만 -  끊임 없이 누르게 만드는 버튼, 그리고 활용 버튼의 비고려.

책을 고르는거나 무언가를 선택하려고 할때 마다 구석의 조그만한

버튼을 하염없이 누르게 한다. 전자 잉크의 특성상 Refresh는 확실히 쥐약이다.

(예전 삼성에서 출시한 SN-60K 보다는 화면 반응이 빠른편이긴 하지만, 역시 느린 디스플레이)

그렇다면 화면 깜빡임을 최소화할 수 있는 방법에 대해 고민을 해봤다면,

사용자가 가장 적게 움직여서 책을 읽고 움직일 수 있어야 하는데,

애석하게도 이 시스템에서는 그에 대한 배려가 전혀 없다.

차라리 화살표 버튼이 다른 위치에 쉽게 누르게 될 수 있으면 모르겠는데,

다닥 다닥 붙은 주제에 조그맣기 까지 하니, 의외 스트레스.

또 무언가를 선택할 때 자주쓰이게 만드는 버튼인 Enter.

내가 봤을때는 이 Enter가 NEXT 만해야 되지 않을까?


이 제품 디자이너는 한번 키패드를 보지 않고 조작할 수 있게 직관적으로

만들어야 되겠다는 생각자체를 해본적이 없는듯 싶다.

우려했던 대로 그대로 만들었다는 점이 뭐랄까...웃음만 나올 뿐.


3. 세번째 불만 - 직관적이지 않는 조작 방법

한번은 글을 읽다가 키 잘못 눌렀더니 검색이 떴다. 어떨 때는 지금 보는 화면의 폰트를

조절하기 위해 폰트 변경 화면을 띄우기도 했다.

그런데, 설정 후 처리가 없다. 혹은 원래 화면으로 돌아갈 간단한 방법이 없었다.

즉 팝업이라고 불리는 부분인데, 화면 아래쪽에 추가적인 설정을 위해 작은 창을

만들어 띄우는데, 이 창을 닫을 방법이 없다는 사실이다.

그러다가 실수로 HOME 눌렀다면, 다시 그 책을 선택해서 열어야 된다.

설정을 했던지, 하기 싫어졌다든지 하면, 무언가 결정 버튼이 있어야 하는데 없다.


이거 해결하는 방법? 일단 보통 팝업은 Back 버튼을,

폰트 설정 화면은 가가/TTS 버튼을 누르면 된다.


아니 저 방법은 뭐란 말인가? 일관성이 없지 않은가?

차라리 Enter 버튼을 하든가, 아니면 버튼을 만들어 주던가 해야 하지 않을까?

메뉴얼을 처음 부터 끝까지 정독해서 기억하거나 이 장치 1년 정도 쓰면서

익히지 않으면 죽었다 깨어나도 익히지 못할 스킬 같다는 생각 뿐이다.


4. 네번째 불만 - 메뉴얼 책자, Biscuit 에서 열어는 보셨나요?

열어는 보았을까? Biscuit 책자.

거기에 캡쳐된 화면들이 있는데, Biscuit 화면들을 캡쳐한 화면을 보면,

가관이다. 그 화면 알아볼 수 있기는 한지 궁금하다.

혹시 저거 수정하려고 하다가, 예판 구매자들에게 욕얻어 먹는게 두려워

잽싸게 그냥 배송하신거?

에효....


5. 다섯번째 불만 - Biscuit 에서 사는 것과 PC에서 사는 E-Book은 다른 종류?!

오늘 5만원어치 책을 샀다. 예판 자들을 위해 60만원 상당의 E-Book 준비했다는 것은

인터파크에서 선벌한 책들을 의미하고 실제로 내가 보고 싶은 책이 있는 것이 아니였다.

더욱이 만화책! 그거 꼭 한번 보고 싶었다. 그래서 "열혈강호" 1~50권 낼름 구매했다.

웹으로. Biscuit 내부에서 책을 사기에는 불편한 메뉴 이동과 결제방법의 제한으로

구매하기 어렵기 때문이다.

그.런.데.

웹 상에서 산 책은 Biscuit Manager 라는 프로그램으로 밖에 전송이 안된다.

이건 또 무슨 날벼락. 난 처음에 Biscuit 안에서 서재 동기화 하면 다 다운로드 받을 줄 알았다.

그런데 웹에서 산 건 그 Biscuit Manager 라는 프로그램으로 밖에는 안된단다.

만일 USB 케이블이 없는 경우라면, 절대 웹에서 사지 말라고 먼저 언급해야 될 것 같다.

구매 순서와 UI가 불편하고 찌질하더라도

Biscuit 안에서 산 것만 Biscuit을 통해 다운로드가 된다는 것이다.

그걸 몰라서 난 처음에 5만원 돈을 날려 먹은 줄 알았다.


6. 여섯번째 불만 - 많은 책들에 대한 Sort 그리고 Index

이건 50여권에 달하는 시리즈 물에서 나타나는 문제.

몰랐는데, 비스킷 안에서 책 정렬은 기본적으로 제공하지 않는다.

반드시 MENU -> 정렬 -> 정렬 방법 선택 이라는 3단계를 통해서 정렬을 해줘야 한다.

또한 매번 서재에 들어올때마다 해줘야 한다. 반드시.

그리고 책 제목으로 할때, aaa1, aaa2, aaa3 과 같은 책들은

aaa1, aaa10, aaa11, aaa2, aaa20, aaa3, aaa30

과 같이 10단위를 넘는 시리즈에 대한 소트는 불가능.

그렇다고 사용자가 책 제목 변경은 불가능하니,

꼬우면 알아서 책꽂이를 만들어 구성해야 할듯.



인터파크와 LG 이엠택에서 협작하여 야심차게 만들기는 했는데,

쫒기는 듯한 일정과 H/W 구현에 올인하는 모습, UI 철학의 부재들이

한데 어울어진듯한 모습이다.

제일 큰 불만이 역시 UI.

iPhone 이 삼성이나 LG에서 만든 핸드폰 보다 성능이 좋거나 디자인이

이뻐서 사람들이 올인하려고 하는 걸까?

물론 그런 사람도 있겠지만, 가장 사람들이 느끼는 최고의 만족감은

역시 UI와 동작 속도이지 않을까?

동작속도나 화면 디자인은, 전자 잉크의 한계가 있으니, 그렇다고 치자.

최소한 사용자 동선에 대해서는 좀 신경을 써서 만들어줬으면 한다.


이쁘고 화려한걸 원했다면 차라리 아이패드를 사고 말지.


이쁘고 화려하지 않더라도, 정말 사용자가 불편없이 잘 쓸 수 있겠구나~

라는 말은 들을 수 있도록 좀 해줬으면 한다.!!!!!


UPDATE : 서재에서 Next/Prev 버튼이 동작할 때도 있군요. 단지 최초 서재에 들어가면 동작 안됨.

이거 버그?

신고
Posted by 하인도

원본글 : http://code.google.com/appengine/docs/java/gettingstarted/usingjsps.html


Java 서블릿 코드로만 직접 HTML 코드를 작성하여 구성하려면, HTML에 대한 관리 작업이 무척 어려워 질 것입니다. 그래서 템플릿 시스템을 활용하면, 인터페이스에 대한 디자인과 구현을 데이터 추가와 같은 로직과 분리하여 응용 프로그램과는 다른 파일로 구성하실 수 있습니다. Java에서도 다양한 템플릿 시스템이 있으며, App Engine에서는 대부분의 시스템들과 정상적으로 동작합니다.


이 튜토리얼에서는 JavaServer Pages(JSP)으로 방명록에 대한 사용자 인터페이스를 구현하려 합니다. JSP는 서블릿 표준에 의거하여 제공됩니다. App Engine에서는 자동적으로 WAR에 있는 JSP 파일을 컴파일 하고, URL 경로에 연결하게 됩니다.


Hello, JSP!

방명록 응용 프로그램에서는 출력 스트림에 직접 문자열을 쓰고 있는데, 이 부분을 JSP로 변경하도록 합니다.  JSP 예제로 제공되는 최신 버전을 가져와서 시작하도록 하죠.


war/ 디렉토리에서 guestbook.jsp라는 이름의 파일을 생성하고, 다음과 같은 내용으로 구성해보시기 바랍니다.


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="com.google.appengine.api.users.User" %>
<%@ page import="com.google.appengine.api.users.UserService" %>
<%@ page import="com.google.appengine.api.users.UserServiceFactory" %>

<html>
  <body>

<%
    UserService userService = UserServiceFactory.getUserService();
    User user = userService.getCurrentUser();
    if (user != null) {
%>
<p>Hello, <%= user.getNickname() %>! (You can
<a href="<%= userService.createLogoutURL(request.getRequestURI()) %>">
sign out
</a>.)</p> <% } else { %> <p>Hello! <a href="<%= userService.createLoginURL(request.getRequestURI()) %>">
Sign in</a> to include your name with greetings you post.</p> <% } %> </body> </html>

기본적으로 war/ 내 여러 파일, 하위 디렉터리(WEB-INF/ 외의 디렉터리들)을 탐색하여, .jsp로 끝나는 파일들을 자동적으로 URL 경로에 연결하게 됩니다. 이 URL 경로라는 의미는 .jsp 파일이 있는 경로입니다. 그래서 JSP 자체의 경로는 URL 경로 뒤에 파일 이름까지를 의미하게 됩니다. 이 JSP 파일은 war/ 바로 밑에 있게 되므로, URL이 /guestbook.jsp 가 되게 됩니다.


만일 사용자가 URL 경로를 / 만 입력하게 되면(즉 파일이름을 없애고 입력하는 경우), 방명록 응용프로그램에 있는 home page를 호출하게 됩니다. 이 guestbook.jsp 를 홈페이지로 등록하시고 싶다면, web.xml 내에서 이 경로에 대해 정의를 해주시면 됩니다.

web/WEB-INF/web.xml을 열고 <welcome-file-list> 항목 안에 <welcome-file> 이라는 항목을 추가한 뒤, 저장해주시면 됩니다. 이 guestbook.jsp 파일만 홈페이지로 사용하려면, 기존에 있는 index.html 을 삭제해주시면 됩니다. 이렇게 편집한 부분을 간단하게 보시면 아래와 같습니다.

<welcome-file-list>
    <welcome-file>guestbook.jsp</welcome-file>
</welcome-file-list>
TIP : Ecipse 에서 XML을 편집할 때, 위와 같은 코드로 바로 보이지 않을 것입니다. 기본적으로 “Design” 모드로 시작되기 때문인데, 만일 위와 같은 소스로 보시려면 “Source” 모드로 변경하시면 위와 같은 코드를 보실 수 있습니다.

수정이 완료되었으면, 개발용 웹서버를 중지 시켰다가 다시 시작한 뒤, 다음 URL을 입력하시기 바랍니다.

http://localhost:8080/guestbook

(간혹 설정 상으로 http://localhost:9999/guestbook 일 수도 있습니다.  - 포트 번호는 각자 확인해보시기 바랍니다. )

 

이제 응용프로그램에서는 guestbook.jsp에 내용을 보여줄 것입니다. 만일 로그인 되셨다면, Nickname을 표시할 것입니다.

맨 처음 JSP를 실행하면, 개발 서버에서는 JSP를 Java 소스코드로 변경 시킵니다. 그리고 난뒤 Java 소스 코드를 Java bytecode로 컴파일 하게 됩니다. Java 소스와 컴파일 된 클래스들은 임시 디렉터리에 저장됩니다. 만일 원래 JSP 파일을 변경하게 되면, 개발 서버에서 자동적으로 JSP들을 재생성하고, 컴파일 하게 됩니다.

App Engine으로 응용 프로그램을 업로드 하게 되면, SDK에서 모든 JSP내용들을 bytecode로 컴파일하고, 이 컴파일 된 bytecode만 업로드 하게 됩니다. 즉, App Engine에서 동작중인 응용프로그램은 이미 컴파일 된 JSP 클래스들입니다.


방명록 Form

방명록 응용프로그램에서 새 인사말을 올리는 작업을 하려면, 사용자 입력 받을 수 있는 웹 폼이 필요합니다. HTML 기반의 폼은 JSP로 만들 수 있습니다. 여기서는 입력 폼의 위치를 새로운 URL, /sign 으로 구성하여, 이곳에서 새로운 서블릿 클래스로 동작할 수 있게 해줍니다. SignGuestbookServlet.SignGuestbookServlet에서는 값을 입력하는 폼 관련 처리를 수행한 뒤, 자동적으로 /guestbook.jsp 로 리다이렉트 될 수 있도록 합니다. 지금부터 새로운 서브릿에서는 등록된 메시지를 로그로 기록할 수 있게 합니다.


guestbook.jsp를 연 뒤, </body> 태그 위에다 아래의 코드를 넣어주시기 바랍니다.
( 굵게 표시된 <form> .. </form> 부분만 넣어주시면 됩니다. )

...

  <form action="/sign" method="post">
    <div><textarea name="content" rows="3" cols="60"></textarea></div>
    <div><input type="submit" value="Post Greeting" /></div>
  </form>

  </body>
</html>

guestbook 패키지 안에 SignGuestbookServlet 라는 이름으로 새로운 클래스를 만들어주시기 바랍니다. 클래스 내용은 다음과 같이 넣어주시면 됩니다.

package guestbook;

import java.io.IOException;
import java.util.logging.Logger;
import javax.servlet.http.*;
import com.google.appengine.api.users.User;
import com.google.appengine.api.users.UserService;
import com.google.appengine.api.users.UserServiceFactory;

public class SignGuestbookServlet extends HttpServlet {
    private static final Logger log
= Logger.getLogger(SignGuestbookServlet.class.getName());

    public void doPost(HttpServletRequest req, HttpServletResponse resp)
                throws IOException {
        UserService userService = UserServiceFactory.getUserService();
        User user = userService.getCurrentUser();

        String content = req.getParameter("content");
        if (content == null) {
            content = "(No greeting)";
        }
        if (user != null) {
            log.info(
"Greeting posted by user "
+ user.getNickname() + ": " + content);
        } else {
            log.info("Greeting posted anonymously: " + content);
        }
        resp.sendRedirect("/guestbook.jsp");
    }
}

이제 새로 만든 서블릿 클래스를 설정하기 위해 war/WEB-INF/web.xml 을 열어 아래의 내용 처럼 SignGuestbookServlet 이라는 서블릿을 선언한 뒤, /sign URL에 연결합니다.

<web-app xmlns="http://java.sun.com/xml/ns/javaee" version="2.5">
    ...

    <servlet>
        <servlet-name>sign</servlet-name>
        <servlet-class>guestbook.SignGuestbookServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>sign</servlet-name>
        <url-pattern>/sign</url-pattern>
    </servlet-mapping>

    ...
</web-app>

새로운 서블릿은 java.util.loggin.Logger 클래스를 상속 받아 메시지를 쓰게 됩니다. loggin.properties 파일을 사용하여 이 클래스의 동작을 제어하게 되는데, 시 시스템 속성은 응용프로그램의 appengine-web.xml 파일에 설정할 수 있습니다.

<appengine-web-app xmlns="http://appengine.google.com/ns/1.0">
    ...

    <system-properties>
        <property name="java.util.logging.config.file" 
value="WEB-INF/logging.properties"/> </system-properties>
</appengine-web-app>

서블릿 로그 메시지는 로그 레벨을 INFO 형태로(log.info()를 사용함) 메시지를 기록합니다. 하지만, 기본적으로 출력되는 로그들은 최소한 WARNING 이상이 되어야 하기 때문에, 그냥 INFO로 로그를 기록하면 출력되지 않습니다. INFO 레벨의 로그도 출력되게 하려면, guestbook 패키지 안의 모든 클래스에 대한 로그 레벨을 logging.properties 파일을 열어 그 안에 guestbook.level 엔트리를 다음과 같이 수정해주셔야 합니다.

.level = WARNING
guestbook.level = INFO

...
TIP : AppCfg 라는 도구를 다운 받아 활성화 시켜주시면, App Engine에서는 java.util.logging.Logger API를 이용하여 기록하는 모든 로그 메시지를 the Admin Console 에서도 확인 할 수 있습니다. Admin Console에서도 로그 레벨에 따라 메시지를 찾아 보실 수 있습니다.

 

다시 빌드 하시고, 재 시작하신 뒤, http://localhost:8080/ 에 접속하시면 테스트를 하실 수 있습니다.(다시 또 언급 드리지만, 포트 번호 설정에 따라, http://localhost:9999 일수도 있습니다. 자세한 것은 web.xml에 설정한 포트 번호를 참고하시기 바랍니다. ). 입력 폼이 뜨면, 그 안에 적당한 문자열을 넣으시고 Submit을 해주세요. 웹 브라우저에서 폼에 입력한 내용이 응용프로그램에 전달하게 되면, 자동적으로 깨끗이 빈 폼으로 되돌아가게 됩니다. 이 때 로그 내용을 보시게 되면, 아까 입력한 문자열을 보실 수 있습니다.


다음은…

지금까지 사용자들이 인사말을 입력할 수 있도록 제공되는 사용자 인터페이스를 구성해 보았습니다. 이제 App Engine의 datastore를 사용하여, 사용자들이 입력한 인사말들을 저장하는 방법과, 그 내용을 다른 이들에게 보여주는 방법에 대해 살펴보도록 하겠습니다.


JDO를 이용하여 Datastore를 사용하기에서 계속되겠습니다.

신고
Posted by 하인도
맨 처음 코드 네임 롱혼으로 출발한 Windows Vista는 이미 작년 11월 즈음
RTM(Ready-To-Maket : 시장에 출시되는 버전)이 나왔다. DVD 미디어로
안찍혔을 뿐, 이미 코드는 완료되었고, 맨 처음 기업 고객들에게 배포 되었고,
12월이 되자, MSDN 구독자들에게도 배포 되었다.

내가 지금 근무하는 회사는 MS 파트너 업체여서 보다 빠르게 Windows Vista RTM을
구했고, 설치해서 사용했다.
맨 처음에는 내 노트북에 설치해서 썼었는데, Windows Vista의 자랑거리 중 하나인
Aeiro-Glass는 동작하지 않았고, 동작자체가 무겁고 힘겹게 동작했다.
그저 Vista의 기타 기능들, 검색, 보안 같은 부분만 이용했었다.
그러다 회사에 모셔두었던 데스크톱을 다시 집에다 모셔 놓고, 그 데스크톱에
Windows Vista를 설치했다.

그러자 이 Windows Vista가 빛을 발하기 시작했다.
화려한 UI는 그대로 나타나고, 검색도 무지하게 빠르게 되며, 무거운 느낌 없이 깔끔하게 시작되었다. 더욱이 깔끔하고 투명한 창은 정말 매료되기에 충분했다.


















그리고 창 전환 하는 방법에서도 더욱 화려함을 자랑한다. Windows Key와 Tab 키를 누르면 마치 슬라이드처럼 쭈욱 나열되어 보여준다.
마우스 휠을 하면 화면이 화라락 넘어가고, 동영상이 틀어져 있으면 그 틀어진 상태로 보여준다. 
게다가, XP에 비해 월등해진것은 전원 관리.
데스크톱에서도 노트북 처럼 Sleep 모드가 지원 된다. 그래서 시작 메뉴의 전원 버튼을 누르면
기본 값이 Sleep 모드에 들어간다. 그러면 마치 컴퓨터가 죽은 것 처럼 잠든다. 그러다가 키보드를 아무거나 누르면 바로 전원이 복구 된다.








사실 지금 이 기능 하나만으로도 충분하다고 생각된다. 너무도 완벽한 잠자기와 복귀여서 충분했다.

그 외, 내가 조금 우려 했던 사항은 바로 응용 프로그램 호환 문제였다. 예전 롱혼이나 Vista Beta 때도 써봤는데, 기묘한 호환성 문제들이 많이 발견 되었다. 하지만 최소한 RTM 버전에서는, 아주 기괴한 응용 프로그램이 아니면 어지간한건 다 돌아가는 것 같다. - 기괴함이란, 보안을 위해서 별에 별 핵을 걸어 키보드 감시 따위 같은것 -
일단 마비노기와 D&D 온라인은 정상적으로 되고 있고, 그 외에 메신저 들이나, 포토샵, 구글 맵들은 잘 돌아가는 것 같다. 다른 것이야 내가 하지 않으니 잘 모르겠고...

여담으로 내가 잠시 D&D 온라인을 하다가 랙인줄 모르고 Vista의 무거움으로 생각해 잠시 동안 XP로 설치한 적이 있었다. 그러나 문제는 전혀 다른 것이였고, 도리어 Vista에만 있고, XP에는 없는 기능들만 더욱 부각시켜 줬을 뿐이였다. 그래서 다시 Vista로 갈아 탔고, 지금 열심히 쓰고 있다.

간만에 마음에 드는 운영체제를 얻은 기분이다.
신고
Posted by 하인도


티스토리 툴바