1. Figma?

• 실제 업무나 프로젝트를 진행할 때 가장 많이 사용하는 Tool이다.
• Ui 디자인이나 프레임워크 등을 그려서 팀원들과 서로 공유하고 협업하는 도구이다.

2. 장점

• 무료다. 이것보다 더 좋을 순 없다.
• 작업물이 자동으로 저장된다.
• 실시간으로 팀원들과 화면을 공유할 수 있다.
• 컴포넌트, 페이지, 프레임 등의 다양한 단위로 작업 중인 부분을 나눌 수 있다. 자유도도 매우 높다. 못 그리는 것이 없다.
• Flow Chart도 그려줄 수 있다.
• Figma 링크 자체를 Github wiki등에 공유하면 간단하게 기획단계의 상황을 공유할 수 있다.

3. 무작정 사용해 보기

1. 오른쪽 위의 "+" 버튼을 눌러서 파일을 만든다.

2. 상단 중간에 파일 이름을 정해두고, 상단 탭의 3번째를 눌러서 작업물의 사이즈를 정한다. 웹이라면 Desktop, 휴대폰 등 알맞게 지정하면 된다. 반응형 디자인을 생각할 때 도 똑같이 만들 수 있다.

3. 오른쪽 탭에서 폰트나 테두리, 사이즈 등을 조절할 수 있다. 초등학교 때 썼던 그림판처럼 이것저것 그려서 상상력을 표현해 보자!

한동안은 Miro를 사용해서 작업을 했었다. 자유도가 조금 떨어진다고 생각했다. Figma가 조금 더 다루기 어렵긴 하지만 적응하니 훨씬 편하다. 디자이너와 개발자에게 다양한 기능으로 UX가 뛰어난 서비스인 것 같다. 그래도 사용에 연습이 필요하다면, 자신의 포트폴리오 등을 만들어 보면서 연습하면 좋은 경험이 될 것 같다.

1. 디자인 프레임워크를 구성하는 기본적인 영역

• 유저를 공감하여, 서비스를 사용함에 있어서 목적을 쉽고 빠르게 달성하기 위한 수단을 만드는 것이 알맞은 유저 친화적 디자인의 목적이다.
• 콘텍스트 : 사용자가 누구인지 파악한다.
• 목표 : 서비스를 이용하여 어떤 목표를 달성하려고 하는 것인지 파악한다.
• 리서치 : 사용자의 전, 후 사정을 이해한다.
• 패턴 : 일반적인 인터페이스의 디자인에 대한 일반화된 유저의 인식과 행동을 파악한다.
• 위의 4가지 영역으로 디자인 프레임워크는 구성되어 있다.

2. 사용자의 주변 환경을 파악하기

• 인터페이스를 사용할 때 유저가 어떤 의도가 있는지, 혹은 얼마나 이 서비스에 대해 잘 알고 있는지 등이 의사결정에 많은 영향을 미친다.
• 예를 들어, 어린 시절부터 게임을 즐기던 우리 세대 친구들은 새로운 게임을 접해도 쉽게 적응한다. 사전에 경험도 많고, 어린 시절 다양한 게임을 접하고 좋은 기억도 가지고 있을 수 있기 때문에 적극적으로 사용하려고 할 것이니 말이다. 하지만 이때까지 게임을 해 보지 않은 부모님 새대는 몹시 어렵고 즐기기 힘들 것이다.

3. 유저의 입장에서 생각하기

• 조금 더 단순하게 생각해야 한다. 사용자의 입장에서 이 서비스를 사용할 때 어디에 눈이 가는가? 혹은, 개발할 때 이미 다 알고 사용할 때 '쉽네!' 하고 생각하는 개발자의 입장이 아닌, 유저의 입장에서 태어나서 처음 보는 서비스인 양 사용해 보는 그런 상황에서 어떻게 서비스가 사용될 것인가? 를 생각해야 한다.

4. 인터랙션 === 대화

• 인간과 인간의 대화처럼 어떠한 행동이 오면 어느 정도 예측이 가능한 대답이 오고, 그에 따른 행동 등이 오기도 한다.
• 인터페이스를 통한 컴퓨터 간의 소통도 마찬가지이다. 만약, 기대하는 대답과 전혀 다른 반응이 오면 당황스럽고, 아예 응답이 오지 않는다거나 너무 느리다면 유저는 화가 날 것이다. 마치, 말을 무시당할 때처럼 말이다.

5. 유저의 숙련도를 생각하자

• 전문가들이 사용할 것이라고 기대되는 서비스(ex: 동영상 편집 프로그램, 코드 편집기 등)라면 이미 숙련도가 어느 정도 있거나 배울 의지가 있는 유저들이 사용할 것이다. 그렇다면 조금 어렵더라도 목적에 따라 다양한 기능들을 넣은 서비스를 만드는 것이 옳다.
• 하지만, 가끔 사용하거나 숙련도가 높지 않은 사람들이 사용할 것이라고 기대되는 서비스(ex: 노래방 기계, SNS 등 )는 접근성도 높아야 하고 누구나 사용하기 편해야 한다. 그래서 어려운 기능보다는 더 직관적이고 사용하기 쉽게 만들어야 한다.
• 만약, 그런 서비스가 사용하기 어렵다면 유저는 이탈한다. 그만큼 노력을 들여 배워서 그런 서비스를 이용하려 하지 않을 가능성이 높다.

1. 문제의 발단

취업을 위해 이곳저곳 이력서를 쓰고 여기 보고 저기보고 하고 있는데 다들 'TypeScript' 이야기를 엄청 하는 것 같다. 얼마나 좋은 기술이면 이렇게들 사용하려고 할까? 나도 한번 써보자. 발버둥 쳐보자!

2. TypeScript?

• JavaScript를 이용한 프로그래밍 언어이다. 컴파일 한 후에 JavaScript 코드로 바꿔준다.
• JavaScript는 숫자나 문자간의 계산 같은 경우, 런타임에서 알아서 계산해서 올바른 답을 준다. 하지만 이러한 결과는 간단한 프로젝트의 경우 편리할 수 있지만, 크기가 크면 클수록 디버깅이 너무 어려워진다. 그래서 이런 경우, 에러 메시지를 준다.
• 심지어 위의 경우처럼 타입을 잘 못 쓴경우나, 오타까지도 잡아준다!

3. 어떻게 사용할까요?

• npm install -g typescript
• 당근 node.js 필수
• .tsconfig.json 파일을 생성해서 안에 초기 설정을 넣는다. ts 파일을 js 파일로 컴파일할 때 사용할 설정이다.

{   
  "compilerOptions" : {     
    "target": "es5",     
    "module": "commonjs",  
  } 
}

• 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

5. create-react-app으로 만든 리액트 앱에 TypeScript 적용하기

• npm install typescript @types/node @types/react @types/react-dom @types/jest @types/react-router-dom
• . js 파일들을 .tsx로 바꿔준다. (JSX 문법을 이용하는 react는 tsx로 확장자를 변경하는 것이 옳다. 그냥 자바스크립트라면 .ts다)
• 이미 진행된 프로젝트라면 TypeScript에 뜨는 에러들을 문법에 맞게 고쳐준다.
• 당근 컴파일도 해준다.

1. UI?

• User Interface를 줄인 말이다.
• 유저가 서비스를 이용할 때 직접적으로 보는 화면을 뜻한다.
• 시각적인 곳에 초점이 맞춰져있다. 예를 들어 font 사이즈라던가 색 등등이 있다.

2. UI?

• User Experience를 줄인 말이다.
• 유저가 서비스를 이용할때 느끼는 직접, 간접적인 '만족스러운 경험'을 뜻한다.
• 시각적인 측면도 있지만 유저를 위해 설계된 디자인과 flow 등을 말한다.

3. 그래서 어떤 차이가 있나요?

• 위의 첫번째 그림을 보자. 몹시 예쁘게 생긴 컵이다. 디자인적인 측면으로는 독특하기도 하고 아기자기하다. 하지만 정작 사용하기 적합하지 않다.
• 두 번째 그림도 마찬가지이다. 우리의 일상생활에서도 많이 볼 수 있다. 도보를 깔아 깔끔하게 만들어 놨지만 사용하지 않으면 의미가 없다.
• 이처럼 미적인 측면을 넘어, 유저를 위한 '사용자 친화적 설계'를 했는가? 가 UX의 맹점이라고 할 수 있다.
• 많은 개발자들이 집중해야 할 측면은 'UX'이다. (UI는 디자이너에게 문의하자)
• 그래서 개발을 할 당시에 개발자의 측면이 아닌 정말 유저의 측면에서 직접 사용할 때의 모든 경우를 생각해서 UX가 뛰어난 서비스를 만들기 위해 노력하는 것이 옳다.