CODE_PLAN

- ppt에서 특정 기능이 작동이 오류가 날 경우 
-> window 업데이트를 안 하거나 일시적 오류일 수도 있으니 컴퓨터를 다시 껐다가 키면 잘 작동됩니다 
ex) 표-> 셀 분할

기획 고수는 통찰력으로 정보를 다룹니다 
그래서 고수의 기획은 심플합니다.

고수는 이번 프로젝트의 핵심 문제가 뭘까부터 생각합니다.

문제점을 찾으면 해결점은 찾기쉽습니다(탑다운)
문제점이  해결 점이 포함되어 있기 때문입니다(바텀업)

해결점이 탄탄하려면 역으로 문제점이 탄탄해야 합니다.

책의 저자는 말합니다.
훌륭한 기획은 예술과 같습니다. 설득하지 않습니다
매료시킵니다.

그림으로 쉽게 전체적인 구조를 보면

이와 같습니다.

참고> 기획자 데이먼, (책) 기획은 2형식이다

장점 1) 네모박스안에 상자를계속만들때 일일히

1. 박스크기 키우고 2. 상자생성 

이렇게 할필요없이 상자를 만들면 자동으로 박스커지고 상자도 생깁니다. 

장점 2) 반응형구현 (큰화면,작은화면에 따른 구현) 

즉, 우리가 미리 만들어준 미리 우리가 레이아웃을 만들어준 개념

- tip) 전체 frame창 부분 누르면 Clip content가 있는데 해제할경우 -> 

아트보다 바같에있던 숨겨진 요소를 볼수가있습니다.

- auto layout 장점 활용예제)
원이 여러개 있을경우 

원 전체 드래그후 autolayout 후 한개 원누르고 ctrl+c -> ctrl +v 하면 서식이복사된채로 

원이 옆에 생성됩니다.

-

위 그림과같이 > 플레이 버튼을 하나더 밑에 추가하고싶을때 밑에 화면구성부분도 같이 내려가고 플레이버튼이 안짤리고 나오게할려면 : 오른쪽 Frame 탭 -> Hug 탭을 사용하고 + 그리고, autolayout까지 활용하면 됩니다.

- stroke -> inside 시 구분선이 두껍게 보이는것 제거 가능합니다.

- Pages 추가방법 : Pages의 +버튼을 누르면됩니다.

- 복사한것 새로운 프레임에 옮길때 먼저 그룹화한뒤에 옮길때도 있습니다. (필요영역 드래그로 전체 감싼후 ctrl+g)

- stroke는 그림그린후 테두리 검은색으로 만들때도 사용

- 도형2개 사이 가운데 두껍게 2줄로 생겼을때 1줄로 하는법 : 도형 하나 클릭후 마우스 클릭하기(다시 공부)

- 드래그할때 ctrl+ 드래그하면 선택한부분에 대해서만 가져오게 됩니다

- ex) 수강하기(네모버튼)을 만들려고할때 방법2가지가 있습니다.

1. 직접 사각형 그리기

2. text 생성후 글씨작성후 group화 만든후 auto layout 볼수있음(일반적인 atuo layout 사용법)

ex) 18강 ' 3시간에서 ' 아이콘같은것은 글자로 써도되는데 이모티콘으로도 넣어서 만들수있다.

- ctrl + b => bold 적용/해제 

- Frame 2365 이런식으로 글자가 보이면 먼가 잘못됬다고 생각하면된다.(즉, 원본 프레임안에서 벋어난상태) 

따라서, 원본프레임안에 글자가보인 프레임들을 이동시켜서 포함시켜주면 됩니다(왼쪽창에서)

- 선의 두께도 조절가능하다 

-

이와같이 글자 포토샵이 있다고 가정했을때 글자가 길어져도 오른쪽 X 표시가 움직이지 않게 설정가능하다

방법 : 포토샵쪽 글씨칸에서 글씨가 길어져도 상관없을만큼 ㅁ 직사각형을 늘려주고 

포토샵과 + X를 같이선택후 autolayout 후 여기서 그룹화(ctrl+g) 후 한번더 autolayout을 해주면됩니다.

- 전체 드래그후 여기선 - 를 눌러서 서로 간격을 떨어지게도 할수있습니다.

-

이와같이 원과 밑에 글씨가 있는것들의 서로 간격을 일정간격으로 떨어트리고 싶으면

먼저 (원+글씨) 이렇게 사진에 묶인부분씩 각각 그룹화 한뒤(여기선 총4개로 각각 그룹생성) 전체 드래그후 설정해주면된다.(위의사진 예시와 똑같다)

- Frame 크기 키우는법 : 오른쪽 설정에서 height 의 숫자를 지정해주거나

Frame을 잡아서 밑으로 당겨주면 높이가 증가합니다.

- 도형(그림) 그리고 정렬방법: 도형클릭후 오른쪽설정창에서 중앙정렬 클릭후 ,맨위

이런식으로 조정가능합니다.

- 실제 디자인을 할때는 간격이나 이런거 다 신경써야하는데 와이어프레임 단계에서는 굳이 그런것까지 디테일하게 신경쓸필요가없다.(대략적으로만) 

- alt + 누르고 드래그할때 숫자표시 -> 숫자만큼 움직일수있음

- figma 안에서 plugin 해서 이미지 불러올수있음/ 다른 사이트에서도 이미지를 가져올수도있다

- plugin으로 이미지 다운로드해서 사용가능 

- ctrl+option+c -> 원래 적용된 스트로크등 서식을 복사

- ctrl+option+v -> 원래서식을 다른곳에 붙여넣음(stroke등) 

- ctrl+ D -> 이전행동 반복

- 글자선택법 : 각각은 ctrl+클릭 / 다 선택은 ctrl+shift+전부묶기

- Header : 상단에 붙어있는 UI  / 여기서 가장많이쓰이는 형태 : GNB

- Banner : 플랫폼에서 많이쓰이는형태

- Card : UI에서 자주나타나는 카드형태의 UI  

-Depth : 한페이지에서 다른곳으로 넘어갔다는 의미 (UI-> 상세)

즉, 서비스에서 안쪽으로 들어간 단계 (1Depth, 2Depth, 3Depth...) 

- Toggle : 열고 닫기만 할수있는형태를 말합니다

- Accoddion : Toggle에서 펼쳐서나오는 부분 강의 목차같은것

- Floating Button : 계속 따라다니는 버튼

- CTA(Call to Action) : 액션을 유도하는 버튼 

- Side Bar(Menu) : 메뉴or검색버튼을 눌렀을때 오른쪽에서 나오는 바 

How

1. Notion을 이용해서 문서를 정리 

2. 간단한 와이퍼프레임을 그리거나 프로토타입이 필요할때는 Axure를 사용

3. 디자인은 Figma

Summary

- EPIC 은 어떠한 제품안에서 중요한 꼭지꼭지들이라고 보면됩니다. 

US= 유저스토리의 약자 

에픽에 필요한 유저스토리를 나열하게됨 

- 와이어 프레임이나 디자인을 하기전에 text로 필요한 기능들을 먼저 정리할수 있습니다. 

- 회사마다 제품을 기획하는 방법은 다르다.

보통 많은회사들이 와이어프레임을 그리고 거기에 기능명세를 그리게됨

기능명세 -> 와이어 or 디자인을 작성하면 꼭 필요한 제품을 중심으로 제품을 디자인하고 만들어갈수 있다는 장점이 있습니다.

이렇게 text가 정리가되면 제품팀이 모여서 아이데이션 회의를함 

-> 이 기능이 진짜 필요한지, 구현하는데 얼마정도 걸리는지? 빠진기능은 없는지? (부족한부분 보강)

기획자가 detail한 기획이 필요할때 Wireframe 잡아서 링크를 잡을수있음 <= 데이먼님은 Axure로 와이어프레임 관리 

- 와이프레임에 US-1 US-2 US-3 이렇게 각각의 유저스토리를 만들어 놓을수있다 

=> 클릭하면 노션에서 만든 화면이 연결되어서 나오기도한다.

- 기획자가없는조직/기획과 디자인을 같이하는 조직도 있을수있다. 

cf) 제품기획을 아에 figma로 하는경우도 있음 => 장점도 존재

(하지만, 사람마다 느끼기에 파워포인트에비해 전문 디자인 툴이다보니 손이 더 많이가거나 flowchart 그릴때도 figma로하면 번거럽다고 생각할수 있는것같습니다) 

- 결과적으로, 여러가지 좋은툴이 있으니 참고해서 차용해서 사용하길 추천합니다! 

밑에는 노션-Axure-Figma가 연결된 예시사진)

참고> 기획자 데이먼님

Summary

- Figma는 UXUI Design 툴 

- UX/ UI 란? user experience / user interface
== 모바일 서비스 / 웹서비스

-피그마에서 왼쪽 Pages 부분에 버전으로 관리 또는 네이밍으로 관리하기도 합니다.
+ 컴포넌트 단위로도 관리

-프로토타이핑 -> 개발자들에게 알기쉽게 작동하는 방식을 만드는것 + 테스트 서버로 생각하면쉬움
- 플레이버튼( 우리가 만든 프로토타입을 실제로 실행해볼수있는 버튼)
- figma는 저장이라는 개념이 따로 없고 실시간으로 웹환경에서 저장이됨  
- Hantool (화면이동할때쓰임)
-> move툴에서 스페이스바 누르면 동일하게 사용가능하기때문에 많이안쓰임 
기능/코맨트 달고 싶을때 맨오른쪾 코멘트누르고 스면됨 ( 디자이너, 개발자와 협업가능)
-> 삭제시 체크버튼눌르기  
(design/prototype 탭말고도 가운데 누르면 다른창나옴 ) 

- 화면 조정 Ctrl - , + 
 화면위에 덮기 + 버튼
- Document color =>  예전기록 히스토리라고 생각하면 편하다 작업히스토리 
- alt + 드래그 => 좀더 쉽게 복사하는법
or ctrl + c => ctrl + v 
- 사각형 선크기 바꿀려면
사각형 테두리 클릭후 stroke 설정 
-사각형클릭후 shift + x => 안과 밖 색깔변경
- 사각형에서 Fill 클릭후 - 누르면 안에 fill 색 빠짐 
- 한번에 드래그 정렬법 => 4개 다 드래그후 가운데로 옮기면 빨간색 정렬선이 뜸  이때 손놓으면 정렬됨
- 사각형에서  동그란점 -> 도형모양 변경가능 
but UI 디자인에서는 숫자가 중요하기 때문에 
오른쪽상단 숫자사용으로 도형변경가능 
- ( Independent corners)  
=> 왼쪽위 오른쪽 아래 왼쪽으로 시계방향으로 설정 => 말풍선모양 제작가능 
- 도형클릭후 오른쪽 메뉴창에 Effects 에서 해모양은 x,y,blur, spread 를 설정할수으며 투명도도 설정할수있다.\

- figma에서 헤더에 작업한것이 여러개인데 이것을 전체복사->전체 붙여넣기를 할려면 전체드래그후 그룹화한뒤에

붙여넣기하면 전체 복사가 됩니다.