서희2

^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
                                                                                 *
                                 ^                                             ^             
                               ^  ^                                         ^  ^            
                             ^      ^                                     ^       ^       
                          ^      ★  ^                               ^  *     *  ^
                       j      ☆           k                          q        *       p   
                    ^                       ^                      ^    *           *   ^
                  *&^%$#@!~()_+%#                  *&%$@#$!!!#$%*
                               |    |                                           |    |     
                                                                                                        
////////////////////////////////////////////////////////////////////////////////////
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
hallsdkeodkslfhkleoaldksjapwldlkfhskaleojfkldka;seoofjkdshleodjskaloejkslak
                                    
                           *                                     ㅜ
                  *   *       *   *                              |
                       *     *                                    |
                    *           *                                 J
                          
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

                                           3 3 3
                                         | |
                                       /    \
                                     /        \
                                   |             | 
                                    ((((()))))))
                                    |            |
                                    |            |
                                    |     ∩     |
                                    |            |
                                    ---------
                                    |            |                         |               |

youtu.be/jPemiJXsofQ

개발자를 크게 둘로 구분하면

클라이언트 개발자 : 유저들이 이용하는 프로그램을 만드는 직군

서버 개발자 : 

서버에도 프로그램을 설치해야 클라이언트와 소통이 가능

비설치형 소프트웨어는 어떻게 작동하나?

웹을 이용 

애플리케이션 : 애플리케이션 소프트웨어의 약자 / 응용프로그램을 통칭하는 개념

웹은 별도의 설치 없이 구성 요소들을 구현할 수 있음 

기술 발전에 따라 웹에서도 애플리케이션의 기능을 구현하기 시작

개발자와 대화하려면 OS를 구분할 줄 알아야 한다.

어플리케이션 운영체제 OS Operating System

역할

- 시스템 하드웨어 관리

- 응용 소프트웨어 실행을 위한 시스템 소프트웨어

대표적인 os : os는 더 다양하지만 일반적으로 개발에 이용되는 os는 4가지

각 os가 생태계를 꾸려가면서 최근데 4개로 압축된것 

os 개발자가 미치는 영향

브라우저 위에서 구동하는 웹 개발의 경우엔 OS별 구분이 거의 없음 

특정 OS기반 개발을 위해서는 정해진 프로그래밍 언어를 이용해야 함

특정 OS 개발자에게 다른 OS 개발을 요구하기 어려움

개발과정 스텝 by 스텝으로 알아보기

개발 프로세스는 어떻게 진행될까?

회사마다 문화마다 다른다

1.단계 기획[기획자]

2.디자인&개발[디자이너,개발]

디자이너 : 

클라이언트개발 :  궁극적목표는 고객들이 사용하는 화면을 만들어 내서 화면에 기능을 붙이는 것, 카카오톡 로그인 등

                        버튼을 눌렀을 때 어떻게 돌아가는가

서버개발 : 서버한테 나 로그인 좀 시켜줘~! 요청에 생각하고 확인해보고 응답해줌

디자이너의 입장 : 심미성 편의성에 초점

개발자의 입장 : 호환성에 초점 대응하기 쉬운 하나의 체계를 만들어야 한다.

3.단계 : 규칙만들기[클라이언트 개발자, 서버개발자]

  개발자와의 소통을 위한 핵심 열쇠 약속 규칙 : API

youtu.be/3vyTLfKEm9c

상하좌우 가이드
폰트 버튼 가이드
이미지 구도 잡기
 헤드셋 누끼 
 어색하지 않게 따는게 포인트
 이미지 안쪽으로 자연스럽게 따기
폰트강약-BOLD,SIZE,COLOR
BG잡기
다음페이지버튼
전체적인디자인확인

#컨셉디자인 #디자이너 #웹디자인

59강 ~ 67강

• ul : 순서가 없는 항목
• ol : 순서가 있는 항목
• li : ul, ol 밑에 무조건 li만 들어갈 수 있다. (목록일때 사용. 목적에 맞는 태그를 활용하자.아다리가 맞는 태그를 사용하자, 없을시 
• ul, ol, li 노말라이즈
  • list-style:none;/앞에 점 없애기/
  • padding:0; /바깥쪽 여백 제거/
  • margin:0; /안쪽 여백 제거/
    }
  • 제목 태그 : <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
• 제목 태그 노말라이즈 :
  /* h 시리즈 태그에는 기본적인 margin이 들어있다. 그걸 제거하고 써야 한다. */
  h1, h2, h3, h4, h5, h6 {
  margin:0;
  }
• h1, h2, h3, h4, h5, h6 {
  margin:0;
  font-weight:normal;
  font-size:1rem;
  } (이렇게 노말라이즈 해주는 사람도 있다.)
• h$*6{h$} + tap (아래와 같이 태그가 나온다.)
  <h1>h1</h1>
  <h2>h2</h2>
  <h3>h3</h3>
  <h4>h4</h4>
  <h5>h5</h5>
  <h6>h6</h6>
• nav.menu-box-2>ul>li*4>a[href="#"]{메뉴 아이템 $} ($를 사용하면 숫자가 순차적으로 나옴)
• display 없어지는 계열
  • none
• display 나타나는 계열
  • 가로배열
    • inline
    • inline-block
  • 세로배열
    • block

• 마크업이란 HTML작업을 의미
• 노말라이즈 → 모든 작업 전에 한번해준다
• display:inline 요소에는 margin, padding, width, height가 일반적인 방식으로 적용되지 않는다

* 문제풀이 flukeout.github.io/

*폰트 다운로드

스웨거체 을지로체

*일러스트 작업시 비율을 고려하여 배치한다. 

*img trace-expend-ungroup

이미지 가져와서 일러스트로 바꿔주기

*ctrl + shift + o 아웃라인만들기(글자깨기)

*색바꾸기 : 2가지방법

- Select→Same→Fill Color

 그룹짓기(다른 것도 영향을 받기 때문)→더블클릭(그룹차원들어가기)→색바꾸기(그룹안에서 색바꾸기)

- (바꾸고 싶은 이미지선택)→Edit→Edits Colors→Recolor Artwork

colorhunt.co/

*컬러헌트 이미 만들어진 컬러색상표 참고하여 색상 적용 (컬러감각을 기르는게 중요)

*글자 만들기 예시

- alt + ctrl + C (ctrl + shift + o 아웃라인만들기(글자깨기) 꼭하고 진행하기!)

 object-  envelop distort - make with top object

*타이포그래피: 5가지방법

- (도형, 선)Pathfinder 이용

- (오브젝트를 선색만 선택한 뒤)Object→Path→Offset Path

- Effect→Warp→Arc...

- Object→Envelope Distort→Make Whit Warp (Alt+Shift+Ctrl+W)(Object→Expand 일러스트로 만들기)

- (모양오브젝트가 위에 있어야함) Object→Envelope Distort→Make Whit Top Object (Alt+Ctrl+C)

*패턴 만들기 (펜툴 변형툴 패스파인더)

패턴 : Windows→Swatches  /  추가예제 9일차 LESSON8

*패턴 더 많이 넣기 빼기

*오브젝트 안 패턴 회전

*글자 디자인 스타일 예

(버버리패턴 예뻐서..)

*이미지 다운로드
픽사베이/ 언스플레쉬 기타등등
네이버->무료이미지사이트 검색

*폰트다운로드

네이버/ 다음/ 서울시청/ 우아한형제들 / 스웨거 기타 등등 / 다폰트(영문지원)

다폰트에는 반지의제왕 스파이더맨 아이언맨 헤리포터 서체 등등이 있다

*포스터규격 594*841(mm)

youtu.be/KaQiPNufl-Y

youtu.be/GmIn1Gk422g

youtu.be/H04yKoLWeqI

53강 

youtu.be/iZBSws4hEEg

📰언급된 아티클: https://uxdesign.cc/what-it-takes-to-...​

🪄디자인 시스템:

1. 구글: https://material.io/design​

2. 애플: https://developer.apple.com/design/hu...​

3. IBM: https://www.carbondesignsystem.com/​ Relavant articles:

👻The dribbblisation of design https://www.intercom.com/blog/the-dri...​

💩A comprehensive list of UX clichés https://www.fastcompany.com/90313720/...​

⌨️Product Designers Should Forget About Coding. Learn Product Management Instead. https://medium.com/hubspot-product/de...​

유저 리서치 강의 추천: https://www.udemy.com/course/ultimate...​

🤑연봉 1억 찍은 후기 들으러 가기! https://youtu.be/X_6VE0ZX1SM​

👩‍🎨경험없이 캐나다 취업 후기 https://youtu.be/KxEQU1X1qSk​

📄Get your free resume template here! https://form.jotform.com/210249209479056