사용자스킨

SK텔레콤이 향후 선보일 표준 UI에 올해 새롭게 런칭한 브랜드인 ‘T’를 적극 반영할 예정이다. SK텔레콤은 28일 T타워 수팩스홀에서 ‘표준 UI 3.0 2차 설명회’를 갖고 “향후 출시될 표준 UI 3.0은 T스타일 인턴페이스가 될 것”이라고 밝혔다. ▲ 표준 UI 3.0에 대해 설명하고 있는 SKT 조영삼 매니저ⓒK모바일 ▲ SKT 표준 UI 3.0 설명회 모습 ⓒK모바일 ‘T’는 SK텔레콤의 새로운 이동통신 통합브랜드로 올해 8월부터 선보이기 시작했다. 브랜드 런칭 당시 SK텔레콤은 향후 모든 이동통신 서비스와 기존 브랜드을 단계적으로 ‘T’로 통합한다고 밝힌바 있다. SK텔레콤이 현재 준비하고 있는 표준 UI도 ‘T’브랜드의 전략을 따르고 있는 것. SK텔레콤이 말하고 있는 T스타일 인터페이스..

명확한 단계를 요구하는 입력폼 입력폼은 사용자의 정보를 요구하는 화면이므로 사용자들이 가장 민감하게 반응할 수 있고 특히 결재에 관한 입력폼은 금전적인 위험요소도 고려되어 사용자는 과정이나 결과에 대한 확인을 매우 필요해 한다. 해외의 사례를 보면 성질이 같은 덩어리로 단계를 나누고 그 단계마다 화면이 전환되어 사용자가 지금 어느 위치에서 어떤 작업을 하고 있는지를 각 화면마다 정확하게 인지시키는 것을 선호한다는 결론을 도출한 바 있다. 그러나 우리나라의 경우 여러 테스트와 전문가의 분석 결과 조금 다른 사용자의 행태를 발견할 수 있었는데 단계가 시각적으로 명확하게 구분되어 보이되 화면의 길이가 조금 길더라도 한 화면에 보여지는 입력폼의 디자인을 선호하였다. 물론 너무 긴 화면은 지루할 수도 있고 사용자..

링크의 품질을 높이는 방법 사용자에게 자신감을 부추기고 자신이 찾고자 하는 정보의 향기를 전달하는 방법의 반은 링크에 의해 만들어진다. 또한 자신감은 링크 타입, 커뮤니케이트된 정보의 양, 링크가 생긴 모양에 의해 부추겨지는 수가 많다. 링크의 분류는 다음과 같이 나눌 수 있다. - 컨텐츠 링크 : 컨텐츠를 포함하는 페이지로 간다. - 카테고리 링크 : 다른 링크의 우선적으로 포함하는 페이지로 간다. - 키워드 링크 : 검색의 부분으로 사용자가 입력하는 것이다. - 백 혹은 홈 링크 : 홈이나 먼저 방문한 페이지로 간다. 위의 분류 중에서 컨텐츠 링크가 가장 좋은 방법이다. 사용자들은 카테고리 링크가 아니라 컨텐츠 링크를 사용할 때 더 성공할 가능성이 높다. (현재 국내의 사이트는 카테고리 링크가 더 많..

단기간에 효과적으로 사용성을 높이는 방법 사용성테스트를 할 여건이 안 될 경우 좀더 적은 노력으로 혁신적인 사용성 개선을 원한다면 다음과 같은 방법을 사용해 보라. 우선 로그데이타나 기타조사를 통해 가장 빈번하게 사용하는 기능 또는 작업의 목록을 작성하라. 이 목록 중 최상위의 한두개를 골라 최대한 클릭 수를 줄이고 단순화하기 위해 다음과 같은 방법을 이용해 본다. 하나의 태스크를 대상으로 사용자가 그 태스크를 수행하는데 걸리는 예상 시간을 계산하는 것이다. 손을 마우스에 가져가고, 마우스를 움직이고, 누르고, 메뉴바의 이름을 기억해 내고, 각각에 드는 시간을 기준으로 태스크를 수행하는데 걸리는 총시간을 계산한다. 이때에는 육체적인 액션과 정신적인 액션에 드는 시간을 모두 계산한다. 이러한 방법 GOMS..

이번에는 BitmapData를 이용하여 특정 무비클립을 bitmap으로 전환하고 다시 무비클립으로 되돌리는 클래스를 제작한 이후에 재미난 기능을 추가했다. 플래시 8의 bitmapData 클래스가 아니라면 예전에는 상상도 못할 구현이 가능해졌다. 플래시로 만든 마술이라고 해야할까...;; 위에 보이는 이미지는 중앙에 있는 crop 버튼을 누르게 되면 현재 화면에 보여지고 있는 오른쪽 네비게이션을 포함한 화면에 보여지는 모든 무비클립을 하나의 BitmapData로 전환하고 기존에 있던 무비클립을 visible = false를 적용한다. 이렇게 하면 화면에서 event가 발생하는 모든 것들은 bitmapData로 전환되기 때문에 작동하지 않는다. 여기서 화면에서 특정 좌표에 마우스로 클릭하고 사각 박스를 드..

무비클립 생성 화면 클립 형태의 네비게이션을 만들어볼 생각으로 만든 기본적인 무비클립 생성이다. 생성된 무비클립들의 _rotation을 통해서 모션을 적용하였다. 스케일 조정 화면 네비게이션 무비클립 생성 앞에서 만든 기본적인 무비클립 생성을 통해서 각각의 무비클립에 event를 적용하였다. 각 무비클립을 클릭했을 때의 모션으로 선택된 무비클립의 rotation을 0으로 하며 나머지는 특정 rotation값을 적용하고 무비클립이 포함된 무비클립의 좌표를 왼쪽 상단으로 위치시켰다. Back 버튼을 통해서 다시 펼쳐진 형태로 되돌아 가는데 클릭할 때 적용했던 scale을 그대로 적용함으로서 클릭하기 전의 형태를 유지하도록 하였다. 특정 무비클립 클릭시 모션 적용 컨텐츠 view 화면 back 버튼을 누르면 ..

Create Random MovieClip_1 stage의 특정 random 영역에 무비클립을 생성한다. 생성할 때는 중심점이 되는 new Point(x,y)좌표점을 rnadom으로 설정하므로써 그룹단위로 무비클립을 생성하게 된다. 여기서의 문제점은 무비클립이 많아지면 많아질수록 CPU의 과부화 문제가 발생한다. 노트북에서는 무비클립 300개 이상이되면 그때부터 현저하게 속도 저하가 발생한다. Create Random MovieClip_2 앞의 버전에서 발생한 CPU 문제점을 BitmapData를 통해서 해결한 버전이다. 생성 방법은 앞과 동일하며 그룹단위(무비클립이 30개 단위로 그룹으로 묶는다 if count%30 == 0) 한 그룹이 완료되었을 때 BitmapData를 통해서 화면에 보여지는 무비클..

예전 모 클라이언트가 그래프를 플래시로 제작하고자하여 만들었던 그래프다. 기본적인 형태는 xml을 로그하여 데이터를 보여주게 되는데 그래프가 나타날때 다이나믹한 모션 효과를 주었다. 시간이없어서 재사용성을 고려하지 않고 만들었던 아쉬움이 있는데 나중에 다용도로 사용할 수 있는 그래프 컴포넌트를 만들어볼 생각이다.

trapezoid navigation 은 좌우로 슬라이드되는 형태의 네비게이션을 만들기 위해 만들었는데 여러장을 적용했을 경우 CPU문제가 있어서 잠시 보류중이다. 이것은 무비클립을 좌우로 사다리꼴모양으로 외곡시켜기 중앙에 위치했을 때는 무비클립을 사용할 수 있도록 만들어 졌다.

이번은 BitmapData를 이용하여 배경 이미지의 색을 축출하여 문자가 포함된 무비클립의 색을 변경하는 작업을 해봤다. 이미지의 윤곽을 잘 보이도록 하기 위해서 무비클립의 갯수를 늘려 6000개가 넘어가니 무비클립을 생성할 때와 색을 입힐때 다소 처리 시간이 지연되는 경향이 있다...

bitmapData를 이용하여 rectangle의 상하좌우의 좌표를 이용하여 이미지를 외곡하는 클래스를 통해서 3D 육면체와 유사한 네비게이션을 만들어 보면 어떨까하는 생각에서 시작했다. 요즘들어 bitmapData를 이용하여 그러한 화면전환 효과를 보여주는 사이트들이 심심치않게 보인다. 4개의 좌표를 이용하여 이미지 또는 무비클립을 외곡시킬수 있어서 다양한 형태로 적용이 가능할 것으로 생각된다. 이것은 위의 기본적인 4개의 좌표를 이용하여 왼쪽과 오른쪽 화면전환을 할 수있도록 제작하였다. 여기서 문제가 되었던 부분은 현재 화면이 왼쪽으로 out하는 것과 오른쪽으로 in하는 것, 그리고 왼쪽의 이미지가 오른쪽에서 in하는 것과 오른쪽으로 out하는 메소드를 따로 만들어야 했다. 기본적인 구조는 같으나 여..

이번에는 만들어 놓은 Draw Path Recorder를 이용하여 path 경로를 축출하여 나무가지가 뻗어나가며 꽃과 잎이 돋아나는 형태의 결과물을 만들게 되었다. draw path를 가져와서 라인을 그리는 클래스에서 추가적인 기능을 넣는 것으로 완성을 하게 되었는데 그 과정은 다음과 같다. 라인을 path에 따라 그려주는 클래스에서 임의의 좌표점에서 무비클립의 스케일을 랜덤하게 생성하여 scale 1 ~ scale random(100)으로 진행하였다. 기초적인 나무의 형태와 오브젝트들을 나열했으나 부자연스럽다. 다음 진행은 아래와 같다. 라인의 굵기를 처음 좌표를 시작하는 지점과 끝 지점으로 갈수록 굵은 쪽에서 가늘게 진행하였다. 그리고 꽃과 잎의 구분을 위하여 두개의 무비클립을 상호 조화롭게 나타나도..