[10/23 부트캠프] ③팀 소개 사이트 만들기: 5주차 강의

 

프로덕트 디자이너 부트캠프 D-3

📌To Do List

* 팀 과제: 팀 소개 사이트 만들기

* 5주차 강의

* 개인 과제: JD 분석

 

알람이 울리지 않았던지 못들었던지 둘 중 하나.. 갑자기 전화가 오길래...

뭐지..? 010이네...? (뇌정지)

???????뭐지..?

시간보니까 9시 18분이었다. 바로 출석체크하겠다고 전화를 받고 일어나자마자 출석체크를 했다.

아무리 봐도 알람이 울리지 않았던 것 같은데...ㅠㅠㅠ 핸드폰을 엎어놓으면 안울리는건지 뭔지.. ㅠㅠㅠ

---

 

01 5주차 강의

상세화면 만들기

 

[실습: 상세 화면 만들기]

① 기본 버튼 라벨 가져오기 - auto layout (좌우 패딩값:20) - W: 375px 변경

이런 버튼이 만들어져야한다. 만약 아이콘과 텍스트, 혹은 버튼이 가운데에 제대로 위치하지 않았다면 hug,filled과 패딩값을 검토해야한다.

 

 

[실습: 로그인 화면 만들기]

💡글로벌 마진(=safe area)
- 앱 전체에 적용되는 마진 값

 

예를 들어 글로벌 마진값을 20px로 설정한다고 치자.

우리는 이렇게 적용할 수 있다.

1. 도형을 늘려서 맞추기

2. 전체 화면 가로 사이즈 - 20px로 값을 계산하여 도형에 그 값을 적용한다.

하지만 텍스트 필드에 텍스트 프로퍼티를 사용하여 마진을 맞출 수 있다. 어떻게?

TIP! 인스턴스에서 레이어 삭제 불가능. 삭제할 경우 '숨김'처리가 되므로 이 부분은 참고하자.

 

 

① 일단은 이렇게 만들어보자.

아이디와 비밀번호 텍스트 필드와 자동로그인까지! 각 인스탄스를 이용하여 배치. 

하단 로그인 버튼은 아까 만들었던 버튼에서 property - off 해서 숨김 처리를 했다. property가 편리해서 너무 좋다...

TIP! 하단 영역을 크게 비워놓는 이유는 무엇일까요? 텍스트 필드를 누르면 하단 키보드가 올라오는데 그 영역을 비워둔 것. 키보드가 올라왔을 때도 버튼까지 누를 수 있도록 작업하는 게 좋다.

참고로 우측 끝 [#상세화면] 페이지 하단 회원가입 버튼은 property - priority를 tertiary로 바꾼 결과다!

 

 

✍️

또 작업하다가 궁금한 게 생겨버렸다.

탭 바 부분 텍스트를 텍스트 프로퍼티로 만드는 방법이 좋을까? 1번.

적용을 하려고 보니 저 상태에서 텍스트 프로퍼티를 만드는 방법이 헷갈렸다.. ㅠㅠ 전체 그룹을 눌러야하는지, 해당 텍스트를 눌러 적용을 해야하는지 너무 헷갈려서 이것 저것 만져봤는데 잘 모르겠다 2번.

그래서 이 퍼즐을 풀기 위해 새롭게 하나 만들어서 시도했다.

불리언 요소인 On/Off 모드를 구현하면서도 텍스트 프로퍼티를 변경할 수 있는 컴포넌트를 만들자.

이것 때문에 시간이 또 흘렀다...ㅋㅋㅋ ㅠㅠ

 

시도 1) 

- 3개의 탭 메뉴를 오토레이아웃으로 만들었다. 탭 마다 개별 컴포넌트 만들었다. (오류)   이 때, 오토레이아웃을 써주되 가로 값을 넓게 가져가며 Fixed로 설정 (가운데 3개의 탭을 넣는 조건을 만들었다)- 활성화된 탭: boolean값을 이용하여 "Show: on(True)"모드 적용- 비활성화 탭: boolean값을 이용하여 "Show: off(False)"모드 적용- Text 프로퍼티 적용: 이 때 한 개의 컴포넌트 별로 각각 Text1, Text2, Text3 으로 만들어 그룹을 선택했을 때 한 번에 조절할 수 있는 효과를 기대함.

음.. combine as variants가 있어서 일단 눌러봤다.

 

음... 내가 원했던 값은 아니었지만 얼추 비슷하게 나오긴 했다.맨 처음 property1에 있는 값이 -를 눌러도 없어지지 않는다.variants 프로퍼티를 쓰기위해서는 기본 default값이 존재해야해서 그런 것일까...?(원래는 Default가 아닌 Frame N, Frame....이런 텍스트로 나왔음. -누르니까 Default값으로 바뀌었다)

 

적용하려고 보니까 저렇게 한 개로 묶인 것을 한꺼번에 가져올 수 있는 게 아니라 한 개의 탭 제목만 가져갈 수 있게됐다.실패..ㅋㅋㅋ

 

 

시도2)

- 3개의 탭 메뉴를 오토레이아웃으로 만들었다. 탭 마다 개별 컴포넌트 만들었다.

- 3개의 탭 메뉴를 오토레이아웃으로 만들었다. 전체 선택 후 오토레이아웃으로 한 번 더 묶었다. (Frame으로 그룹화)  이 때, 오토레이아웃을 써주되 가로 값을 넓게 가져가며 Fixed로 설정 (가운데 3개의 탭을 넣는 조건을 만들었다)
- 묶은 오토레이아웃을 컴포넌트(ctrl + alt + K)로 만들고... 아 아니야!! 이렇게 하면 on/off기능이 구현안된다 ㅠㅠon/off를 개별 컴포넌트로 만들고 각 프로퍼티를 적용해서 instance값으로 탭바를 만들어야겠다.

 

 

시도3) 과거 정리했던 탭바 만들기를 다시 봄. 아하.. ^^ 이건 될 것 같다!!

- 3개의 탭 메뉴를 오토레이아웃으로 만들었다. 탭 마다 개별 컴포넌트 만들었다.
- 3개의 탭 메뉴를 오토레이아웃으로 만들었다. 전체 선택 후 오토레이아웃으로 한 번 더 묶었다. (Frame으로 그룹화)
  이 때, 오토레이아웃을 써주되 가로 값을 넓게 가져가며 Fixed로 설정 (가운데 3개의 탭을 넣는 조건을 만들었다)
- 묶은 오토레이아웃을 컴포넌트(ctrl + alt + K)로 만들고... 

- 탭 바 스타일은 총 2개: 활성화(On), 비활성화(Off) → 각각 컴포넌트를 만든다 (이렇게 해서 ①우측 패널 Combine as Variants 누르기, ②(정리본 참고) 컴포넌트 만들기 전에 compnent set을 눌러 두 개의 컴포넌트를 한 그룹으로 묶기. 를 하면 똑같은 결과값이 나온다)- 각 컴포넌트 별로 프로퍼티(property) 적용: 불리언, 텍스트 다시 적용 고고

 

한 컴포넌트 선택했더니 바로 [propery 1 : Frame N]이 나와버림. 원래 이랬었나 싶은데 기억을 더듬으며...이름을 변경해줬다. On/Off로 입력하면 자동으로 불리언 값으로 변했다고 한것같다.

한 개는 On, 한 개는 Off로 만들었다.그리고 텍스트 프로퍼티를 적용하려고 했는데 그 자리에 Current variant라는 아이콘이 생겼다. 현재 베리언츠..?눌렀더니 그룹으로 선택되면서 

 

이렇게 됨. 복사해서 인스턴스로 확인해보니 잘 나오는 건 맞고... 인스턴스에서 볼 수 있는 값을 다이아몬드 아이콘으로 따로 표현된 것으로 보인다.

 

그룹을 잡았을 때만 프로퍼티 버튼이 활성화되기 때문에 모든 것에서 적용할 수 있는 방법을 고민하고고

 Text On, Text Off프로퍼티를 2개 만들어봤다.

인스턴스로 만들어서 봤는데 Show(불리언)밖에 없었다. 잉? 아! 텍스트 패널에서 각각 적용해야지!

이때는!! 해당 '텍스트만' 선택한 후 프로퍼티를 적용한다.

헉 그래..이거지 내가 생각한 게 맞았다 ㅠㅠㅠ 드디어!!! ...................가 아니라 잠깐만. 저렇게 되면...굳이 Text On,Off가 있을..필요가 없는데... 만약에 인스턴스로 여러개 생성했다면 Text를 나누는 이유가..? 각각 탭바 이름이 다를텐데.... 잠깐만...

그래 텍스트는 한 개만 만들어도 된다! 테스트해보니 딱 맞았다.

근데 텍스트 변경 시 하단 탭 바의 영역도 달라져서 가로 넓이는 Fixed로 고정시켜버렸다.

 

이렇게 고정되어서 텍스트를 아무리 바꿔도 가로넓이는 변하지 않는다.

그리고 다시 3개의 인스턴스를 컴포넌트로 묶었다.

그리고 이걸 페이지에 적용! 

 

 

이렇게... 됐다 후후후

이제 점심 먹어야겠다. 강의는 아주 쪼금 듣긴했는데 사실 강의듣기보다 중요한 건 직접 해보는거다.

다시 해보니까 까먹고 헷갈리고 난리.. ㅎ

컴포넌트, 프로퍼티를 만드는 것 먼저해보고 나중에 오토레이아웃을 복잡하게 만들어서 카드 형식으로도 만들어보려고 한다.

근데 그리드는 왜 강의에 없는건지 의문점이 들었다. 그리드는 왜 없을까요..! 이것도 강의완강하고 유튜브로 들어야겠다.

뭔가 감이 슬슬 잡혀지는 중.

 

✏️복습하기

1. property(프로퍼티) 어떻게 쓰지? 
기본 레이어 선택 - 컴포넌트 만들기 - property 버튼 생성 - 값 선택(베리언트, 불리언, 인스탠스 스왑, 텍스트)
#프로퍼티 쓰는법 #property 쓰는법 #property 적용단계

2. 스타일, 컬러 등이 달라지면 variants쓰기!
#베리언츠 쓰는 이유 #반응형 탭바 만들기

3. variant swap이 뭐였더라...
인스턴스를 다른 인스턴스로 교체! A아이콘을 B아이콘으로 변경 가능하다.

 

---

 

02 팀 소개 페이지 만들기

아... 튜터들 Q&A질문시간에 적어놨던 걸 날려버렸다.

진짜 미치고팔짝뛴다 하............................................................................................

그래도 다행인 건 녹화본이 있어서 추후에 그거 보고 다시 적어야겠다! ㅠㅠㅠ

바보다바보...진짜 열심히 썼는데....

ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ

 

일과를....소개하겠다..........

---

디자인 작업은 계속 진행중이고

PPT 발표자료를 추가로 만들기위해 ㅇㅇ님과 내가 맡아서 담당하게됐다.

간단한 멤버소개와 디자인 컨셉에 대한 디자인 시스템을 PPT로 녹여냈다. 근데 개인 취미 사진을 올려도 좋을 것 같긴하지만

작업시간이 오버될 것 같아 그건 포기!

 

ㅇㅇ님은 기획을 하고, 나는 레퍼런스를 찾았다.

메인 앱 디자인을 담당하는 팀원이 오토레이아웃과 컴포넌트 쓰는 게 익숙하지 않아서 어려움을 겪고있었다.

포토샵으로 하면 다 완성됐을 작업인데 기능을 하나하나 적용을 하다보니 힘들수밖에없다....

팀원들은 edit기능이 없을 줄 알았는데 팀 프로젝트를 생성하면 가능하다고 해서 해보니 정말 됐다.

그래서 이걸로 공유하며 같이 작업했다.

 

오토레이아웃을 어려워하셔서  나도 다시 연습하는 개념으로 오토레이아웃 적용시켜버리기!

 

[제목, 설명글 동일한 패딩값 설정하기 - 오토레이아웃]

하단 보면 여백이 일정하지 않다는 이슈가 있었다.

오토레이아웃 하단 여백을 일정한 간격으로 통일시키기 위해

하단에 패딩값을 주는 게 좋을 것 같다.

 1. 텍스트 모두 선택 후 오토레이아웃 적용

 

여기서 check point!

- 제목 길이가 늘어나면 세로 길이도 아래로 늘어나야한다.

- 제목이 아래로 늘어나면 하단 설명텍스트도 아래로 같이 이동해야한다.

- 하단 설명텍스트 길이가 늘어나면 세로 길이도 아래로 늘어나야한다.

 

먼저 제목을 보자. 가로는 고정, 세로는 늘어나게.

2. 제목 선택 - 가로폭: Fixed / 세로폭: hug

 

이 작업을 안해주면 어떻게 되냐면

제목 영역에 저렇게 빼곡하게 쌓이게된다. 가로, 세로 모두 fixed됐으므로!

 

3. 하단 텍스트도 동일하게 적용한다.

4. 전체 프레임을 잡고 하단에 원하는 패딩값을 넣는다.

 

오른쪽 두 개의 사진처럼 값을 넣을 수 있다.

 

 

하던 중 프로토파이 스크롤 기능을 사용하기 위해 유튜브 영상을 보고 해봤는데

전에는 쉽게 했던 것 같은데 자꾸 지정된 영역 밖으로 스크롤되는 현상...

열받았다 전에 강의 한 번 보고 됐던게 안되니까 진짜 오기로 해 보고싶은..?ㅋㅋㅋ

그러다가 마지막에 딱 됐는데 내가.. 어떻게 했더라? 하는 느낌.이 기능이 왜 이렇게 동작하는지 모르겠어서 프로토파이 스크롤기능은 마스터하고 넘어가야할 것 같다.

 

https://figma-play.tistory.com/13

프로토타입 핵심1) 스크롤 & 화면 연결 하기 & 인터렉션 복사 붙여넣기

이 분 블로그 참고했는데 바로됐다ㅋㅋㅋㅋ장난하나...

이거때문에 1시간정도 걸린거같은데 ^^

 

 

 

 

[피그마 프로토타입: 원하는 영역 안에서만 스크롤하기]

1. 스크롤할 콘텐츠가 보이는 FrameA영역 만들기

이 안에서만 내용이 스크롤 됐으면 좋겠다!

 

 

2. 스크롤 할 내용만 Frame1으로 묶는다.

이 내용을 넣어야지! Frame으로 묶자.

ctrl + alt + G로 묶었다.

 

 

3. FrameA영역 안에 Frame1을 넣는다.

 

 

4. FrameA 선택 → 프로토타입: 원하는 스크롤 방향 선택 

 

스크롤이 안에서만 움직인다.

아니 이렇게 간단한걸... ㅠㅠㅠㅠ

괜찮다. 앞으로 잘하면 되겠지...ㅎ

 

암튼 이거 하느라고 프로젝트 만들 시간이 다 지나갔당,,ㅋㅋㅋ 후!!

괜찮다 뭐라도 배운 게 낫다.

 

 

---

뭔가 오늘도 이것저것 배운 게 있었당

아쉬웠던건... 아무래도 튜터님들 답변 받아적었던게 날라간것...

마음이 쓰라렸다...ㅠㅠㅠㅠㅠㅠ

내일도 한 번 달려봐야지.. 포폴 조금 작업하고 자야겠다.