IT EVERYTHING

인터렉션 법칙

1. 힉의 법칙

- 정보가 증가할수록 우리 뇌는 알아서 선택지를 categorizing 하거나 grouping하는 방식으로 사고

- 그렇기 때문에 뇌의 인지 process 처럼 동일한 인터랙션을 적용하면 빠른 선택이 가능

2. 피츠의 법칙

- 인간의 행동에 대해 속도와 정확성의 관계를 설명하는 기본적인 법칙

- 목표물의 크기가 작을수록 목표에 도달하는데 속도와 정확도가 떨어지므로 적당한 크기의 버튼을 제공해야 함

3. 마법의 숫자 7

- 1956년 심리학자 George Miller가 소개한 청킹 이론

- 적은 정보로 쉬운 판단을 유도해야 함

4. 복잡성 보존의 법칙

- 사용자가 느끼는 편리함 -> 엔지니어와 디자이너의 공수

- 훌륭한 UX는 그 복잡성을 시스템이 맡지만 불편한 UX는 유저에게 전가

5. 포타요케의 법칙

- 실수방지: 애초에 실수를 하지 않도록 제한

- 오류알림: 오류가 있을 시 바로 알림

6. 피드백과 피드포워드

- 오류를 일으킨 경우 즉각적이고 명백한 피드백을 줘야 잘못된 동작이 반복되지 않음

- 동작하기 전 무슨 일이 벌어질지 예측하게 해 확신을 갖고 동작할 수 있게 함

7. 어포던스

- 이미지의 선택과 허용 가능한 상호 작용 양쪽에서 일반적인 사용법 따름

- 원하는 행동을 묘사하는 직접적인 단어 사용

- 메타포를 사용

- 인터페이스 학습후 다른 부분에 활용할 수 있도록 지속적으로 같은 컨셉 모델을 따름

User Interface

- 사용자와 기술이 만나는 인터페이스이자 접점

- 사용자가 시스템을 입력하면 출력 장치를 통한 정보 제공이 이뤄지는 디자인

User Interface Role

✔ 보편성 

- 다양한 사용자가 사용할 수 있도록 디자인 한다.

✔ 사용성 

- 좋은 사용성은 사용자 인터페이스의 주된 목적이다.

UI 디자인 원칙

1. 일관성을 유지한다.

- 일관성이 기반된 제품은 신뢰를 갖고 사용할 수 있음

- 사용자가 디지털 환경에 적응하는데 도움이 됨

2. 보편적인 사용성을 추구한다.

- 기술 성숙도 여부에 상관 없이 용이한 학습이 가능하도록

- 사용자들이 숙련된 사용자가 될 수 있도록 서포트하는 디자인

3. 유용한 피드백을 제공한다.

- 현실에서 느끼는 피드백처럼 디지털 환경에서도 액션에 대한 피드백이 시기적절하게 제공

- 사용자가 마찰 없이 목표를 달성하도록 돕고 인지 부하를 줄이는데 도움

- 반드시 즉각적이어야 하며 시스템이 느려지는 것을 방지하기 위해 지연을 최소화 해야 함

4. 종료 상황을 알리는 대화 상자를 설계한다.

- 시작, 중간 및 끝이 있는 명확한 플로우 안내

- 각 단계가 마무리 된 후 알림 메세지 표시와 같은 충분한 피드백을 전달

- 출구를 분명히 표시해 제품과 충분한 커뮤니케이션을 하도록 도움

5. 오류를 처리할 수 있는 간단한 방법을 제공한다.

- 오류를 피할 수 없다면 빠르고 쉽게 대응할 수 있도록 구체적인 방법 제공

6. 처리한 동작을 쉽게 되돌릴 수 있어야 한다.

- 실수를 손쉽게 실행 취소할 수 있다면 익숙하지 않은 옵션도 부담 없이 사용할 수 있음

- 사용자가 작업을 진행할 때 부담 없이 제품을 탐색할 수 있도록

7. 사용자가 현장 장악감과 위치감에 대한 권한을 갖게 하라.

- 필요한 정보를 획득하는데 어려움이 없고 원하는 결과를 즉각 생성할 수 있도록

- 탐색 및 작업 활성화는 항상 명확히 전달

8. 사용자가 기억보다는 인식할 수 있게 해야 한다.

✔ 심리 학자 George Miller의 청킹이론

- 인간의 뇌는 기억 용량에 제한이 있기 때문에 효율적으로 이를 사용하기 위해서 7+- 2(5~9)개 정도의 항목에 대해서만 저장할 수 있도록 돕는 디자인

- 기억 부담을 최소화 하여 생산성을 높이는 데 중점

Digital 시대에서 UX의 역할 : 기술이 일상에 정착하기 까지 기술과 사용자 간 거리를 좁히는 것

UX 역사 

1. 테일러리즘

- 프레드릭 윈슬로 테일러가 창시한 과학적 관리법

- 기존의 비효율적인 생산 방식 -> 표준 작업방식으로 경제적 효율성, 특히 노동생산성 증진(대량생산)

2. 도요타의 생산 방식

- 어느 누구라도 노동하기 쉬우면서 일하는 보람과 자아실현을 느낄 수 있는 공장 지향

- 적시 생산 방식과 자동화 도입

3. 인지과학

- 1940년대 인간을 연구하는 철학자, 심리학자, 인류학자, 컴퓨터과학자, 생물학자등 다양한 분야의 학자들의 인공지능 연구가 시작되며 만들어진 융합 학문

- 1960년대까지 컴퓨터를 주로 '문제 해결형 기계' 로 생각함

4. 제록스와 HCI

- 최초의 GUI와 마우스 컴퓨터로 표현된 비트맵 그래픽 기술등의 개념과 개발시스템은 현재에도 사용됨

- 시스템 설계의 중심축이 기술에서 사람으로 바뀜

5. 도널드 노먼

- 2007년 아이폰이 출시되며 사용자 경험이라는 단어가 일반인에게도 많이 알려지게 됨

- 현재까지도 디자인 씬에게 바이블 역할을 함

UX Define : Donald Norman

하나, 사용자의 정확한 요구 사항을 만족시킬 것 -> Satisfaction

둘, 사용하게 되는 과정에 단순하고 즐거움이 있어 사람들이 가지고 싶고 사용하고 싶게 할 것 -> Simplicity

셋, 사용자가 직접 필요하다고 말하는 것 이상을 제공해야하며 이를 위해 여러 분야 서비스를 매끄럽게 통합할 것 -> Elegance

if문

#ifdef _MSC_VER
#define _CRT_SECURE_NO_WARNINGS
#endif
#include <stdio.h>

int main()
{
	if (조건식) {

	}
	else if (조건식) {

	}
	else if (조건식) {

	}
	else {

	}


	return 0;

}

if문 예제 )

#ifdef _MSC_VER
#define _CRT_SECURE_NO_WARNINGS
#endif
#include <stdio.h>

int main()
{

	int a, b;
	printf("원하는 숫자 두개 입력해주세요 : ");
	scanf("%d", &a);
	scanf("%d", &b);

	if (a > b) {
		printf("%d는 %d보다 큽니다.", a, b); // a가 더 클때 실행
	}
	else if (a < b) {
		printf("%d는 %d보다 작습니다.", a, b); // b가 더 클때 실행
	} 
	else {
		printf("%d은 %d이랑 같습니다.", a, b); // a, b 같을때 실행
	}


	return 0;

}

중첩 if : 

if (조건식) { // 조건식이 참이면 실행, 거짓이면 실행 안함
		if (조건식) {
			// 조건식이 참이면 실행, 거짓이면 실행 안함
		}
		// 처음 if문에 대한 실행문
	}

중첩 if문 예제 )

#ifdef _MSC_VER
#define _CRT_SECURE_NO_WARNINGS
#endif
#include <stdio.h>
int main()
{
	/*운전면허 필기시험에서 2종일경우 60점
	이상이면 합격 아니면 불합격
	운전면허가 1종일 경우 70점 이상이면
	합격 아니면 불합격
	힌트 : 1종인지 2종인지 입력받고 몇점인지
	입력받아서 합격과 불합격 출력하세요*/

	int what_jong, score;

	printf("1종이면 1을 입력해주시고\n2종이면 2를 입력해주세요 : ");
	scanf("%d", &what_jong);

	printf("\n");
	printf("---------------\n");
	printf("\n");

	printf("운전면허 점수를 입력해주세요 : ");
	scanf("%d", &score);

	if (what_jong == 1) {
		if (score >= 70) {
			printf("합격입니다.");
		}
		else {
			printf("불합격입니다.");
		}
	}

	if (what_jong == 2) {
		if (score >= 60) {
			printf("합격입니다.");
		}
		else {
			printf("불합격입니다.");
		}
	}


	
	return 0;
}

프로젝트 생성: 

새 프로젝트 만들기 클릭!

빈 프로젝트 선택하고 다음 프로젝트 이름과 위치를 설정해주고 만들기를 하면 

프로젝트 실행이 된다.

c언어 기본 문법:

#include <stdio.h>

int main() 
{
  

	return 0;
}

- 기본 틀

#include <stdio.h>

int main() 
{
	printf("Hello World!\n");
	printf("\n");
	// \n 쓰면 엔터가 된다!
	printf("Hello World!");

	return 0;
}

자료형 : 

int: 자료형

myhome: 이름

32: 값

double: 자료형

home: 이름

22.2: 값

char: 자료형

me: 이름

A: 값

대입: 

int 자료형인 meme가 선언되었고, 그 값엔 20이 들어가있다

meme = 10 으로 인해 meme 값이 10으로 변경되었다

print("나의 집은 %d 살입니다. \n", myhome);

%d안에 myhome의 값이 들어갑니다. 

scanf: 

#ifdef _MSC_VER
#define _CRT_SECURE_NO_WARNINGS
#endif

이코드를 상단에 추가 하셔야 작동합니다.

#ifdef _MSC_VER
#define _CRT_SECURE_NO_WARNINGS
#endif
#include <stdio.h>
int main()
{
	int fatherAge;
	int motherAge;
	int myAge;
	printf("아부지 나이를 입력해주세요: ");
	scanf("%d", &fatherAge);
	printf("어무니 나이를 입력해주세요: ");
	scanf("%d", &motherAge);
	printf("자신의 나이를 입력해주세요: ");
	scanf("%d", &myAge);
	
	printf("아부지 나이 : %d\n", fatherAge);
	printf("어무니 나이 : %d\n", motherAge);
	printf("자신의 나이 : %d\n", myAge);
	return 0;
}

scanf("%d", &fatherAge);

%d 형식이니까 정수형으로 입력받았고 입력받은 값의 위치는 &fatherAge이다.

Hello World!>

※ node, vscode 사용

이후 콘솔창을 열어서 node main.js를 해주면 콘솔창에 Hello World가 출력되는것을 보실수 있습니다.

<Preparation>

index.html 에 기본 코드 입력후 title태그 밑에 main.js를 연결해주는 코드 작성

<script src="./main.js"></script>

이후 Live server extension 을 사용해 index.html 을 열어 console을 보면 Hello World!가 찍혀져 있는것을 볼수 있습니다.

<async vs defer>

parsing HTML ->  blocked  -> parsing HTML

               fetching js, executing js

단점 : 사용자가 웹 사이트를 보는데 많은 시간이 걸린다

parsing HTML -> fetching js -> executing

parsing HTML 과 fetching js 사이에 이미 "page is ready"

단점 : 웹 사이트가 javascript에 의존적이라면 fetching과 executing 하는 사이에 많은 시간이 걸리게 된다.

parsing HTML -> blocked -> parsing HTML -> "page is ready"

     fetching js -> executing js

sync: boolean 타입이고 , 기본적으로 true 값

HTML 을 parsing 하다가 병렬로 fetching js를 하게 되고 executing js를 합니다. 

마무리가 되면 그대로 다시 parsing HTML 을 해줍니다

장점: 다운로드 받는 시간을 절약시킬수 있다

단점: DOM요소를 조작하는게 힘들수 있다, 사용자가 페이지를 보는 시간이 늘어날수도 있다.

parsing HTML -> "page is ready" -> executing js

 fetching js

defer만 쓰는것이 더 좋다고 볼수 있다.

"use strict" 를 사용하면 더 효율적으로 사용할 수 있다.

1993년 -> Mosaic Web Browser

1994년 -> Netscape Navigator(80% 점유율)

1994년 9월 -> Mocha: 추후 LiveScript + Interpreter

1995년 -> LiveScript: JavaScript로 이름 변경

           -> MS에서 Reverse engineering : Jscript

1997년 7월 -> ECMAScript 1 그 이후 2, 3(1999), 4(2000) 출시

2000년 InternetExplorer 95%점유율

2004년 -> Firefox 출시

          -> AJAX

2008년 -> Chrome(JIT)

2009년 -> ECMAScript 5

2015년 -> ECMAScript 6

현재 가고 있는 방향 : SPA(Single Page Application)

라이브러리: React, Vue, Angular

이용할 수 있는 분야: node.js , mobile, desktop

뜨고 있는 다른 기술: WA

시장성: good! 모든 순위권에서 상위권유지

앱을 만들어보고 싶어서 react-native를 사용하던 중

이러한 에러가 종종 생기곤 한다.

에러 : Delete ` CR` eslint(prettier/prettier) 

해결방법 : 아래의 코드를 .eslintrc.js 에 넣어주면 된다.

rules: {
        'prettier/prettier': [
            'error',
            {
                endOfLine: 'auto',
            },
        ],
    },