컴포넌트, 페이지, 프레임 등의 다양한 단위로 작업 중인 부분을 나눌 수 있다. 자유도도 매우 높다. 못 그리는 것이 없다.
Flow Chart도 그려줄 수 있다.
Figma 링크 자체를 Github wiki등에 공유하면 간단하게 기획단계의 상황을 공유할 수 있다.
3. 무작정 사용해 보기
1. 오른쪽 위의 "+" 버튼을 눌러서 파일을 만든다.
2. 상단 중간에 파일 이름을 정해두고, 상단 탭의 3번째를 눌러서 작업물의 사이즈를 정한다. 웹이라면 Desktop, 휴대폰 등 알맞게 지정하면 된다. 반응형 디자인을 생각할 때 도 똑같이 만들 수 있다.
3. 오른쪽 탭에서 폰트나 테두리, 사이즈 등을 조절할 수 있다. 초등학교 때 썼던 그림판처럼 이것저것 그려서 상상력을 표현해 보자!
한동안은 Miro를 사용해서 작업을 했었다. 자유도가 조금 떨어진다고 생각했다. Figma가 조금 더 다루기 어렵긴 하지만 적응하니 훨씬 편하다. 디자이너와 개발자에게 다양한 기능으로 UX가 뛰어난 서비스인 것 같다. 그래도 사용에 연습이 필요하다면, 자신의 포트폴리오 등을 만들어 보면서 연습하면 좋은 경험이 될 것 같다.
유저를 공감하여, 서비스를 사용함에 있어서 목적을 쉽고 빠르게 달성하기 위한 수단을 만드는 것이 알맞은 유저 친화적 디자인의 목적이다.
콘텍스트 : 사용자가 누구인지 파악한다.
목표 : 서비스를 이용하여 어떤 목표를 달성하려고 하는 것인지 파악한다.
리서치 : 사용자의 전, 후 사정을 이해한다.
패턴 : 일반적인 인터페이스의 디자인에 대한 일반화된 유저의 인식과 행동을 파악한다.
위의 4가지 영역으로 디자인 프레임워크는 구성되어 있다.
2. 사용자의 주변 환경을 파악하기
인터페이스를 사용할 때 유저가 어떤 의도가 있는지, 혹은 얼마나 이 서비스에 대해 잘 알고 있는지 등이 의사결정에 많은 영향을 미친다.
예를 들어, 어린 시절부터 게임을 즐기던 우리 세대 친구들은 새로운 게임을 접해도 쉽게 적응한다. 사전에 경험도 많고, 어린 시절 다양한 게임을 접하고 좋은 기억도 가지고 있을 수 있기 때문에 적극적으로 사용하려고 할 것이니 말이다. 하지만 이때까지 게임을 해 보지 않은 부모님 새대는 몹시 어렵고 즐기기 힘들 것이다.
3. 유저의 입장에서 생각하기
조금 더 단순하게 생각해야 한다. 사용자의 입장에서 이 서비스를 사용할 때 어디에 눈이 가는가? 혹은, 개발할 때 이미 다 알고 사용할 때 '쉽네!' 하고 생각하는 개발자의 입장이 아닌, 유저의 입장에서 태어나서 처음 보는 서비스인 양 사용해 보는 그런 상황에서 어떻게 서비스가 사용될 것인가? 를 생각해야 한다.
4. 인터랙션 === 대화
인간과 인간의 대화처럼 어떠한 행동이 오면 어느 정도 예측이 가능한 대답이 오고, 그에 따른 행동 등이 오기도 한다.
인터페이스를 통한 컴퓨터 간의 소통도 마찬가지이다. 만약, 기대하는 대답과 전혀 다른 반응이 오면 당황스럽고, 아예 응답이 오지 않는다거나 너무 느리다면 유저는 화가 날 것이다. 마치, 말을 무시당할 때처럼 말이다.
5. 유저의 숙련도를 생각하자
전문가들이 사용할 것이라고 기대되는 서비스(ex: 동영상 편집 프로그램, 코드 편집기 등)라면 이미 숙련도가 어느 정도 있거나 배울 의지가 있는 유저들이 사용할 것이다. 그렇다면 조금 어렵더라도 목적에 따라 다양한 기능들을 넣은 서비스를 만드는 것이 옳다.
하지만, 가끔 사용하거나 숙련도가 높지 않은 사람들이 사용할 것이라고 기대되는 서비스(ex: 노래방 기계, SNS 등 )는 접근성도 높아야 하고 누구나 사용하기 편해야 한다. 그래서 어려운 기능보다는 더 직관적이고 사용하기 쉽게 만들어야 한다.
만약, 그런 서비스가 사용하기 어렵다면 유저는 이탈한다. 그만큼 노력을 들여 배워서 그런 서비스를 이용하려 하지 않을 가능성이 높다.
ts 파일 자체는 브라우저가 올바르게 읽을 수 없다. 그래서 컴파일 해야한다. tsc -w를 터미널에 입력하면 자동으로 변환된다.
4. 간단한 문법
let name :string = 'hendrix';
name = 111;
// 위의 경우 에러 발생. name은 string 타입으로 설정 되어 있기 때문에 다른 타입은 올 수 없음
let list : string[] = ['a', 'b', 'c'];
list = ['a', 'b', 1]
// 위의 경우 에러 발생. list 안의 요소의 타입은 항상 string 이기 때문!
let name :{ name? : string } = { name: 'hendrix' };
// 위의 경우 ? 로 어떤 타입이 들어갈지 모른다! 라는 것을 표시하였기 때문에 에러는 나지 않는다.
// 마찬가지로 | 연산자나 &도 사용가능하다.
type MyType = string | number;
let hello :MyType = 'world';
// 위 처럼 type을 이용해서 타입 자체를 변수에 할당할 수 도 있다. 대문자로 선언하자.
function func(el: number) :number {
return el + 1;
}
// 위의 함수처럼 함수의 인자의 타입과 결과물의 타입을 설정할 수 도 있다.
type SetType = [string, string, boolean]
// arr 형태로 각 요소의 순서에 따라도 타입을 설정 할 수 있다.
type ListType = {
[ket: string] : string
}
// 글자로 된 모든 object 속성 타입은 string
