Ohayo~Mozzi

꺄아~~~~

모찌라긔~ ♡ 모찌 ♡ — Sun, 02 Jun 2013 16:06:29 +0900

너무 너무 이쁜 신발을 두개나 선물 받았어요~~

요즘 안그래도 신발 가방에 욕심이 나는 터라 두개나 구입하려면 꽤나 출혈이 큰데

이런 어마어마한 선물을...ㅠ.ㅠ

넘넘 이쁘게 잘 신을께요.

가격대비 퀄리티 너무 좋고 발도 편하고 굽조절도 가능하고 볼 조절도 가능하고

여러모로 굿굿

사진을 잘 못 찍었네요;;

실제로 보는게 훨씬 이뻐요.

명품 브랜드 못지 않은 퀄리티네요 .

넘넘 감사합니다~~~

싕나 싕나~~

http://www.shoesmata.com/

에서 구입하실 수 이답니다.

훨씬 이쁜 구두들이 많아요~~

자주 이용할테얌~~ 내 스탈 내스탈

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

'혼자놀기' 카테고리의 다른 글

꺄아~~~~ (0)	16:06:29
구글 메인 게임 (0)	2013/01/16
진짜 사나이 프로젝트 앨범 발매~!! 두둥! (4)	2013/01/15
감성 자극~ (0)	2012/11/28
합! >.< 일본 슈퍼 버거 (0)	2012/10/15
문자로 친해지려 하는 것!! (0)	2012/07/04

<성인의 날>

모찌라긔~ ♡ 모찌 ♡ — Wed, 01 May 2013 14:29:00 +0900

어떤 사회에서나 통과의례는 중요하게 여겨집니다. 그중에서도 성인식(成人式, せいじんしき)은 어른으로서의 첫걸음을 축하하는 자리이니만큼, 성년이 된 사람뿐만 아니라 축하하는 이들도 설레죠. 각 나라마다 고유한 문화가 있듯 성인식도 그 형태가 다 제각각인데요, 일본은 성인의 날이 국경일로 지정되어 있을 정도로 중요한 날이고, 그래서 성인식 또한 성대하게 거행된답니다. 일본처럼 성인식을 전국에서 축하하는 나라는 거의 없다고 하네요.

매년 1월의 두 번째 월요일이 성인의 날로 지정되어 있는데요, 1999년까지는 요일에 관계없이 1월 15일이 성인의 날이었다고 합니다. 올해 성인의 날은 1월 14일이네요.

일본 성인식의 상징은 바로 전통의상인 후리소데(振袖, ふりそで)와 하카마(袴, はかま)가 아닐까 싶습니다. 후리소데는 기모노의 일종인데, 보통 기모노보다 훨씬 색깔이나, 자수, 무늬 등이 화려하답니다. 또 눈에 띄는 특징은 후리소데라는 말 그대로 소매가 매우 길다는 점이네요. 후리소데는 그 화려함만큼이나 가격도 만만치 않은데요, 평균 100만 원 이상이며, 대여하더라도 50만 원 정도가 든다고 하네요. 이렇게 고가이다 보니 어머니의 후리소데를 물려받는 경우도 많다고 합니다. 일생에 단 한 번뿐인 성인식 날 오래된 후리소데를 입다니, 섭섭할 법도 하지만 의외로 부모님이 입던 후리소데를 물려받는 것을 기쁜 일로 받아들인다고 해요. 일본 특유의 정서가 또 한 번 느껴지는 부분이네요.

하카마는 남성의 전통의상입니다. 하카마는 검도(剣道, けんどう)나 합기도(合気道, あいきどう)를 할 때도 입는다고 해요. 바깥에 드러나게 기모노 위에 입으며, 기모노와 오비 매는 법은 다르다고 합니다. 후리소데가 여성의 옷인 것과 다르게 하카마는 여성이 입을 때도 있고 남성이 입을 때도 있다고 하네요. 그리고 성인식 날 보통 남성들은 하카마를 입지만 정장도 많이 입는다고 합니다.

특이한 성인식도 많은데요, 도쿄 디즈니랜드 리조트가 있는 치바현(千葉県) 우라야스시(浦安市)에서는 디즈니랜드에서 성인식을 거행하고 있다고 합니다.

그리고 고등학교를 졸업하고 바로 입사한 성인이 많은 회사에서는 회사가 성인식을 열어 주는 경우도 있다고 합니다. 사회적으로 이렇게 성인이 된 것을 축하해 주고, 자신도 성인의 의미를 새길 수 있는 날이 있어서 참 좋네요.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

'니뽕뜯어보기 > 니뽕궁금해~(펌)' 카테고리의 다른 글

<성인의 날> (0)	2013/05/01
[ハヤシライス] 하야시 라이스 (0)	2013/04/18
<멘타이코> (0)	2013/04/10
<바사시> (0)	2013/03/25
<하나미> (0)	2013/03/25
<오세이보> (0)	2013/01/17

디자인을 할 때 버려야 할 33가지의 아까운 것들

모찌라긔~ ♡ 모찌 ♡ — Mon, 29 Apr 2013 16:37:36 +0900

고집(내 생각, 내가 생각하는 아름다움, 취향)
클라이언트, 다른 사용자, 다른 디자이너들을 공감시키지 못할 때 버려야만 하고 버리지 않기 위해서는 크리에이티브, 커뮤니케이션 능력을 가져야 한다.

돈.시간.결과
모든 것을 완벽히 만족시켜야 한다는 생각을 버려야 한다. 자기 만족을 위한 것이 아니라면, 잘 버려야 한다. 잘 버리기 위해서는 프로젝트에 대한 커뮤니케이션 목표가 분명해야 한다. 버리는 이유가 명확하지 않으면 버릴 수 없는 까닭이다.

내용 없는 형식
일의 목적 등의 내용을 잘 이해하고 기획, 디자인에서의 형식을 잘 갖추어야 한다. 겉만 번지르르한 기획이나 디자인은 그야말로 버려져야 할 것.

기능
덜 기능적인 디자인을 추구한다. 기능과 편의의 홍수 속에서 경쟁력은 때론 '기능의 배제'를 통해 가능하지 않을까.

작업의 마지막 결정자는 나
라는 사실을 버려야 한다. 버리고 싶지 않다면, 항상 자기 자신을 돌아보는 객관적인 눈을 가지고 긴 호흡으로 작업에 임해야 하는 것.

無
유독 디자이너이기 때문에 버려야 할 것은 없다는 견해

욕심, 체력, 하늘, 시안, 자존심...

이 외에도 많은 글들이 있지만 중복되는 생각들도 많이 있었고, 저에게 와 닿는 내용만 추려 소개하는 것이므로 궁금하신 분들은 직접 읽어보시는 것도 좋을 듯 합니다.

그렇다면 UI 디자이너가 꼭 버려야 할 것은 무엇이 있을까?라는 의문이 들지 않을 수 없습니다.
저의 짧은 견해로 '눈에 보이는 것'을 버려야 하지 않을까 라는 생각을 해 보았습니다. UI는 화려하거나 그럴싸한 결과물이 아니라 분명한 Needs를 읽어내고 해결점을 찾아나가는 과정이 아닐까란 생각에서입니다. 그래서 겉치레에만 치중한 디자인이 아닌, 더할 것은 더하고, 뺄 것은 뺀 디자인 즉, Simplicity 란 관점으로 UI 디자인을 살펴보아야 겠습니다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

'UI/UX' 카테고리의 다른 글

디자인을 할 때 버려야 할 33가지의 아까운 것들 (0)	2013/04/29
UX의 눈으로 NHN Band를 바라보다 (0)	2013/04/29
UX 신입 디자이너가 알아야 할 UI디테일 용어 3탄 (0)	2013/04/29
UX 신입 디자이너가 알아야 할 UI디테일 용어 2탄 (0)	2013/04/29
UX 신입 디자이너가 알아야 할 UI디테일 용어 1탄 (0)	2013/04/29
UI 패턴을 다룬 웹사이트 모음 (0)	2013/04/29

UX의 눈으로 NHN Band를 바라보다

모찌라긔~ ♡ 모찌 ♡ — Mon, 29 Apr 2013 16:32:59 +0900

[01] Band (이미지출처 하단 명기)

Micro SNS의 등장 이후 특정 그룹을 타겟팅한 SNS가 등장했고, Group형 SNS도 등장했다. 카카오톡(지인간의 채팅), 카카오스토리(지인간의 사진 공유 SNS), 카카오아지트(그룹간의 SNS)의 포지셔닝을 보면 카카오의 전략이 다각도로 이루어졌다는 것을 알 수 있다. (관련 기사 : http://me2.do/FfD7ct2)

NHN도 그룹 SNS 성격의 모바일앱 Band를 내놓고 발빠르게 움직이는 모습이다. Band 서비스의 정확한 시작은 알 수 없으나, SNS의 미투밴드에서 그 출발을 미루어 짐작할 수 있다. 미투밴드는 미투데이 사람들끼리 친목을 도모하기 위한 공개(혹은 비공개)형 소모임이다. (미투밴드 : http://me2.do/GiO7DLF)

그리고 밴드 서비스의 총괄 기획은 NHN 이람 이사님께서 하신 것으로 보여진다. 비공개형 Group SNS를 왜 기획하게 되었는지에 대한 심도있는 글이므로 꼭 읽어 보시기를 권한다. (관련 글: http://me2.do/GVTmyg6)

위 글에 영감을 받아 페이스북, 네이버, 카카오, 다음, Path의 SNS를 포지셔닝 해 보았다. 제공하는 모든 기능을 포지셔닝한 것이 아니므로 실제와 약간 다른면이 있을 수 있다. (이를테면 미투데이에서도 비공개 그룹형 SNS인 미투밴드를 제공하고, 채팅을 지원하므로 실제로는 페이스북과 포지셔닝이 겹친다.)

[02] 공개/비공개, 게시판/채팅 유형에 따른 SNS 포지셔닝 맵

- 페이스북은 공개형 SNS를 필두로 채팅, 그룹형 서비스를 지향하고 있으며, 커뮤니케이션과 관련된 거의 모든 활동을 지원한다.

- NHN(네이버)은 미투데이(공개형 SNS), 밴드(비공개형 SNS), 라인 (비공개형 SNS – 채팅형)을 런칭하여 공개형 SNS와 비공개형 SNS의 양 축을 공략하고 있다. 밴드 서비스는 특이한 점이 게시판형과 채팅형을 구분하지않고 비공개형 SNS에 최적화한 형태를 보여주고 있다는 것이다.

- 카카오는 카카오스토리(공개형 SNS – 게시판형), 카카오톡(비공개형 SNS – 채팅형), 카카오아지트(비공개형 Group SNS), 카카오수다(공개형 Group SNS – 현재 서비스 종료) 등 SNS의 다양한 분류에 최적화한 개별 서비스들을 다양하게 제공하고 있다.

- Daum은 요즘(공개형 SNS), 캠프(공개형-비공개형 SNS), 마이피플(비공개형 SNS – 채팅형)을 런칭하였다.

- Path는 비공개형 SNS를 필두로 일부 공개적인 형태를 보여주고 있다.

(본 포스팅은 SNS 전략을 다루고자 하는 글이 아니므로 각 회사의 서비스 전략 보다는 ‘현상’을 설명하는 정도로 그치고, 그 중에서도 밴드 서비스를 집중적으로 살펴보려고 한다.)

네이버에서 Group형 SNS ‘Band’를 런칭한다고 했을 때 無異 님을 필두로 필자의 회사에서 사내 친목을 도모하기 위한 수단으로 활용해보려고 밴드 앱을 이용해 보았다. 기존에는 친목 도모용으로 Path를 잘 활용하고 있었으나, 마침 Path의 서버가 느려지는 등 사용성의 문제가 있었기 때문에 Band를 사용 해 보고 서비스가 매력적이면 옮기는것도 고려하고 있었다.

이번 포스팅은 짧은 기간동안 이지만 필자의 회사사람들과의 경험을 토대로 한 Group형 SNS Band의 매력적인 부분과 다소 아쉬운 점을 논하고, Group SNS를 기획할 때 어떤 점들을 고려해야 할지를 기술하려 한다. 언급된 내용은 비단 Group형 SNS 뿐 아니라 일반적인 서비스 기획시에도 응용할 수 있을 것으로 보인다. 그만큼 일반적이고 어떻게보면 뻔하다고 느낄 수 있는 이야기를 다루고 있다.

Band App의 매력적인 부분은 다음과 같다.

1. 아이덴티티가 돋보이는 서비스이다.

[03] 밴드 색상 변경

밴드라는 아이덴티티를 고무밴드로 풀어낸 점이 인상깊었다. 또한 밴드 색상을 변경하면 밴드의 아이덴티티 컬러가 바뀌는 것도 좋았다.

2. 정갈한 UI를 보여준다.

[04] 이미지 모아보기

밴드에서는 이미지를 모아 보여주는 뷰가 있는데, 사진을 한눈에 모아보기에 좋은 화면으로 생각한다. 또한 그 외에도 디테일한 부분에서 GUI의 장점이 돋보였다.

3. 채팅방에서 알림/끔 기능을 제공하는데 이 점 마음에 든다.

[05] 채팅방 알림 켬/끔 기능

채팅방 알림 켬 끔 기능은 유저의 성향과 상황에 따라 가변적인데, 쉽게 켬 / 끔을 지원하는 기능은 장점이라고 생각한다.

4. 댓글 시스템 기획 시 디테일이 돋보인다.

[06] 특정 멤버 대댓글 달기

특정 친구에게 댓글을 달고 싶을 때 특정 친구 댓글을 클릭하면 자동으로 친구 이름이 남겨진다. 그 외에 @친구이름을 입력해도 마찬가지로 입력이 가능한데 고민의 깊이가 느껴지는 UI였다. 특정 친구 댓글을 클릭하면 자동으로 친구 이름이 남겨지는 방식은 미투데이 UI에서도 활용했던 방식이다.

Band App의 아쉬운 점은 다음과 같다.

1. 게시판에서 알림 기능은 게시판 기능과 별도로 분리했으면 한다.

[07] 게시판의 알림 영역과 게시판 영역

알림 기능과 친구의 소식 기능은 별도로 분리되어야 한다. 필자가 쓴 카카오스토리 UI/GUI 글에도 관련 해서기술한 바 있는데 참고했으면 한다. (http://story.pxd.co.kr/520)

2. 사진첩에서 남긴 댓글의 수를 확인하기가 힘들다.

[08] 사진첩 화면

사진첩을 같이 감상하고 즐기는 것은 좋지만, 사진첩에 댓글이 달렸을 때 어디에 달렸는지 확인하기가 어렵다. (글 작성 초기에만 하더라도 댓글 수를 보여주는 GUI가 없었는데, 현재 추가되었다.)

3. 사진 삭제가 어렵다.

[09] 사진 삭제 기능 접근 시나리오

사진 삭제 기능까지 접근하기가 힘들다. 사진 삭제 기능을 1 depth 앞 단계로 빼도 되지 않았을까. (현재 사진 삭제 기능은 1 depth 앞으로 뺀 상태로 업데이트 되었다.)

4. 디테일한 일정 설정이 어려움

[10] 일정 만들기 화면

2일 이상 일정을 등록하기 위해서는 수동으로 2일의 일정을 등록해야 하는 어려움이 있다. 또한 일정 시간 등록을 위해서도 사용자가 수동으로 기입해줘야 한다.

그룹간 커뮤니케이션 서비스를 기획할 때 고려해야 할 사항들은 다음과 같다.

1. 내 친구가 그 서비스를 이용할 수 있게 해야 한다.

내 친구를 이 서비스로 쉽게 영입시킬 수 있어야 한다. 내 친구들이 이 서비스를 이용할 수 있는 장점이 분명히 존재해야 한다.

2. 기본적으로 속도와 안정화가 확보되어야 한다.

애초에 사내 커뮤니티로 활용하고 있던 Path의 대안을 고려하였던 부분도 바로 속도였다. 아무리 UI/GUI가 멋지다고 하더라도 기본적인 속도가 받쳐주지 않으면 서비스를 이용하기 힘들다. 카카오톡도 한때 서비스 속도로 인해 유저의 이탈을 초래하였던 쓰라린 경험이 있다. 아직 안정화 작업 중이겠지만 밴드 서비스는 사용 중에 종종 잘 꺼진다. 이러면 신뢰를 얻기 힘들다.

3. 친구가 글을 작성하면 적시 적소에 알려줄 수 있어야 한다.

알림 기능을 지원해야 하며, 알림을 하더라도 어떤 것을 어떻게 알려 줄지 고려되어야 한다. 물론 이건 밴드 서비스에서도 잘 하고 있는 부분이다.

4. 내가 원하는 기능에 대한 접근이 용이해야 한다.

친구들끼리 그룹 채팅방을 만든다면 어떤 서비스를 이용할 것인가? Path? Band? 카카오톡? 현재 같은 그룹의 친구들과의 커뮤니케이션 채널로 카카오톡과 Band를 이용하고 있는데, 채팅은 카카오톡이 좋고, 사진 공유는 Band가 좋아서 두 개의 서비스를 나눠서 이용하고 있다. 사진 공유 화면은 Band의 특장점으로 여겨진다. 친구들과의 커뮤니케이션 채널은 아직도 카카오톡이 좋은데, 논리적으로 설명하기는 힘들지만 밴드는 카카오톡에 비해서 채팅 UI에 대한 접근이 어렵다고 느껴졌다.

5. UI, GUI의 디테일은 장기간 사용시 서비스의 만족도를 높이는 데 기여할 것이다.

UI, GUI의 디테일도 물론 중요하다. 하지만 그 전에 내 친구가 이 서비스를 사용 해야 하고, 적절한 속도와 적절한 알림 등 기본적인 것들이 제공 될 때 의미가 있다.

글을 정리하며

Group SNS ‘Band’ App은 그룹간 SNS App으로써 새로운 가능성을 제시하였다. 특히 내 친한 친구들과 채팅하고 사진을 공유할 수 있다는 장점이 있다. 아직 기능이 좀 더 다듬어져야 하겠지만, UI / GUI 적으로도 고민을 많이 하고 만든 서비스로 보여진다.

다만 카카오톡, Line과 같은 채팅 서비스들과 비교해 봤을 때 어떤 차별점이 있을지 의문이다. 결국에는 접근성의 문제인데 사용자들이 카카오톡과 같은 그룹 채팅방을 그대로 사용할 지 아니면 카카오톡은 그대로 유지하고 Band 앱을 적극적으로 활용할지는 시간을 두고 지켜볼 일이다. 이 선택은 앞으로 사용자들이 할 것이다.

Band는 매력적인 서비스임은 분명하며, 앞으로도 많은 점들이 다듬어 질 것으로 예상된다.

출처

http://story.pxd.co.kr

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

'UI/UX' 카테고리의 다른 글

디자인을 할 때 버려야 할 33가지의 아까운 것들 (0)	2013/04/29
UX의 눈으로 NHN Band를 바라보다 (0)	2013/04/29
UX 신입 디자이너가 알아야 할 UI디테일 용어 3탄 (0)	2013/04/29
UX 신입 디자이너가 알아야 할 UI디테일 용어 2탄 (0)	2013/04/29
UX 신입 디자이너가 알아야 할 UI디테일 용어 1탄 (0)	2013/04/29
UI 패턴을 다룬 웹사이트 모음 (0)	2013/04/29

UX 신입 디자이너가 알아야 할 UI디테일 용어 3탄

모찌라긔~ ♡ 모찌 ♡ — Mon, 29 Apr 2013 16:20:16 +0900

1. 라이트 박스(Light Box)
팝업이 뜨는 동시에 백그라운드 화면이 어두워지거나 밝아지는데, 이를 '라이트 박스'라고 부릅니다. 라이트 박스 처리된 영역은 컨트롤 할 수 없으며 사용자가 대화 상자에 집중해야 한다는 시각적인 알림을 제공합니다. 일종의 Modal Dialog(혹은 Modal Window)라고 할 수 있습니다. 일반적인 팝업과 다른 점은, 박스를 해제하지 않고는 배경의 요소와 인터랙션 할 수 없다는 점입니다.

2. 토스트 팝업(Toast Pop-up)
마치 토스터기에서 토스트가 나오는 모양과 같다고 붙여진 이름입니다. 알림을 위한 팝업의 일종으로, PC에서는 주로 모니터의 우측 하단에서 몇 초간 나타났다가 사라지는 형태를 취하며 모바일의 경우 화면의 중앙에 주로 위치하거나, 최상단에 나오는 경우는 '토스트 노티피케이션(Toast Notification)'이라고 불립니다. 화면 중앙에서 무언가를 알려줄 경우, 작업자의 현재 작업을 너무 많이 방해하게 되고, 그렇다고 PC 하단의 태스크 바나 핸드폰 상단의 노티피케이션 바에서만 표시될 경우 너무 눈에 띄지 않는 단점을 극복하기 위하여 중간적인 형태를 띠고 있는 알림이라 많이 선호되고 있습니다.

Stackoverflow에 따르면 이 용어는 10여년 전에 마이크로소프트 메신저 개발자들이 이 기능을 구현하면서 만든 용어라고 합니다. 영문 위키페디아에 등록된 것은 2005년이니까 8년전이고요, 마이크로소프트 개발자 가이드문서, 안드로이드 개발자 가이드 문서등 대부분의 공식 문서에서 이미 사용하고 있는 단어입니다. 국내에는 아직 알아듣는 사람이 거의 없다고 보셔도 됩니다. 다만 영문 검색해 보면 100만건 이상의 문서가 있고요, 마이크로소프트 개발자 가이드, 안드로이드 개발자 가이드 등 거의 모든 개발자 가이드북에서 공식적으로 사용하는 용어이므로, 개발자분들은 아마 다 아실 듯 합니다.
위키페디아: http://en.wikipedia.org/wiki/Toast_(computing)
안드로이드: http://developer.android.com/guide/topics/ui/notifiers/toasts.html
마이크로소프트: http://msdn.microsoft.com/en-us/library/windows/apps/hh779727.aspx

3. 프로그래스 인디케이터(Progress Indicator)
컨텐츠가 로딩되고 있음을 시각적으로 알리는 컨트롤입니다. 크게 로딩이 완료되는 시기를 예측하기 어려운(Indeterminate), 예측이 가능한(Determinate) 두 타입으로 나눌 수 있습니다.

트로버(Throbber)
로딩이 완료되는 시기를 예측하기 어려운 경우 제공되는 컨트롤입니다. 개별 애플리케이션이 로딩되는 경우, 주로 해당 소프트웨어나 웹브라우저의 메뉴바 혹은 툴바에 위치하는데 '트로버(Throbber, 고동치는 것)' 또는 '스피닝 휠(Spinning Wheel, 돌아가는 바퀴)'라고 부릅니다.

아워글래스(Hourglass)
시스템 전체가 로딩 중일 경우 마우스 포인터가 바뀌는 것을 흔히 경험할 수 있습니다. 프로세스가 끝날 때까지 어떤 것도 클릭할 수 없다는 상황을 알립니다. '아워글래스(Hourglass, 1 시간짜리 모래시계)'라고 하며 Mac에서 사용되는 무지개 빛깔의 로딩 컨트롤의 경우 '스피닝 핀휠(Spinning Pinwheel)'이라고도 부릅니다.

프로그래스바(Progress Bar)
반면, 로딩이 완료되는 시기를 예상할 수 있을 때는 아래와 같은 타입의 인디케이터를 제공합니다. 현재까지 진행된 정도와 남은 양을 모두 확인할 수 있습니다.

프로그래스 바는 아래와 같이 로딩이 완료됨을 예측할 수 없을 때도 사용됩니다. 패턴이 애니메이팅되면서 Throbber와 마찬가지로 무엇이 진행되고 있음을 사용자에게 알립니다.

아래 그림처럼 상황에 따라 전환될 수 있으며 로딩이 완료된 후에는 반드시 완료되었음을 시각적으로 표시해야 합니다.

그 외 크롬의 경우 하단 패널에 파이 형태로 다운로드 상태를 표시하거나 Task Bar에 직접 다운로드 상태를 표시하기도 합니다.

4. 레이블(Label) / 플레이스홀더(Placeholder)
두 컨트롤은 아래 그림에서 보면 알 수 있듯이 사용자에게 무엇을 입력해야 하는 지를 알려주는 역할을 합니다. '레이블(Label)'은 보통 텍스트 필드 좌측에 단어(주로 간략한 명사)로 제공됩니다. '플레이스홀더(Placeholder)'는 텍스트 필드 안에 새겨져 있는 입력 도우미로서 짧은 구문 형식으로 제공되며 '인풋 프롬프트(Input Prompt)'라고도 불립니다. 플레이스홀더는 진입 시에 제공되지만 문자를 입력하는 순간 사라집니다. 하지만 꽤 많은 경우는 첫 글자를 입력하는 순간이 아니라, 마우스로 클릭만 해도 (즉 포커스가 간 순간) 사라지는 형태를 취하고 있는데, 이 경우 사용자가 레이블을 읽지 않고 무심코 클릭하는 경우 무엇을 입력해야 할 지 난감한 상황이 올 수 있으므로 설계 시 고려해야 합니다. 또한 입력했을 때만 지워지고 입력을 지우면 다시 나타나도록 하여 길을 잃지 않도록 끝까지 안내하는 것이 중요합니다.

HTML5 표준 가이드에 따르면 플레이스홀더 영역에 들어가야 할 문구는 레이블과는 성격이 달라야 한다고 규정하고 있습니다. 위의 그림처럼 레이블이 '무엇'을 입력해야 할 지를 알려준다면 플레이스홀더 자리에는 '어떻게' 입력해야 하는 지를 예시로 보여주는 것과 같습니다. 하지만 요즘에는 플레이스홀더 자리에 힌트 대신 레이블이 대신 들어가는 방식으로 많이 쓰이고 있는데요(아래 화면 참고), 레이블을 위한 공간이 별도로 필요하지 않으므로 효율적인 공간 활용을 위해 널리 사용되고 있습니다.
Input Box 내의 레이블과 HTML5의 플레이스홀더 사용에 관해 명쾌하게 잘 정리한 블로그(Labels in input fields aren't such a good idea by Laura Kalbag)를 참고하세요.

5. 인트리깅 브랜치 (Intriguing Branches)
기대하지 않은 곳에 이용자가 관심 있어할 만한 키워드를 하이퍼링크 형태로 제공하는 것을 뜻합니다. 대표적인 예로 글의 본문에 특정 단어 혹은 구절에 링크가 있는 경우가 있으며, 좀 더 구조화된 방법으로 글 작성시 첨부하는 태그나 관련 제품 리스트 등을 나열하는 형태로 제공할 수 있는데요. 때론 글에 관련된 정보를 제공하기 위한 목적으로 사용되고, 사실 그보다 더 자주 상업적인 목적으로 사용됩니다. 기본적으로 인트리깅 브랜치는 이용자의 주의를 끌기 위해 존재하며 잘 사용되었을 때는 사이트에 오래 지속하는 효과를 가져다줍니다.적극적으로 링크를 눌러보는 호기심 많은 이용자 외에도 목적을 달성하고 빨리 완료하고자 하는 사람에게는 스쳐 지나갈 수 있게 설계하는 것이 무엇보다 중요합니다. 또한 인트리깅 브랜치로 관심을 끌려면 무엇을 링크할 것인지, 어떻게 관심을 끌 것인지를 전략적으로 생각해야 합니다. 이를 위해서 Target Audience가 무엇을 관심있어하고 그렇지 않은 지 파악하는 것이 중요하다고 할 수 있습니다. 네이밍도 인트리깅 브랜치에서 매우 중요한 역할을 합니다. Designing Interface 서적에서는 'Help'보다는 'Learn More'같은, 보다 친근하고 본능적인 호기심을 자극하는 언어를 사용하기를 권장하고 있습니다. 마지막으로 이용자는 링크를 클릭했다가도 언제든 처음에 보고 있던 페이지로 쉽게 돌아갈 수 있는 것을 원합니다. 브라우저에서는 '뒤로가기 '버튼을 통해 제공하거나 팝업의 경우 '닫기' 버튼을 제공하며 새로운 브라우저 창을 띄워주는 것도 좋은 방법입니다.

출처

http://story.pxd.co.kr

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

'UI/UX' 카테고리의 다른 글

디자인을 할 때 버려야 할 33가지의 아까운 것들 (0)	2013/04/29
UX의 눈으로 NHN Band를 바라보다 (0)	2013/04/29
UX 신입 디자이너가 알아야 할 UI디테일 용어 3탄 (0)	2013/04/29
UX 신입 디자이너가 알아야 할 UI디테일 용어 2탄 (0)	2013/04/29
UX 신입 디자이너가 알아야 할 UI디테일 용어 1탄 (0)	2013/04/29
UI 패턴을 다룬 웹사이트 모음 (0)	2013/04/29

UX 신입 디자이너가 알아야 할 UI디테일 용어 2탄

모찌라긔~ ♡ 모찌 ♡ — Mon, 29 Apr 2013 16:18:53 +0900

1. 증분 탐색 (Incremental Search)
Incremental Search로 검색하면 '증분 탐색'이라고 번역이 되어 있는데 '순간 검색'이라고 용어가 통일되어 사용되는 추세입니다. 기본적인 의미는 '자동 완성'과 구별됩니다. 사용자가 특정 단어를 검색하기 위해 검색어를 입력할 때, 검색어를 예상해서 리스트로 제공하는 화면을 '자동 완성'이라고 한다면, 사용자가 목표 검색어를 입력하기 전에 검색어를 예상하고 제공하는 결과 화면은 '순간 검색'입니다. 주요 검색 엔진을 통해 해당 기능을 간단하게 비교해 보도록 하겠습니다.

구글의 Instant Search/Instant Previews
구글의 '순간 검색(Instant Search)'은 검색어를 입력하는 동시에 결과 화면이 나타납니다. 그렇기 때문에 타사의 방식처럼 검색어를 입력한 후 '엔터키' 혹은 '검색' 버튼을 누를 필요가 없습니다. 또한 각 검색 결과 옆에 위치한 Cue를 선택할 시 해당 웹페이지의 미리 보기 화면이 나타나는데 이를 '순간 미리보기(Instant Previews)'라고 합니다. 그리고 이 미리보기 화면에서 링크와 관련된 정보라고 판단되는 부분에 Highlight 표시(붉은색 박스)와 간단한 캡션이 제공됩니다. 구글이 야심차게 내놓은 순간 검색 서비스는 메인 화면을 되도록 빨리 벗어나게 하기 위한 구글의 의도가 잘 반영된 결과물이며, 실제로 검색에 소요되는 시간을 획기적으로 단축하는 데 기여했다고 보여집니다.

네이버의 정답형 자동 완성
반면 네이버는 '정답형 자동 완성'기능을 제공하고 있습니다. 검색어를 입력했을 때 자동 완성 영역에 추천 검색어 뿐만 아니라 관련 결과값이 함께 나타나도록 만든 것인데요. 자동 완성과 순간 검색의 장점(검색 결과가 실시간으로 제공됨)을 혼합한 하이드리드 형태라고 볼 수 있겠네요. 예를 들어 사용자가 검색 필드에 '부산광역시 지역번호'를 입력할 시 자동 완성 영역에 실제 지역번호인 '051'이 제공됩니다. '페이스북'을 입력하면 바로가기 URL이 리스트에 제공됩니다. 아래 화살표 키를 눌러 포커스를 맞춘 후 Enter 키를 누르니 페이스북 홈으로 바로 이동합니다. 마우스를 사용하지 않고 원하는 경로로 바로 이동할 수 있는 점이 편리하게 느껴졌습니다. 모든 검색어에 적용되는 것은 아니고 현재는 시험적으로 국가, 지역번호, 공공기관, 학교 등과 같은 공적인 기관 혹은 로또 당첨 번호에 우선 적용하고 있다고 합니다.

야후의 Search Direct
야후 역시 '서치 다이렉트'라는 검색 서비스를 제공하고 있습니다. 입력하지 않고 커서만 올려놓은 상태에서는 인기 검색어 랭킹이 나오다가(네이버에서는 최근 검색어가 보여지는데 반해), 입력하는 동시에 좌측에는 추천 검색어 영역, 우측에 현재 포커스된 추천 검색어에 대한 추천 결과가 나타납니다. 이 추천 결과에 외부 링크를 나열하기보다는 자체 컨텐츠에서 꺼낸 해답을 직접 제공하는 것이 서비스의 기본 아이디어입니다. 기존 결과 화면에서 일일이 링크를 클릭하여 결과를 얻는 것과는 다르게, 이용자가 원하는 정답을 직관적으로 제공한다는 점에서 타 검색엔진과는 차별화된 시도가 엿보입니다.

그 외에 뮤직 검색의 경우 아티스트, 앨범, 곡 3가지의 카테고리에 따른 추천 검색어를 표시합니다. 아티스트를 입력했지만 기대하지 않았던 관련 앨범 정보와 대표곡명을 함께 알려주기 때문에, 이용자 입장에서 얻는 컨텐츠를 생각한다면 역시 일반적인 자동 완성에서 한 단계 더 나아갔다고 볼 수 있습니다.
도서 검색의 경우 야후의 Search Direct와 유사한 형태로 제공합니다. 내가 찾는 책이 소설인지, 언제 출판되었는지, 가격이 얼마인지, 얼만큼 할인된 가격인지, 구입하면 얼만큼 적립되는지, 그리고 마지막으로 '장바구니 담기'버튼까지 제공되고 있네요.
이렇게 조금씩 다른 형태로 존재하며 각 검색 엔진마다 지향하는 바는 분명 조금씩 다릅니다. 하지만 크게 보았을 때 '얼마나 이용자가 원하는 정보를 빠른 시간 내에 정확히 안내할 것인가'라는 큰 공통된 줄기를 읽을 수 있습니다.

모바일에서의 순간 검색
사실 Incremental Search는 우리가 피처폰(Feature Phone)에서부터 사용했던 방식입니다. 주소록에서 이름을 입력하면 아래에 관련 결과가 리스트로 제공되고 선택하는 일련의 과정은 우리에게 매우 익숙합니다. 스마트폰에서도 웹 검색 뿐만 아니라 애플리케이션에 이런 순간 검색을 기본으로 탑재하고 있습니다.

2. 컨텍스트 메뉴(Context Menu)
사용자가 현재 선택한 항목에 관한 메뉴를 팝업 형식으로 제공하는 것을 컨텍스트 메뉴라고 합니다.. '팝업 메뉴' 혹은 '바로 가기 메뉴'라고도 하며 보통 마우스 오른쪽 단추를 누를 시 메뉴가 호출됩니다. 단추가 하나 밖에 없는 마우스를 사용하는 경우 키보드 클릭 조합(Mac OS의 Ctrl+Click)을 사용할 수 있습니다. (피츠를 알려주는 퀴즈에서 이 컨텍스트 메뉴에 관해 Magic Pixel을 잘 활용한 예라고 소개한 바 있습니다.)

3.MRU(Most Recently Used) 리스트
사용자가 특정 종류의 행위를 했을 때 마지막 행위를 레지스트리에 기록해두는 것을 말합니다. 예를 들면, 인터넷 상에서 파일 다운로드 시 마지막으로 저장했던 폴더를 기본 폴더로 보여주거나 윈도우 시작 메뉴에서 특정 응용프로그램 리스트를 확장할 시 보여지는 최근 항목을 예로 들 수 있습니다.

4.어뎁티브 메뉴(Adaptive Menu)
MRU 리스트 개념을 메뉴에 도입한 방식으로, 사용자의 검색 히스토리나 빈도수가 높은 항목들을 메뉴에 우선적으로 나타나게 하는 것을 말합니다. 위 화면과 같이 자주 쓰는 메뉴만 보여지며 확장 버튼을 눌러 모든 메뉴를 확인할 수 있습니다. MS Office Tool 2000, 2003에서 기본 설정으로 제공되다가 리본 메뉴가 출현하면서 현재는 폐기되었습니다.

5.테어오프 메뉴(Tear-off Menu)
'떼어내다, 벗기다'의 의미를 가진 테어오프 메뉴는 메뉴 바를 드래그하여 임의의 장소에 배치할 수 있는 메뉴입니다. 혹은 아래의 그림처럼 도구 툴의 가장자리에 있는 Cue를 선택할 시 해당 도구가 Window형식으로 분리됩니다.

6.메가메뉴(Mega Drop-down Menu)
얼마 전 pxd에서 포스팅한 Global Navigation Bar 디자인에서도 메가 메뉴에 대한 소개한 바가 있듯이, 메가 메뉴란 글로벌 내비게이션 바(GNB)에 위치한 특정 메뉴에 마우스 롤오버 했을 시 나타나는 대형 메뉴를 말합니다. 일반적인 드롭다운 메뉴보다 훨씬 많은 메뉴를 표시할 수 있으며 메가 메뉴 안에서도 상세 분류를 할 수 있습니다. 카테고리를 명확하게 분류하여 메뉴를 찾기 쉽도록 기획해야 하며 주로 쇼핑몰 같은 대형 웹사이트에 적용됩니다.

요즘은 메가 메뉴에 텍스트와 이미지를 혼합하는 방식이 많이 사용되고 있습니다. 확실히 이미지를 적절한 상황에 잘 사용했을 때 메뉴를 인지하기가 한결 수월하게 느껴집니다. 또한 단순히 메뉴를 나열하는 데 그치지 않고 표시하는 정보도 유연해지고 있습니다. 위의 그림처럼 BMW는 자사의 모델명을 글로벌 내비게이션에 배치하고 메가 메뉴에 해당 모델 시리즈를 소개하고 있습니다. 기존 메뉴와 차별화된 점이 매우 신선했습니다. 그렇다면 메가 메뉴의 몸집이 이렇게 커지는 것이 좋은 일일까요? 메뉴에 마우스를 드래그 하는 동작으로 사용자가 기대하는 것은 그렇게 큰 역할은 아닐 것이라는 생각이 듭니다. 화면을 반 이상 가린다거나 너무 많은 정보를 표시하려고 한다면 답답하거나 거부감마저 들 수 있을 것입니다. 언제까지나 '사용자가 목표 메뉴를 찾아가기 쉽게 구성해야 한다'는 기본 목적에 충실해야 한다는 점을 염두해두어야 합니다.

7.컨텍스트-센서티브 내비게이션(Context-sensitive Navigation)
특정 상황에서만 제공되는 컨트롤입니다. 위에서 정의한 컨텍스트 메뉴와도 맥락이 유사한데, 팝업 형태가 아닌 다양한 방식으로 사용될 수 있다는 점이 다릅니다. 위의 화면처럼 사진 상단에 있는 메뉴 버튼은 평소에는 나타나지 않다가 마우스 포인터를 해당 사진 영역 안에 옮기는 순간 나타납니다. 리치 인터페이스 디자인 서적에서는 '마우스오버 노출도구' 라고도 정의하였는데 포함되는 개념입니다. 혹은 Gmail에서 삭제, 스팸처리 등의 메뉴는 메일 리스트를 선택(Check)하였을 시에만 제공되는데요, 이렇게 상황에 맞게 그때 그때 나타나는 메뉴를 부르는 용어입니다.

출처

http://story.pxd.co.kr/

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

'UI/UX' 카테고리의 다른 글

UX의 눈으로 NHN Band를 바라보다 (0)	2013/04/29
UX 신입 디자이너가 알아야 할 UI디테일 용어 3탄 (0)	2013/04/29
UX 신입 디자이너가 알아야 할 UI디테일 용어 2탄 (0)	2013/04/29
UX 신입 디자이너가 알아야 할 UI디테일 용어 1탄 (0)	2013/04/29
UI 패턴을 다룬 웹사이트 모음 (0)	2013/04/29
UI 패턴과 원칙을 다룬 국내 도서 모음 (0)	2013/04/29

UX 신입 디자이너가 알아야 할 UI디테일 용어 1탄

모찌라긔~ ♡ 모찌 ♡ — Mon, 29 Apr 2013 16:17:40 +0900

드롭다운 리스트 (Drop-down List)
객관식 문제에서 볼 수 있는 선택지와 유사한 개념입니다. 맨 처음 진입 시에는 프로그램에서 지정한 기본값이 보여지다가 화살표 버튼을 누르면 숨어 있던 다른 항목들이 나타납니다. 이 중 특정 항목을 선택하게 되면 기본값이 사용자가 선택한 항목으로 바뀌는데, 이로써 사용자는 자신이 원하는 항목이 선택된 것임을 인지할 수 있습니다. 반면 처음부터 펼쳐진 형태는(즉 드롭다운 하지 않는 형태는) 그냥 리스트 박스라고 부릅니다.

콤보 박스 (Combo Box)
드롭다운 리스트와 입력 필드 기능을 결합(그래서 콤보!)한 형태입니다. 사용자가 직접 정보를 입력하거나 나열된 항목들 중에서 하나의 항목을 선택하여 정보를 입력할 수 있습니다. 흔히 Office Tool에서 개체 혹은 텍스트 속성을 입력할 때 사용됩니다.

라디오 버튼 (Radio Button)
윈도우나 팝업의 선택 영역에서 어느 하나를 선택 또는 취소하기 위해 사용하는 버튼입니다. 일련의 선택 항목 중 단 하나의 항목만 선택할 수 있습니다.

체크 박스 (Check Box)
반면, 또 다른 선택 수단인 체크 박스는 동시에 여러 개를 선택할 때 사용됩니다. 틱 박스(Tick Box)라고도 불립니다. 또한 다중 선택 뿐만 아니라 On/Off 개념으로 사용되기도 하는데요. 라디오 버튼과 체크 박스 이 두 컴포넌트는 모바일 환경에서도 널리 사용되어 사용자에게 매우 친숙한 컨트롤입니다.

토글 (Toggle Button/Switch)
On/Off를 설정할 때 쓰이는 위와 같은 컨트롤을 토글 버튼(위) 혹은 토글 스위치(아래)라고 부릅니다. 토글 버튼의 경우 언뜻 보기에는 버트콘 같지만 선택 시에 음각(눌린) 상태로 변하는데 해당 항목이 실행되고 있음(On)을 의미하며, 다시 누를 시에는 볼록한 원래 상태(Off)로 되돌아옵니다. 토글 스위치는 모바일에서 주로 사용되며 손가락으로 직접 스위치를 좌우로 움직이거나 영역을 선택하여 On/Off 상태를 조절합니다. 이 때, 사용자가 현재 상태를 인지할 수 있는 시각적인 피드백이 반드시 필요합니다.

버트콘 (Butcon) / 툴바 (Tool Bar)
버트콘이란 버튼과 아이콘의 조합으로서 앨런 쿠퍼가 그의 저서 About Face에서 이 용어를 정의하였습니다. 쉽게 말해 버튼 기능이 있는 아이콘입니다. 리본 메뉴, 툴바에 적용되면서 기존 문자 중심의 드롭다운 메뉴를 대체할 강력한 컴포넌트로 자리잡았습니다. 그리고 이러한 버트콘을 사용자의 기호 및 필요에 따라 바(Bar)형태로 모아놓은 것이 툴바입니다. MS에 의해 처음으로 소개된 개념으로 '도구 모음'이라고도 불립니다.

툴팁 (Tooltip)
사용자가 특정한 메뉴에 마우스 롤오버 시 약 1~2초 뒤에 해당 메뉴에 대한 설명이 말풍선 형태로 제공됩니다. 위에 정의한 버트콘은 사용자가 학습하기 전에는 식별이 어려울 수 있다는 치명적인 단점이 있는데, 툴팁은 이 점을 잘 보완할 수 있는 도구입니다.

스피너 (Spinner)
대표적인 숫자 입력 컨트롤입니다. 편집 필드와 우측 옆의 작고 납작한 두 개의 화살표으로 구성되어 있습니다. 현재 필드에 입력된 숫자값을 기준으로 위아래 화살표 버튼을 눌러 조절하거나 혹은 편집 필드에 직접 원하는 숫자값을 입력할 수 있습니다.

다이얼 (Dial)
일전에 pxd에서 주제로 다룬 '스큐어모피즘'의 예라고 볼 수 있는데요. 놉(Knob)이라고도 불리며, 실제 기계의 메타포를 적용시킨 사례입니다. 현실에서는 사용자가 손으로 직접 다이얼을 잡고 좌우측으로 돌려 값을 조절하는데, 컴퓨터에서는 마우스 드래그(Drag) 혹은 클릭(Click)동작으로 대신합니다. 주로 음향을 조절할 때 쓰이기 때문에 Garage band 같은 작곡 응용프로그램에서 많이 쓰입니다.

슬라이더 (Slider)
리얼메타포를 사용하고 있는 또 다른 경우입니다. 콤보 상자의 경우 사용자가 입력 가능한 범위를 모르는 상태에서 입력하는 상황에 처할 수 있는데 반해, 슬라이더는 입력값이 제한되어 있음을 시각적으로 인지할 수 있습니다. 다시 말해 사용자가 부적절한 값을 입력할 가능성이 없기 때문에 상당히 직관적인 컨트롤이라고 할 수 있습니다.

입력 필드 (Text Input Field)
사용자가 키보드로 직접 텍스트를 입력하는 곳으로서 편집 필드 또는 텍스트 상자 등으로도 불립니다. 특정 항목의 속성을 입력할 때 외에도 검색, 정보 입력 등 상황에 따라 각기 다른 목적으로 사용됩니다. 여러 줄을 입력할 수 있을 때는 입력 영역(Text Area)이라고도 부릅니다.

드롭다운 메뉴 (Drop-down Menu)
풀다운 메뉴(Pull-down Menu)라고도 하며, 가장 전형적이고 어디에서나 볼 수 있는 메뉴 스타일입니다. 메뉴의 제목이 표시되어 있는 곳을 선택하면 메뉴가 아래로 펼쳐집니다. 메뉴 내의 항목으로 마우스의 포인터를 옮기면 그에 따라 각 항목이 반전되고, 클릭하면 그 항목이 선택 및 실행됩니다. 약 3년 전부터는 드롭다운 메뉴의 변형인 메가 메뉴(2편에서 소개할 예정)가 널리 활용되고 있습니다.

리본 메뉴 (Ribbon Menu)
기존에 있는 텍스트 기반의 드롭다운 메뉴를 보완하기 위해 MS에서 툴바에 탭을 결합한 형태를 선보입니다. MS Office 2007부터 도입되었는데요. 위 화면에서 알 수 있듯이 눈에 익숙한 버트콘의 조합으로만 이루어져 있거나, 버트콘으로만 식별하기 어려운 메뉴의 경우 버튼에 icon과 메뉴명을 함께 표기하고 있습니다. 드롭다운 메뉴에만 익숙했던 사용자는 이러한 리본 메뉴를 처음 접할 시에 매우 당황하지만 지속적인 사용 과정을 거침으로써 반복적이고 자주 접근하는 메뉴를 자연스럽게 사용할 수 있게 됩니다. 이처럼 시각적인 요소를 보완하여 드롭다운 메뉴보다 직접적인 장점이 있지만 모든 메뉴를 풀어놓기 때문에 복잡해보이는 단점도 있습니다. 결국 한글 오피스에서는 드롭다운 메뉴와 리본 메뉴를 모두 제공하는 다소 부자연스러운 해결책을 내놓고 있는데, 이처럼 리본 메뉴는 앞으로도 개선될 여지가 있다고 봅니다.

트리 메뉴 (Tree Menu)
목록의 보기 방식 중 하나로서 계층 구조를 표시하는 데 유용합니다. 윈도우 탐색기에서 대표적으로 쓰이고 있습니다.

GNB (Global Navigation Bar)
웹페이지에 표시되는 하이퍼링크들의 집합 영역을 말합니다. 쉽게 말해 웹사이트에서 항상 표시되는 메뉴로서 탑 메뉴, 메인 메뉴라고도 불립니다. 주로 웹사이트의 상단 혹은 좌측에 고정으로 위치하며 바(Bar), 탭(Tab), 드롭다운 메뉴 등의 메뉴 형태로 제공됩니다.

LNB (Local Navigation Bar)
서브 메뉴라고 불리며 웹사이트의 좌측에 주로 위치합니다. 위치는 고정되어 제공되나 항목은 진입하는 메뉴에 따라 다르게 제공됩니다.

대화 상자 (Dialog Box)
사용자의 지시 사항이나 어떤 사항에 대한 결정을 묻기 위해 사용자가 하던 일을 잠시 멈추게 하는 창을 말합니다. 우리에게는 팝업(Pop-up)이라는 용어가 보다 익숙한데요, 대화 상자라고 부르는 이유는 말 그대로 컴퓨터와 사용자 사이에 대화를 제공하기 때문입니다. 대화 상자는 목적에 따라 다양한 형태로 호출됩니다. 크게 오류 등 공지가 필요한 경우, 사용자가 선택한 대상의 속성을 지정하는 경우, 작업의 진행 상황을 알리는 경우, 사용자가 선택한 사항을 재 확인하는 경우 등으로 나뉠 수 있습니다.

출처

http://story.pxd.co.kr

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

'UI/UX' 카테고리의 다른 글

UX의 눈으로 NHN Band를 바라보다 (0)	2013/04/29
UX 신입 디자이너가 알아야 할 UI디테일 용어 3탄 (0)	2013/04/29
UX 신입 디자이너가 알아야 할 UI디테일 용어 2탄 (0)	2013/04/29
UX 신입 디자이너가 알아야 할 UI디테일 용어 1탄 (0)	2013/04/29
UI 패턴을 다룬 웹사이트 모음 (0)	2013/04/29
UI 패턴과 원칙을 다룬 국내 도서 모음 (0)	2013/04/29

UI 패턴을 다룬 웹사이트 모음

모찌라긔~ ♡ 모찌 ♡ — Mon, 29 Apr 2013 14:41:25 +0900

1. Mobile UI design patterns
http://sixrevisions.com/user-interface/mobile-ui-design-patterns-inspiration/

2. 모바일 앱 UI 패턴 사이트 모음
http://userexperience.tistory.com/272

3. 모바일 UI 디자인 패턴 참고 사이트 15개
http://monsterdesign.tistory.com/1630

4. 모바일/웹 UI 패턴, 쇼케이스, 가이드라인 및 리소스
https://sites.google.com/site/designpttrns/

출처

http://story.pxd.co.kr/

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

'UI/UX' 카테고리의 다른 글

UX의 눈으로 NHN Band를 바라보다 (0)	2013/04/29
UX 신입 디자이너가 알아야 할 UI디테일 용어 3탄 (0)	2013/04/29
UX 신입 디자이너가 알아야 할 UI디테일 용어 2탄 (0)	2013/04/29
UX 신입 디자이너가 알아야 할 UI디테일 용어 1탄 (0)	2013/04/29
UI 패턴을 다룬 웹사이트 모음 (0)	2013/04/29
UI 패턴과 원칙을 다룬 국내 도서 모음 (0)	2013/04/29

UI 패턴과 원칙을 다룬 국내 도서 모음

모찌라긔~ ♡ 모찌 ♡ — Mon, 29 Apr 2013 14:39:39 +0900

1. 웹 폼 디자인
루크 로블르스키 저 | 민은식, 김성은 역 | 인사이트 | 2009년 발행
http://book.naver.com/bookdb/book_detail.nhn?bid=6028170

2. 리치 인터페이스 디자인
빌 스콧, 테레사 닐 저 | 이은아, 김기형, 구신애, 윤지혜 역 | 인사이트 | 2010년 발행
http://book.naver.com/bookdb/book_detail.nhn?bid=6255460

3. 소셜 인터페이스 디자인
크리스천 그림리시, 에린 멀론 저 | 윤지혜, 남보현, 신나리 역 | 인사이트 | 2011년 발행
http://book.naver.com/bookdb/book_detail.nhn?bid=6764990

4. 검색 패턴
제프 칼렌더, 피터 모빌 저 | 김소영 역 | 한빛미디어 | 2010년 발행
http://book.naver.com/bookdb/book_detail.nhn?bid=6440010

5. 웹사이트 해부하기
로버트 후크만, 제라드 스풀 저 | 박지은, 정승녕 역 | 인사이트 | 2012년 발행
http://book.naver.com/bookdb/book_detail.nhn?bid=6792964

6. UX 디자인 7가지 비밀
박지수, 김현 저 | 안그라픽스 | 2013년 발행
http://book.naver.com/bookdb/book_detail.nhn?bid=7170392

7. Designing web navigation
제임스 콜백 저 | 김소영 역 | 한빛미디어 | 2008년 발행
http://book.naver.com/bookdb/book_detail.nhn?bid=4486815

8. 오래가는 UX 디자인
반준철 저 | 한빛미디어 | 2013년 발행
http://book.naver.com/bookdb/book_detail.nhn?bid=7131918

9. 퍼소나로 완성하는 인터랙션 디자인 About face 3
앨런 쿠퍼, 로버트 라이만, 데이비드 크로닌 저 | 김나영, 고태호, 유지선 역 | 에이콘출판사 | 2010년 발행
http://book.naver.com/bookdb/book_detail.nhn?bid=6401320

10. Designing interfaces
제니퍼 티드웰 저 | 김소영 역 | 한빛미디어 | 2007년 발행
http://book.naver.com/bookdb/book_detail.nhn?bid=2954032

11. 아이폰 앱 디자인 정석
조시 클라크 | 김은희, 신미원, 이청언 역 | 한빛미디어 | 2012년 발행
http://book.naver.com/bookdb/book_detail.nhn?bid=6831349

12. Human computer interaction 개론
김진우 저 | 안그라픽스 | 2012년 발행(개정판)
http://book.naver.com/bookdb/book_detail.nhn?bid=6863839

13. UI디자인을 잘 하기 위한 테크닉 80
노주환 저 | 비비컴 | 2002년 발행 (절판)
http://book.naver.com/bookdb/book_detail.nhn?bid=108792

14. 모바일 디자인 전략
조셉 카트먼, 리차드 팅 저 | 이재명, 이예나 역 | 위키북스 | 2011년 발행
http://book.naver.com/bookdb/book_detail.nhn?bid=6459751

15. 모바일 애플리케이션 UI 라이브러리
노주환 저 | 멘토르출판사 | 2011년 발행
http://book.naver.com/bookdb/book_detail.nhn?bid=6627677

16. The design of sites
더글러스 벤 듀인, 제임스 렌데이, 제이슨 홍 저 | 정유한, Yuna, 고태호 역 | 에이콘출판사 | 2011년 발행
http://book.naver.com/bookdb/book_detail.nhn?bid=6656725

17. 웹 스타일 가이드
사라 호튼, 패트릭 린치 저 | 김노경 역 | 인사이트 | 2011년 발행
http://book.naver.com/bookdb/book_detail.nhn?bid=6714944

18. 경험 디자인의 요소
제시 제임스 가렛 저 | 방수원 역 | 한솜미디어 | 2006년 발행
http://book.naver.com/bookdb/book_detail.nhn?bid=264361

19. 콘텐츠 UX 디자인
제니스 레디쉬 저 | 이지현, 이춘희 역 | 위키북스 | 2011년 발행
http://book.naver.com/bookdb/book_detail.nhn?bid=6771017

20. 모든 기획자와 디자이너가 알아야 할 사람에 대한 100가지 사실
수잔 웨인쉔크 저 | 이재명, 이예나 역 | 위키북스 | 2012년 발행
http://book.naver.com/bookdb/book_detail.nhn?bid=6827383

출처

http://story.pxd.co.kr/

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

'UI/UX' 카테고리의 다른 글

UX의 눈으로 NHN Band를 바라보다 (0)	2013/04/29
UX 신입 디자이너가 알아야 할 UI디테일 용어 3탄 (0)	2013/04/29
UX 신입 디자이너가 알아야 할 UI디테일 용어 2탄 (0)	2013/04/29
UX 신입 디자이너가 알아야 할 UI디테일 용어 1탄 (0)	2013/04/29
UI 패턴을 다룬 웹사이트 모음 (0)	2013/04/29
UI 패턴과 원칙을 다룬 국내 도서 모음 (0)	2013/04/29

[ハヤシライス] 하야시 라이스

모찌라긔~ ♡ 모찌 ♡ — Thu, 18 Apr 2013 11:03:14 +0900

하야시라이스는 얇게 썬 쇠고기와 양파를 버터로 볶아 적포도주와 토마토 소스가 들어간 데미글라스 소스와 함께 밥 위에 부은 음식입니다. 일본의 대표적인 서양식의 하나로, 일본인들에게 소울푸드로 인정받을 만큼 많은 사랑을 받는 음식이랍니다.

‘하야시’라는 명칭의 유래에 대해서는 여러 가지 설이 많은데요, Hashed beef with Rice의 Hashed가 ハッシ 또는 ハイシ로 잘못 불리게 된 설, 어떤 레스토랑에서 린(林, 훈독: はやし)이라고 하는 요리사가 처음 만들었기 때문이라고 하는 설, 마루젠(丸善)의 창업자이다 하야시 유테키(早矢仕有的, はやしゆうてき)가 고안 했기 때문에 하야시라고 불리게 된 설, 쇠고기를 식용하지 않았던 시대에 쇠고기가 들어간 요리를 먹으면 요절한다(早死(はやし)にする라는 말에서 유래되었다는 설, 청일 전쟁 후에 문을 연 큐슈의 어떤 레스토랑에서 배를 타기 위해 서두르는 손님에게 팔기 위해 빨리 만들었다는 의미에서 하야이 라이스, 早(はや)いライス라고 불렸다는 설 등이 있습니다.

참 많죠? 우리나라도 맛있는 음식에는 “원조”가 정말 많잖아요. 그것처럼 하야시 라이스도 사랑 받는 만큼 ‘설’들이 많은가 보네요.

지방에 따라 불리는 명칭도 조금씩 다른데요, 오사카와 고베에서는 하이시라이스(ハイシライス)라고 하며, 줄여서 하이라이(ハイライ)라고 부르는 경우도 있다고 하네요.

하야시 라이스 사진을 보고 아신 분들도 있겠지만, 하야시 라이스는 우리가 알고 있는 하이라이스가 맞답니다. 하지만 모든 외국의 음식이 그렇듯, 하야시 라이스도 우리나라에 들어오면서 우리나라 입맛에 맞게 맛이 조금 바뀌었는데요, 아주 큰 정도는 아니지만 맛이 조금 다르답니다.

그러면 다음으로 대망의 레시피를 함께 알아볼까요?

먼저 준비해야 할 것은, 식용유, 양파, 양송이 버섯, 쇠고기(또는 돼지고기), 물, 하야시라이스 가루입니다.

먼저 식용유에 양파, 쇠고기, 양송이 버섯을 볶습니다.

어느 정도 볶아졌으면 물을 붓고 냄비 뚜껑을 덮고 약불에서 잠시 끓이다가 야채가 푹 익으면 불을 끕니다.

이제 하야시라이스 가루를 넣은 후 약불에서 잘 녹입니다. 그 다음 케첩을 조금 넣고 다시 잠시 저어주면 완성입니다. 간단하죠?

2008년에 방영한 일본 드라마 『유성의 인연 (流星の絆)』에 이 하야시 라이스가 나오는데요, 등장인물 삼남매의 소울푸드로 등장한답니다.

드라마에도 하야시 라이스를 만드는 장면이 나오니 이번 주말에는 유성의 인연과, 하야시 라이스와 함께 여유로운 시간을 보내시는 것도 좋을 것 같네요.

mozzi>> 전에 한번 블로깅 한 적이 있는 다카다노바바에 소박하고 아담한 맛집에서 맛있는

하야시 라이스를 드실 수 있답니다.

http://www.ohayomozzi.com/entry/다카다노바바-Patio

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

'니뽕뜯어보기 > 니뽕궁금해~(펌)' 카테고리의 다른 글

<성인의 날> (0)	2013/05/01
[ハヤシライス] 하야시 라이스 (0)	2013/04/18
<멘타이코> (0)	2013/04/10
<바사시> (0)	2013/03/25
<하나미> (0)	2013/03/25
<오세이보> (0)	2013/01/17