전체 글 45

UI/UX 디자인 휴리스틱 원칙 (10 Usability Heuristics for User Interface Design)

Heuristic(휴리스틱)이란 ‘체험적인’ 이라는 의미로, 완벽한 지식 대신 직관과 경험을 활용하는 방법론입니다. 행동 경제학에서는 전통의 경제학의 ‘경제적 인간’처럼 인간이 언제나 이성적이고 합리적인 결정을 내린다고 생각하지 않습니다. 행동 경제학의 핵심은 인간의 비합리적인 행동을 심리/사회/감정적 관점에서 보고 파악해야 한다는 것입니다. Jakob’s Ten Usability Heuristics 제이콥 닐슨이 제시한 10가지 사용성 평가 기준을 충족하면 더 보기좋고 효율적인 UI, 더 좋은 UX를 만들 수 있습니다. 사용성 평가 기준은 서비스중인 애플리케이션을 평가하기 위한 목적으로도 사용할 수 있지만, 제품 설계 단계에서 더 완성도 있는 애플리케이션을 기획하기 위해서도 사용할 수 있습니다. 제품과..

피터 모빌(Peter Morville)의 유저 경험 허니콤(User Experience Honeycomb)

좋은 UX를 만들기 위해 무엇을 고려해야 할까요? UX 필드의 선구자 중 한 명인 피터 모빌(Peter Morville)은 2004년 발간한 저서 '검색 2.0: 발견의 진화 ambient findability’에서 User Experience Honeycomb이라 불리우는 7가지 요소를 제시했습니다. 이 벌집 모형에서 제시한 UX의 7가지 요소를 알아봅시다. 유용성(Useful) : 사용 가능한가? 사용성(Usable) : 사용하기 쉬운가? 매력성(Desirable) : 매력적인가? 신뢰성(Credible) : 신뢰할 수 있는가? 접근성(Accessible) : 접근하기 쉬운가? 검색 가능성(Findable) : 찾기 쉬운가? 가치성(Valuable) : 가치를 제공하는가? 1. 유용성(Useful) ..

UI와 UX, 그래서 뭐가 다를까

제품과 서비스를 기획하는 과정에서 UI/UX라는 말을 많이 사용합니다. 두 단어는 모두 User라는 말을 포함하고 있고, 실무에서 모호하게 사용되는 경우도 많습니다. 하지만 자세히 들여다보면 차이점이 있습니다. UI/UX 기본 개념 UI(User Interface) : 사용자 인터페이스 UI는 ‘사용자가 제품/서비스와 상호 작용하는 시스템’을 의미합니다. 보통 떠올리는 화면상의 그래픽 요소로 폰트, 컬러, 레이아웃 외에도, 키보드/마우스 등의 물리적 요소 역시 컴퓨터와 상호 작용하기 위한 시스템이므로 UI라고 볼 수 있습니다. 과거 휴대폰은 디스플레이가 있긴 했지만, 주로 숫자와 방향키 등 다양한 물리적 UI의 형태였습니다. 후에 스마트폰이 대중화되면서 화면 터치를 통한 상호작용의 비중이 높아졌지요. 스..

비동기처리와 Callback

JavaScript는 싱글 스레드이기 때문에 동기적으로 실행되지만, JS가 구현되는 런타임은 비동기적 구현이 가능한 환경이라고 했습니다. 원하는 순간에 따라 코드를 동기적으로/비동기적으로 다뤄야 할 일이 생길 겁니다. 이를 다루기 위해 어떤 걸 사용해야 하는지 알아봅시다. JavaScript는 순서대로 작동한다? 📌 동기적 처리(Synchronous) 콘솔로 코드를 한번 작성해 봅시다. 아래의 코드는 어떤 순서대로 출력될까요? console.log('log 1') console.log('log 2') console.log('log 3') 자바 스크립트는 순서대로 작동한다고 했습니다. 위의 코드도 순서대로 출력이 되었네요. 그럼 조금 다른 예시를 들어 볼게요. 아래의 코드는 어떤 순서대로 출력될까요? co..

11월 마지막

글을 그동안 안썼는데... 너무 개인적이라 서술하지 못하는 가족 일들이 몇 개 겹쳐서 글을 쓸 만한 여유가 좀 없었다. 저번주 잠도 제대로 못잔듯 지금은 다 해결되었지만 암튼... 내가 통제 불가능한 외부 자극에 생각보다 훨씬 취약한 인간임을 다시한번 뼈저리게 깨달았음. 예민한 사람이 되고 싶지 않은데 그냥 타고나길 어쩔 수 없는 건 있나봄. 제발 멘탈케어 plz 비동기 파트에서 정체걸린 추석 고속도로 상황같은 꼴 되어버렸다. 아무리 들여다봐도 안풀려서 이거에 시간 정말 많이 할애한듯... ㅜ 실시간 세션에서 농담삼아 '음주 코딩' 하시길래 주말에 반쯤 웃으면서 술한캔 땡겼는데 그때 벼락같이 깨달은 순간이 있음. 이게 경력자의 지혜...? 그래도 나머지는 긴가민가 혀.... 지금 수업은 리액트 진행중이고..

동기(Synchronous)와 비동기(Asynchronous)

혼자서 이해하기 위해 쉽게 풀어쓰다보니 오류가 있을 수도 있습니다! 틀린 내용이 있다면 말씀 주세요. 동기와 비동기 동기와 비동기는 일종의 수행 방식의 차이입니다. 어떠한 일을 동기적으로 처리한다, 비동기적으로 처리한다라고 이해해주시면 될 것 같아요. 컴퓨터 공학에서 동기적인 방식과 비동기적 방식이 어떻게 이루어지는지 알아봅시다. 📌 동기(Synchronous) 동기적인 방식은 요청과 결과가 순차적으로 일어납니다. 1번 요청→1번 대한 결과→2번 요청→2번에 대한 결과→(…) 이런 식으로 일을 수행하죠. 순서대로 일이 수행되니 설계 방식이 비교적 간단하고 직관적입니다. 하지만 어떠한 요청에 수행 시간이 오래 걸린다면 어떻게 될까요? 결과가 나오기 전까지 다음 요청들은 모두 대기를 해야 할 겁니다. 📌 비..

11월은 일주일 남았고 나는 아직도

요즘 집근처 잠깐잠깐 나갈 때면 날이 으슬으슬한게 나도 모르는 사이에 겨울이 왔구나 싶다. 이번주는 자전거에 바람을 넣었고, 주말엔 어머니 아버지와 데이트를, 토이 프로젝트는 세 번째 회의를 거치고, 수업은 섹션 2로 넘어갔다. 매일 집에만 처박혀 있는 것 같은데 막상 기록해보면 하루가 참 다양하게도 채워져 있는구나, 싶다. 멘탈 관리는 제법 되고 있다, 놀랍게도. 호기롭게 자전거 바람 넣고 올거라 했는데... 집근처 공공펌프 다 고장나서 결국 이번 기회에 하나 장만했다. 자전거 산지 4년이니 솔직히 살때 되긴 했지... 픽시랑 스트라이다가 다른 바퀴 방식이라 어케 하나 싶었는데 요즘은 호환도 잘 나오더라. 기압계까지 달려 있는 든든한 놈으로다가 하나 사뒀다. 원칙대로라면 자전거 바퀴에 바람은 2주에 한..

프로토타입(prototypes)과 프로토타입 체인

JS는 프로토타입 기반 언어(prototype-based language)이다. JS의 빠질 수 없는 개념이자, JS 그 자체라 이해가 어렵고 개념도 복잡할 것이다. 하지만 ‘프로토타입’을 한 마디로 설명하기는 조금 어렵다. 차근차근 이해하는 시간을 가져 보자. 프로토타입 기반 언어 앞서 객체 지향 언어에 대해 공부하며 클래스와 인스턴스에 대해 공부했다. 중요한 점은, JavaScript는 ‘객체 지향 패턴’으로 작성되긴 하지만, 엄밀히 말해 ‘객체 지향 언어’는 아니다. 이 말인즉슨, 객체 지향 언어에서 사용하는 class라는 개념이 없다는 말이다. 그럼 어떻게 객체 지향 패턴을 작성하느냐 → 바로 Prototype을 통해 class의 상속을 흉내내는 것이다. JS가 프로토타입 기반 언어라고 불리는 이..