내일배움캠프 프로덕트 디자인 / 6일차 / 2024_10_28

20204_10_28 월요일

 

오늘은 미니 프로젝트 팀소개하기가 끝나고 새로운 팀을 배정받은날이다. 그리고 또 팀장이 됐다... 사다리타기의 저주..?

지난 팀에서도 사다리타기로 내가 팀장이 됬었는데 이번팀에서도 사다리타기로 내가 팀장이 됬다...잘할 수 있을껴🥺

오늘부터는 다음주까지..? 피그마활용을 중심으로 강의시청을 하면서 개인적으로 계속 실습하고 복기하고 복습하면서 피그마 활용능력을 더 기르는 시간이 될 듯하다

 

 

 

배운점

오늘은 여러가지의 것들을 배웠지만, 그중에서도 디스플레이와 배수에 대한 내용이 있었다.

1배수의 뜻은 1배(100%), 즉 원본사이즈라는 것!

화면을 만들때 아이폰과 안드로이드 이렇게 각각 1배수사이즈로 제작하여 화면크기가 각각 다른 스마트폰에서도 적용하게 된다.

현재 권장하는 1배수 사이즈는 아이폰의 경우 375 * 812, 안드로이드의 경우 360* 800이다

예를 들어 아이폰 15pro의 사이즈는 1179 * 2556 약 3배 크기때문에 적용시 1배수사이즈의 3배크기로 적용된다(그 이후 조금의 조정은 필수!)

 

 

 

그리드와 분기점에 대한 개념도 배웠는데 그리드는 데스크톱, 태블릿, 모바일 이렇게 3가지의 기준점으로 나뉜다.

 

<분기점>(가로길이를 기준)

∙ 데스크톱화면 : 1024px이상

∙ 태블릿화면 : 768px이상 1024px미만

∙ 모바일화면 : 768px미만

 

보통은 데스크톱, 모바일 이렇게 두가지 제품을 제작하지만 제품의 특성(ex.교육)에 따라 태블릿이 주력이 되는 경우도 있다!

그리드는  안에들어있는 요소들을 균형감있게 배치하기 위해 사용한다. 사용시 균형감과 완성도 일관성 up!up!

 

 

칼럼의 구조(unit과 gutter)

거터는 유닛 양옆으로 있는 여백값을 얘기하고 이것을 다 합친 것을 칼럼(Column)이라고한다

그리드는 먼저 세로방향의 기둥(칼럼)을 몇개를 둘지 정한다.

∙ 데스크톱화면 : 12칼럼 그리드

∙ 태블릿화면 : 8칼럼 그리드

∙ 모바일화면 : 4칼럼 그리드

데스크톱은 12개를 사용하게되는데 이는 짝수이면서 1, 2, 3, 4, 6, 8, 12로 나눠서 유연하게 사용할수 있고,

모바일의 4개는 디자인을 반응형 확장하기위해(태블릿-2배, 데스크톱-3배) 4개로 사용한다.

 

이때 태블릿과 모바일은 데스크톱과는 다르게 마진값(Margin: 화면의 가장 오른쪽, 왼쪽의 여백값)을 설정하는데, 이는 데스크톱은 양 옆에 자리가 많이 남지만 모바일과 태블릿은 그렇지 않기때문!!

 

 

 

 

느낀점

오늘 또 팀장을 맡게 되었는데 사실 지난번 팀에서도 팀장을 맡았던지라 많이 부담스럽긴했다. 나의 작은 계획은 이번에는 팀원이 되서 팀장이 이끌어주는대로 잘 따라가고 그러면서 많은 것을 배우고 싶었지만... 다음 팀에서는 꼭 그럴 수 있을거라 믿는다...!

여튼 이번 팀도 잘 해낼것이라고 믿고 나는 나에게 주어진 일을 다 해낼 것이다. 그것이 연속된 사다리타기 팀장일지라도....!!!

이번주는 들어야할 강의가 굉장히 많다. 그래서 복습을 하기위해서는 노는시간(?)을 조금 줄이고 타이트하게 강의를 듣고 또 복습까지하는 것이 나의 목표지만...아니 할 수 있지 왜냐면 하면 할 수 있게된거니까는 할수있다~!~!~!~!~!~!~!~!~!~!~!

이번주도 화이팅~!~!~!~!~!~!~!~!~!