[공부] 레이아웃 기본기 마스터 ('더코딩파파 유튜브 참조')

플러터를 가지고 작업을 진행하다보면, 나와 같이 주니어 개발자의 경우에는 아직까지도 한번씩 헷갈리는 개념이 있다. 그것이 바로 레이아웃이다. 여기서 어떤 Column인지 아니면 Row 인지 헷갈린다는 것이다. 

 

사실 Column (열) 그리고 Row (행)으로 번역을 할 수 있기에 이게 무엇이 어렵나고 생각할 수 있지만, 이것을 기준으로 구획을 나누고 그에 맞는 버튼 등을 배치하다가 보면 이상하게 레이아웃이 내가 원하지 않는 방향으로 만들어 질때가 많다. 이럴때 정확하게 이해해야하는 개념이 Column과 Row라는 개념이다.

 

물론 이에 대해서 Flutter의 공식문서에서도 상세하게 설명을 해두었다. 하지만 우리가 누군가 성격 급한 한반도인의 자손들 아닌가... 해당 문서를 보는 순간... 딱 이런 생각이 든다...

플러터 공식 홈페이지

와... 이거 언제 다보고 이해를 해

그렇다. 우리는 성격이 급하다. 그리고 더불어서 드는 생각이 이것을 다 읽고 난다고 한들 또 완벽하게 이해하는 것은 아니다. 물론 나보다 천재적인 개발자와 아티스트들은 금방 이해하신다지만 나같은 범인은... 아직 그 경지에 이르지 못했다.

 

이럴때 우리가 찾는 분이 있다. 바로 유튜브...!

찬양하라!!

그리고 거기 있는 수많은 고수 개발자들 그리고 제야의 고수들!!! 할수 있다. 하...아니 해야만 한다.

여튼 모든 내용을 각설하고 본래의 이야기로 돌아가서 이번에는 유튜브 강의를 짧게 하나 소개하려 한다. 무려 플러터!! 플린이들의 희망 더 코딩파파님이 Column 그리고 Row 등 레이아웃에 대해서 이해하기 쉽도록 인스타그램을 클론코딩(?) 하시면서 설명을 해주신다. 아래 그림처럼 일일이 정리를 해주시면서 설명을 해주시 잘 들어보길 바란다. 시간은 약 26:35로 긴편이지만 그냥 보면서 이해하면 시간이 금방 지나간다.

더 코딩파파 - 레이아웃 기본기 마스터

그 중에서도 가장 중요한 부분을 기록하자면 다음과 같다.

 

중요부분

1. 2:50: Column과 Row에 대한 설명. 해당 내용은 화면을 구성할때 어떻게 구획을 나누어야하는지 쉽게 설명해준다.
2. 14:25: MainAxisAlignment와 CrossAxisAlignment를 Column 혹은 Row에서 어떤 기준으로 정의내릴 것인가를 설명해주신다. 해당부분은 플린이들이라면 Row 혹은 Column에서 CrossAxis로 정렬을 했을때, 자기가 원하는 대로 이루어지지 않아 레이아웃이 흐트러지는 경험을 한 사람들에게 꼭 들어야하는 부분이다.
3. 18:08: 이미지 사이즈를 원하는 사이즈로 유지하는 방법을 설명. 가끔 사이즈 조절을 실패해서 이미지만 엄청 확대 되는 경우에 대한 대응 법이다.
4. 22:57: 포스트 바깥 부분에 배경색 지정. 이거는 좀 이쁜 것 같아 기록용으로 하나 적어두었다.

자 이 영상을 다보고 나면 이제 감이 좀 잡힐 것이다. 그럼 그 다음에는 무엇을 만들어야 하느냐? 저자가 추천하는 방법은 다음과 같다.

1. 클론코딩을 하면서 실제 존재하는 앱들과 비슷한 형태의 앱을 프론트 엔드 적으로 만들어본다
2. 사용자가 편하게 느낄 수 있는 앱들을 자신이 손수 그려보고 구조화한 다음에 실제 플러터로 구현해 본다

이 두가지중 하나를 선택해서 해본다면 방금 들었던 내용을 잘 응용할 수 있을 것이다.

 

여튼, 모두들 막힌다고 포기하지 말고 안된다고 좌절할지 말지어다. 꾸준히 하다보면 뭐라도 된다.

그럼 바바이