내일배움캠프 프로덕트 디자인 / 9일차 / 2024_10_31

20204_10_31 목요일

 

오늘 디자인 카타에서는 새로운 주제가 발제되었다. 이번주제는 '좋은 홈페이지 레퍼런스 찾아오기'였고 오늘은 레퍼런스를 찾고 내일 아마도 발표를 하게 될듯하다

 

그리고 오늘 드디어 현재까지 제공된 강의를 완강했다...! 아마 어제 안드로이드 ui레퍼런스 이슈만 없었더라면 아마 어제 완강을 했을지도 모르겠다.. 오늘 마지막 과제에서는 프로토타입을 실행(?)하는게 과제였지만 여태까지의 복습을 위해 예시화면이였던 당근 페이지(모든화면은 아니고 딱두개...)를 직접 만들어서 그 페이지로 프로토타입을 실행해 제출했다

 

 

배운점

 

오늘 디자인 카타에서 같은 카타 팀원 분께서 소개해주신 GDWEB이라는 곳을 알게되서 둘러봤는데

너무나... 유익한 페이지... 정말 앞으로 요긴하게 이용할 것 같다 소개해주셔서 너무 감사해요 ㅠㅜㅠ...

 

GDWEB은 각종 웹레퍼런스를 확인할 수 있는 사이트이고 여러가지 사이트 레퍼런스들과 사이트에서 수상한 웹들의 레퍼런스들을 볼수 있어서 너무 좋았다

혹시나 아직 모르는 분이 있을까 레퍼런스 링크를 첨부한다 !

https://www.gdweb.co.kr/sub/list.asp

http://www.gdweb.co.kr

 

GDWEB에서 찾은 레퍼런스들과 내가 이전에 좋다고 생각했던 레퍼런스들을 가지고 갔는데 사실 아직까지는 정말로 좋은건지 확실히 감이 잡히지는 않는 것 같다

지난번 주제때 느낀점인데 잘 모르겠으면 일단 뭐든지 들고가서 다른 분들이 가져오신 레퍼런스와 피드백들을 듣고 발표가 마쳐갈때쯤 '아 이게 좋은 페이지 구나'하는 생각이 들었다. 아마 이번에도 발표가 끝날 때 쯤 어떤 조건들이 좋은 홈페이지의 조건들인지 알게될거라 믿는다!

 

 

 

그리고 오늘 강의에서도 프로토타입에 대해 조금 더 잘 알 수 있는 시간이었는데

사실 프로토타입을 하기 이전에는 잘 모르는 기능이라 그런지 조금 겁먹고 시작했던 것도 있었는데 막상해보니까 너무 재미있었다

내가 만들 페이지가 이리저리 내가 원하는대로 이쁘게 움직여주는게 그렇게 뿌듯할 수 가 없드라...💖

 

그리고 그중에는 프로토타입으로 오버레이를 만들 수가 있는데 오버레이는 다이얼로그 등을 사용할때 뒤쪽에 깔리는 라이트박스와 같은 개념이 였다.

나는 이것도 모르고 여태까지 뒤에 스크림을 레이어에 깔고 그위에다가 다른것들을 올리고 했었는데, 그럴 필요가 없어진 것이다...!

피그마 오버레이 안에는 라이트박스가 포함이 되어있기때문에 별도의 라이트박스(스크림)을 레이어에 추가할 필요가 없다

 

오버레이 적용하는 법!

예시로 만든 화면을 가지고 설명해보자면

 

첫번째. 프로토타입을 실행하여 로그인 화면의 로그인 버튼을 선택하여 우측의 다이얼로그에 이어준다

왼쪽 로그인 화면 / 오른쪽 다이얼로그 화면

 

 

두번째. 우측패널에서 트리거는 On tap 액션은 Open overlay로

Overlay는 우리는 오버레이로 다이얼로그 화면을 띄워줄거기 때문에 앞에서 다이얼로그 화면을 연결해놨고 그래서 Dialog페이지로 설정되어있다.

그리고 Position은 원하는대로 선택할 수 있지만 일단 완전 중간에 띄울거기때문에 Centered!

 

하단의 첫번째 체크박스를 선택하면 오버레이가 실행된 화면에서 백그라운드를 선택하면 오버레이 창이 닫힌다.

그리고 마지막으로 백그라운드의 컬러와 오퍼시티를 조정하면 끝이다!

 

 

총 결과물을 보자면

왼쪽 로그인 페이지에서 로그인 버튼을 누르면 왼쪽처럼 오버레이가 실행되면서 다이얼로그가 뜬다!

그리고 배경을 탭하면 다시 첫번째 로그인 페이지로 돌아온다

왼쪽 로그인페이지 / 오른쪽 오버레이가 실행된 다이얼로그 페이지

 

 

 

 

 

 

느낀점

오늘은 강의 과제를 하면서 프로토 타입을 작동 시키는게 과제였지만 복습도 할 겸 겸사겸사~~~ 당근마켓 페이지를 만들어봤다.

컬러 스타일과 폰트 스타일을 지정해주고 필요한 아이콘들과 버튼 몇몇 컴포넌트를 직접 만들어봤다(아이콘은 다른곳에서 가지고 왔다)

 

하면서 기억이 안나는 것들은 강의 자료들을 찾아보고 하고 이렇게도 해보고 저렇게도 해보고 하면서 지지고 볶고 숙제에 거의 한나절을 보낸것 같다 그만큼 복습도 정말 제대로 된 것같다

그래서 내일 저녁에 있을 개인과제 발제 전까지 조금더 보충해보고 약간 클론디자인마냥 당근의 다른 페이지들도 만들어볼까한다!

하면서 프로토 타입도 적용시키고 프로토타입을 엄청 많이 하면 화면들끼리 서로 막 엉켜있는 블루 스파게티를 볼 수 있다던데 내일 내가 한번 블루 스파게티를 요리해보겠다...!

 

이렇게 미리연습해보는것이 다음주에 있을 개인과제에 조금이나마 도움이 될까 싶어 연습해보는 것도 있지만 안다고 생각했던 것도 막상 다시 하려면 어라..?하고 기억이 안나는 것도 종종있기때문에 앞으로 이렇게 복습하는 시간을 점차 늘려볼까 하는 생각이다!

 

 

 

그럼 오늘도 화이팅 내일도 화이팅이다~!~!~!~!~!~!