올챙이 UI 가이드라인

본 문서는 올챙이 개발시 일관된 User Interface를 유지하기위해 작성되었습니다. 또한 Eclipse UI Guidelines 문서를 기준으로 사용합니다.

올챙이 UI 가이드라인 

Tadpole User Interface Guidelines


Introduce

올챙이는 Eclipse RAP Platform 기반으로 개발되었기 때문에 Eclipse UI Guidelines를 기본적으로 채용하고 있으며, 본 문서에서는 추가적으로 필요한 UI 가이드라인에 대한 사항을 기술합니다. 올챙이 기여시 본 문서를 참고해 개발하여야 합니다. 

 

Layout

올챙이의 Layout은 GridLayout을 기본으로 사용합니다. GridLayout은 자식 위젯들을 여러 열과 행으로 구성된 격자에 배치할 수 있습니다. 격자의 구성은 자유롭게 설정할 수 있으며 각 자식 요소의 크기를 제어할 수 있도록 다양한 옵션을 제공하고 있습니다. 기본 배치는 GridLayout을 사용하되, 구성 요소에 따라 다른 Layout을 사용할 수 있습니다. 하지만 다음 규칙에 대해서는 동일하게 적용하여야 합니다. 

 

기본적으로 다음과 같이 각 위젯 별 마진을 5 pixel 크기로 설정합니다. 레이블을 사용할 때 왼쪽 정렬을 기본으로 사용합니다. 

 

 

Button

버튼 사이즈는 특별한 경우를 제외하고, 대(Large)/중(Middle)/소(Small) 사이즈를 선택해 일관된 버튼 크기를 유지합니다.  

분 류크기(Pixel)
대(Large)120 px
중(Middle)100 px
소(Small)80 px

사용하는 버튼이 주기능을 동작하는 역할을 한다면 아이콘을 사용해 버튼의 목적을 명확히 표시한다.

예외 사항

버튼에 포함될 문자가 120px 너비로 충분하지 않다면, 그 이상의 크기로 사용한다. 그리고 가능한한 의미를 훼손하지 않는 방향에서 문구는 동작의 함축적인 의미를 가질 수 있는 문구를 사용한다.

 

Text Filter

텍스트 필터는 특정 컨텐츠에서 제공하는 요소의 일부만을 출력하는 데 사용한다. 예를 들어 아래 그림의 테이블에서 특정 문자열을 포함하는 내용만 출력하는데 사용할 수 있다. 텍스트 필터를 사용하기 위해서 다음을 규칙을 따른다.

  • 텍스트 필터가 사용되는 Widget의 상단에 위치한다.

  • 텍스트 필터에는 Text.setMessage() 메소드를 사용해 비활성화시 ‘Filter’가 나타나도록 설정한다.

text.setMessage("Filter");

  • 텍스트 필터가 수행하는 역할에 대해 Tool Tip을 명시한다.

  • 텍스트 필터 생성시 SWT.SEARCH, SWT.CANCEL 옵션을 사용한다.

Text text = new Text(parent, SWT.H_SCROLL | SWT.V_SCROLL | SWT.SEARCH | SWT.CANCEL);

Error 출력

에러 출력시 다음 클랙스를 사용해 통일된 에러 출력 화면을 제공합니다. 

org.eclipse.jface.dialogs.MessageDialog

예외 발생시 에러 출력 화면을 작성한다면, 다음과 같이 작성할 수 있습니다. 

try {
    // Something
} catch (Exception e) {
    logger.error("Login exception", e);
    MessageDialog.openError(getParentShell(), "Confirm", e.getMessage());
    return;
}

에러가 발생하면 org.apache.log4j.Logger 클래스를 이용해 에러 내용을 기록한 후 MessageDialog 클래스를 이용해 위와 같이 에러를 출력한다.

<span id="pageNum"/>