TIL. 2025/10/31
1. 오늘 학습 키워드
- 김태길튜터님 소프트스킬 세션(2시)
- 피그마 화면을 구성하고, 실제로 구상되기 위해서 필요한 과정들을 배웠다.
1-1. 오늘의 학습 목표
- 김태길튜터님 소프트스킬 세션(2시)
- 5강 모두 수강 완료하기(나머지 학습)
2. 오늘 학습 한 내용을 나만의 언어로 정리하기
: 실제 디자인 실무에서 필요한 정보와 꿀팁으로 세션을 진행하여 주셔서 좋았다. 5주차 강의는 앞으로 만들고 사용하게될 상세한 화면 구성을 어떻게 실제로 구현할 수 있는지에 대한 내용을 다뤄주셨다
김태길 튜터님 소프트 스킬 세션
디자이너는 피드백을 대하는 태도가 가장 중요함. 수용하는 태도!
>피드백을 해주는 사람의 의도와 관점을 알 수 있음.
>>문제해결 관점의 차이를 확인할 수 있는 기회임.
반응의 기술
협업에서는 속도보다는 확신!
예측 가능할 수 있도록 소통하고 신뢰를 주어야함. / 상황을 명확하게 공유하여야 함.>신뢰도 상승
의도를 전달하는 기술
디자인을 왜 이렇게 진행하였나요? 라는 질문에, 예쁘다는 대답(대화 단절)보다는,
~~하나 문제를 해결하기 위해 이렇게 배치했습니다~ / 라고 대답하는것이 좋음.
디자인은 결국 의사결정의 결과물이다.
' ai가 이미지를 만든다면, 사람은 소통을 만든다 '
5-7강.스크롤 컨테이너와 오버플로우
'오버플로우' 란 ?
: 프레임 밖으로 컨텐츠가 넘어가는 것. > 스크롤 화면 만들때 필수 조건.
즉, 스크롤이 되게 하려면 프레임보다 콘텐츠가 더 길어서 넘쳐야함.
'스크롤 컨테이너' 란?
: 스크롤을 만들어주는 기본 프로토 타입 > (필요조건)스크롤 컨텐츠 + 스크롤 속성을 적용할 컨테이너
*스크롤 방식
1. No scrolling : 스크롤하지 않음. 기본값
2. Horizontal : 가로 방향으로 스크롤
3. Vertical : 세로 방향으로 스크롤
4. Both directions : 가로 및 세로 방향으로 모두 스크롤
*실습
> 프로토타입 프리뷰 > shift + 스페이스바 > 설정한 디바이스 사이즈 대로 보임(렌더링 같이 됨)
5-8강.화면 디자인 연결하기
* 트리거와 액션
- 플로우 구성요소
: 프로토 타입의 흐름 하나하나 > 핫스팟과 종착점을 이으면 커넥션이 만들어지는데, 그때 자동으로 플로우 패널이 열림
> ⓐ트리거 / ⓑ애니메이션 / ⓒ액션
ⓐ 액션을 시작하는 조건이나 이유, 계기
ⓑ 트리거로 인해 만들어지는 결과
ⓒ 트리거를 통해 액션을 실행할 때, 어떻게 실행할 건지 / 즉, 인터랙션 형태
**프로토 타입 설계시, '~하면,~하게~한다' 라는 문장으로 기억하기!
ex. 버튼을 누르면(트리거), 색상이 천천히(애니메이션) 바뀐다(액션)
ⓐ트리거 의 종류 -10가지 : 프로토타입의 플로우를 실행하는 조건 / 어떻게하면 실행할래?
-On click/Tab : 클릭 또는 탭/터치
-On drag : 드래그했을 때
-While hovering : 커서/마우스가 영역 위에 올라가 있는 동안
-While pressing : 커서/마우스로 영역을 누르고 있는 동안
- Key/Gamepad : 특정 키를 눌렀을 때
-Mouse enter : 커서/마우스가 영역 위에 올라가면
-Mouse leave : 커서/마우스가 영역을 벗어나면
-Mouse down : 커서/마우스가 영역을 누르면
-Mouse up : 커서/마우스가 영역을 눌렀다 떼면
-After delay :일정 시간이 지난 후
ⓒ액션 의 종류 - -11가지 : 트리거로 인해 만들어지는 결과 / 어떤일이 발생하면 어떻게 반응할래?
- Navigate to : 페이지(프레임)를 이동하는 액션
- Change to : 컴포넌트의 다른 배리언츠로 변경
- Back : 직전 화면으로 이동
- Set variable : 변수를 특정 값으로 설정
- Set variable mode : 변수를 특정 모드로 설정
- Conditional : 분기점을 만들어서 조건에 따라 A 또는 B를 실행
- Scroll to : 현재 프레임의 특정 지점까지 스크롤해서 이동
- Open link : 특정 URL을 염.
- Open overlay : 현재 프로토타입 화면에 다른 프레임을 위에 겹쳐서 보여줌
- Swap overlay : 라이트박스를 유지한 채 다른 프레임으로 교체
- Close overlay : 라이트박스을 닫는 액션
*실습
ⓑ애니메이션 의 종류 : 액션을 어떻게 실행할건지 결정
- Instant : 별도의 애니메이션 없이 즉각 실행
- Dissolve : 천천히 흐릿해지면서 화면을 전환 = 페이드 인/아웃
- Smart animate : 이름이 같은 프레임들이 자연스럽게 움직이도록 함.
- Move in/out : 현재 화면 위에 다음 화면을 덮거나 현재 화면이 벗겨지듯 전환
- Push : 현재 화면을 지정한 방향으로 밀면서 등장
- Slide in/out : 현재 화면을 지정한 방향으로 밀어 사라지게 하면서 등장
>세가지 방법으로 스마트 애니메이트를 실행해 보았다.
: 화면 이동 / 메뉴 이동 애니메이트 / 리스트 삭제
5-9강.디자인 핸드오프
: 개발자와 소통하는 문서 작성 법
> 디자인의 의도, 구체적인 규격이나 속성 설정에 대한 문서
*원칙 : 통일된 구성 / 자세하게 작성(어떤 디자인, 목적, 어떻게 만들면 될지에 대해 상세하게) / 쉽게 전달될 수 있는 언어로 해석하여 작성
*핸드오프의 구성
- 디자인의 전체적인 구조
- 각 프레임의 크기 및 길이
- 각 프레임의 여백 및 간격
- 사용된 폰트 및 컬러 스타일 등
관련 플러그인도 있다!
> '' DesignDoc[Spectral]''
5-10강.디자인 공유하기
: 완성된 작업물 보기 좋게 정리하기
5-11강. 5주차 과제
*과제
>> 1 : 이미지 좌우 슬라이드 설정 / 2.프로토 타입 상단, 하단바 고정
**수강 완료**
모든 강의가 끝이 났다!!
3. 학습하며 겪은 문제/해결방법
: 없음.
4. 내일 학습 할 것은 무엇인지
: 본캠프 시작! 주어진 과제를 진행할 듯 싶다
'내일배움캠프 사전캠프' 카테고리의 다른 글
| [내일배움캠프 사전캠프] DAY.14(5강) 프로토타입과 프로토타이핑 (0) | 2025.10.30 |
|---|---|
| [내일배움캠프 사전캠프] DAY.13 (5강) 피그마 화면 디자인 실습 (0) | 2025.10.29 |
| [내일배움캠프 사전캠프] DAY.12 디자인 피드백 세션 / 5주차 강의 학습 (0) | 2025.10.28 |
| [내일배움캠프 사전캠프] DAY.11 [피그마] 배너 디자인 기획 제출 및 제작 (0) | 2025.10.27 |
| [내일배움캠프 사전캠프] DAY.10 (4강) 합성 컴포넌트와 네스티드 인스턴스 / 배너 디자인 기획 (0) | 2025.10.24 |