[내배캠] 프로덕트 디자인 / 37일차 / 2024_12_11

2024_12_11 수요일

 

 

 

코딩 3일차....

 

오늘도 웹퍼블리싱 특강을 진행했고, 웹퍼블리싱은 아마 오늘이 마지막인 걸로 알고있다!

오늘은 그래도 어제만큼 너ㅓㅓㅓㅓㅓ무 많은 것을 배운날은 아니여서 이해하는데 훨씬 수월했다!

 

 

 

 

 

                                                       ✅  배운점                                                          

 

 

어제는 웹기술중 웹 페이지를 꾸며줄 수 있는 CSS에 대해 배웠고,

 

 

오늘은 요소들을 배치하고 정렬하는데 사용하는FLex와 Grid

그리고 트랜지션과 애니메이션에 대해 배웠다.

 

 

 

 

Flex box는

1차원 레이아웃 도구로, 가로(row) 세로(column)로 정렬하고 요소간의 간격을 쉽게 조정한다.

display: flex; 는 부모 요소에 설정하여 활성화할 수 있다.

 

 

 

display: flex와 함께 사용할 수 있는 주요 속성은

flex-dirrection(자식요소를 배치할 방향)과 justify-content(자식의 가로 정렬방식)이 있다.

 

• flex-dirrection(자식요소를 배치할 방향)은

   요소를 가로로 배치할 것이냐, 세로로 배치할 것이냐, 가로혹은 세로로 배치시 순서를 뒤집을 것이냐를 설정할 수 있고

 

• justify-content(자식의 가로 정렬방식)은

   왼쪽/오른쪽/가운데 정렬, 요소간의 간격을 균등히 맞추되 양끝을 맞출것인지, 바깥간격을 포함할 것인지 완벽히 균등하게 분배할 것인지등을 설정할 수 있다.

 

• 그리고 flex-warp을 사용하여 줄 바꿈여부를 설정할 수 있다.

 

 

 

 

 

 

Grid는

2차원 레이아웃 도구로, 요소를 행(row:가로)과 열(cloumn:세로)에 배치할 수 있다.

display: grid;를 부모 요소에 설정하여 활성화할 수 있다.

 

 

display: grid;와 함께 사용할 수 있는 주요 속성은

grid-template-columns(열(column)의 크기를 설정)과 grid-template-rows(행(row)의 크기를 설정)

 

• grid-template-columns(열(column)의 크기를 설정)으로

   열의 크기, 값을 반복, 최소~최대 크기를 설정할 수 있다.

 

• grid-template-rows(행(row)의 크기를 설정)으로

   행의 크기와 값을 반복을 설정할 수 있다.

 

• grid-column와grid-row로 각각의 가로/세로 방향에서 시작할 위치, 끝날 위치를 지정할 수 있다.

 

 

 

 

 

트랜지션은

하나의 상태에서 다른 상태로 변화할 때의 과정을 부드럽게 만드는 CSS기법이다.

트랜지션은 트리거(Trigger)에 의해 스타일 변경이 이루어진다.

 

트랜지션의 트리거가되는 의사 클래스에는 :hover, :focus, :active 등이 있다.

 

트랜지션의 속성값 중 필수 입력되는 값은

트랜지션을 적용랄 CSS 속성인 <property>, 상태변화가 지속되는 시간 <duration>이 있고,

선택 입력 값은 상태 변화속도의 패턴, 트랜지션이 시작되기 전의 딜레이시간이 있다.

 

 

 

애니메이션은

CSS에서 요소를 움직이거나 상태를 지속적으로 변화시키는 기법이다.

트랜지션은 시작과 끝만 정의하지만, 애니메이션은 중간 단계(Keyframe)도 정의할 수 있다.

트랜지션과는 달리 애니메이션은 별도의 트리거 없이 작동한다.

 

애니메이션의 주요속성중 필수 입력되는 값은

애니메이션 이름인 <name>, 애니메이션이 진행되는 시간<duration>이 있다.

선택 값에는 애니메이션 속도 곡선, 시작되기전의 딜레이시간, 반복 횟수, 재생방향, 실행전후 상태정의, 재생상태 등이 있다

 

 

 

 

 

반응형 디자인

반응형 디자인은 화면의 크기에 따라 웹사이트의 모양과 크기가 바뀌는 디자인이다.

미디어 쿼리를 사용하여 화면 크기조건으로 CSS를 다르게 적용할 수 있다.

 

미디어 쿼리의 조건과 종류에는

• 화면 너비

   max-width : 화면 너비가 특정값보다 작거나 같을 때 적용

   min-width : 화면 너비가 특정값보다 크거나 같을 때 적용 

 

•화면 높이 (잘 사용하지 않는다)

   max-height : 화면 높이가 특정값보다 작거나 같을 때 적용

   min-height : 화면 높이가 특정값보다 크거나 같을 때 적용 

 

•화면 방향 orientation

   portrait : 세로방향

   landscape : 가로방향

 

이런 미디어 쿼리를 사용하여 반응형 디자인을 적용할 수 있다.

 

 

 

 

 

 

 

 

 

                                                        🤔  느낀점                                                          

3일동안 코딩을 배우면서 팀원들과 스크럼 시간에 얘기를 하면서 느낀점인데,

우리가 코딩에 대해 강의를 듣고 실습을 진행하면서, 너무 열중하는 것이 아닌가 라는 생각이 들었다.

그래서 점점 부담감을 느끼고 강의중에 질문을 하는 사람들을 보면서 나는 잘 따라가고 있지 못한걸까라는 생각이 들었고 불안했다.

그래서 실습시간에 죽자사자 복습하고 실습을 하면서 문득 드는 생각이 "이거를 이렇게 까지 완벽하게 알아야 하는 것일까?"였다.

 

그래서 팀원들과 튜터님을 찾아 뵙고 여쭤봤는데

우리가 코딩을 배우는 것은 피그마의 UI컴포넌트 구조가 개발 코드로 넘어갔을때 어떤식으로 적용이 되는건지,

그래서 개발지식도 구조에 대한 부분에 집중하여 어떤 식으로 피그마에서 컴포넌트를 제작해야

개발단계로 넘어왔을때 무리없이 잘 적용이 될지에 대한 부분을 배워야한다는 것을 알게되었다.

 

그리고 전체적인 구조를 파악하면 협업하는 개발자에게 예를 들어 내가 원하는 인터렉션을

레퍼런스를 들고가서 설명하고 그게 적용이 되는 과정도 훨씬 원활해 질 것 이라는 것이다.

 

이런부분을 모르고 수업을 진행하니까 한 부분에 대해 이해가 되지않으면 이해가 될때까지 복습하고

매달렸는데, 그럴 필요까지는 없다는 것을 알게되었다..(그렇게 해서 코드를 쓸줄 알면 개발자로 전향을 해야겠지..?)

 

정리를 해보자면 우리가 개발지식을 배우는 이유는 코드를 쓰기 위함보다는,

개발자의 입장에서 고려하며 디자인을 할 수 있고, 개발자와의 소통을 위한 것이다~~~~~~라는 것이다.

 

그래서 오늘까지 3일간 사실 지옥훈련 같은느낌이였는데,

내일부터는 이정도의 부담감까지 느껴가며 모든 것을 외우고 손에 익힐 필요가 없다는 것을 깨달았고,

습득하는 것보다는 구조를 파악하는데 좀 더 힘을 쓸 예정이다💪