Return to Video

02-20 Padding vs. Margin

  • 0:00 - 0:02
    지금까지 잘 하셨습니다
  • 0:02 - 0:05
    정말로 멋진 레이아웃을 구축하는
    방법을 제대로 하고 계십니다
  • 0:05 - 0:09
    하지만 지금까지 구축한 레이아웃은
    거의 모두, 문제가 보입니다
  • 0:09 - 0:13
    뷰들은 바로 ViewGroup의
    모서리 부분에 위치하거나
  • 0:13 - 0:14
    장치의 모서리 부분에 있습니다
  • 0:14 - 0:17
    이번 강좌에서 지금까지 구축했던
    모든 레이아웃들에 대하여
  • 0:17 - 0:20
    약간의 시각적 장식을
    추가할 수 있는데
  • 0:20 - 0:24
    흰색 공간을 좀더 추가하면
    더 예뻐집니다
  • 0:24 - 0:26
    패딩과 마진이라는 개념들을
    활용해 그걸 해보겠습니다
  • 0:26 - 0:29
    이번 영상에서
    다루어볼 주제입니다
  • 0:29 - 0:31
    가령, 여기 여기에
    흰색 공간을 좀더 추가하거나
  • 0:31 - 0:34
    뷰들이 혼란스럽게 보이지 않도록
    심지어 상단에도 추가할 수 있어요
  • 0:34 - 0:38
    부모의 모서리와 장치의 모서리에 맞닿아
    뷰들이 위치해 있기 때문이죠
  • 0:38 - 0:39
    하지만 이건 디자인적인
    판단이기는 합니다
  • 0:39 - 0:42
    간혹 모서리끼리 맞닿게 하는 걸
    원하실 수 있어요
  • 0:42 - 0:45
    즉, 전에 말씀드렸던 풀 블리드 이미지
    효과를 내기 위해서 말이죠
  • 0:45 - 0:49
    하지만 어느 경우라도, 흰 공간을 이용해서
    숨쉴 틈을 좀더 추가할 수 있습니다
  • 0:49 - 0:53
    그러면 내용을 읽거나 검색하는 데
    좀 용이해지기 때문이죠
  • 0:53 - 0:57
    패딩 및 마진을 뷰에 추가하는 것의
    효과를 보여드릴 겁니다
  • 0:57 - 0:59
    'Hello'라고 하는
    텍스트뷰로 시작해 봅시다
  • 0:59 - 1:02
    8군데가 파인 패딩을
    뷰에 추가하면
  • 1:02 - 1:05
    여기 8가지 방향으로
    8군데 파인 곳만큼 확대됩니다
  • 1:05 - 1:09
    텍스트뷰에 8군데 파인 곳의
    레이아웃 마진을 추가하면
  • 1:09 - 1:11
    이런 식으로 보이게 됩니다
  • 1:11 - 1:13
    마진을 추가하기 위해서
    ViewGroup안에 넣어야 합니다
  • 1:13 - 1:16
    그래서 제가 이걸 여기에 있는
    선형 레이아웃에 넣은 겁니다
  • 1:16 - 1:19
    선형 레이아웃은 원래의 텍스트뷰를 취해
  • 1:19 - 1:21
    8군데 파인곳만큼
    밀어냅니다
  • 1:21 - 1:23
    좌측으로부터 그리고 상단으로부터
    밀어내는 거죠
  • 1:23 - 1:26
    또한 측면으로부터도 밀어냅니다
  • 1:26 - 1:30
    고로 자식 텍스트뷰 상에서
    패딩 및 마진을 선언하더라도
  • 1:30 - 1:33
    패딩은 텍스트뷰 자체에
    의해서 처리됩니다
  • 1:33 - 1:36
    마진이 부모 ViewGroup에 의해
    처리되는 것과 대조적이죠
  • 1:36 - 1:40
    이 두 가지를 실제 장치에서 실행하고
    텍스트뷰에 대한 배경이 없다면
  • 1:40 - 1:43
    기술적으로 둘은
    동일하게 보일 겁니다
  • 1:43 - 1:46
    해당 텍스트가 좌측으로부터
    8군데 파인 채로
  • 1:46 - 1:48
    장치의 상단으로부터 8군데가
    파인 상태로 시작되기 때문이죠
  • 1:48 - 1:52
    하지만, 텍스트뷰의
    배경색이 있다면
  • 1:52 - 1:55
    사용자는 텍스트뷰가 이렇게
    크다는 걸 알아볼 수 있습니다
  • 1:55 - 1:59
    반면에, 다른 장치에서는 텍스트뷰가
    이 정도 크기에 불과하는 것이죠
  • 1:59 - 2:01
    뷰 상에 패딩을 내보이는
    코드가 여기에 있습니다
  • 2:02 - 2:06
    텍스트뷰 XML 요소 상에서는
    새로운 속성을 선언할 텐데, 즉
  • 2:06 - 2:11
    android: padding는 따옴표 속에 있는
    8 dips와 같다는 것이죠
  • 2:11 - 2:12
    패딩이 크기를 원하는 만큼
    선택할 수 있어요
  • 2:12 - 2:15
    'dip'값에 따라서 말입니다
  • 2:15 - 2:19
    8 dip의 패딩을 명시한 경우
    텍스트뷰에서 8군데의 파인 곳을
  • 2:19 - 2:21
    좌측, 상단, 하단, 우측 모서리에
    추가할 수 있습니다
  • 2:22 - 2:25
    범용 안드로이드 패딩 속성을
    사용하는 대신에
  • 2:25 - 2:29
    각각, 좌측, 우측, 상단, 하단으로
    나눌 수도 있습니다
  • 2:29 - 2:33
    본질적으로, 이 코드 4줄은
    이 한 줄짜리 코드와 동일한 기능을 합니다
  • 2:33 - 2:36
    하지만 이렇게 세부적인 제어치로
    좌우측, 상하단 별로 각기 다르게
  • 2:36 - 2:39
    패딩 값을 지정할 수 있습니다
  • 2:39 - 2:43
    4방향 모두 같은 패딩값을
    지정할 필요는 없으니까요
  • 2:43 - 2:47
    패딩의 기본값은 0이므로
    좌우측과 상단 패딩값을 명시하였으나
  • 2:47 - 2:52
    하단 값을 지정 안 하면 하단 패딩의
    파인 곳(dip)은 0이 될 겁니다
  • 2:52 - 2:56
    마진을 명시하기 위해
    텍스트뷰의 속성을 재추가합니다
  • 2:56 - 3:00
    속성의 이름은
    android: layout_margin이며
  • 3:00 - 3:03
    그 값은 가령
    8dips으로 설정합니다
  • 3:03 - 3:07
    이러면 자식 텍스트뷰는 모든 모서리에
    부모로부터 8군데 파이게 됩니다
  • 3:07 - 3:12
    여기 상단에 다른 자식 텍스트뷰가 있다면
    마진을 가지게 됨에 따라
  • 3:12 - 3:15
    첫째 텍스트뷰 아래로 8 dip만큼
    이 텍스트뷰를 밀어냅니다
  • 3:16 - 3:20
    마진을 이 뷰 주위에 약간의
    힘의 영역으로 생각할 수 있습니다
  • 3:20 - 3:24
    그 주위에 8군데 파인 영역으로는
    다른 뷰가 침범할 수 없으니까요
  • 3:24 - 3:28
    혹은, 역시 레이아웃 마진을
    4가지 방향으로 각각 나눌 수도 있어요
  • 3:28 - 3:32
    레이아웃 마진 좌우측,
    상하단 각각 말이죠
  • 3:32 - 3:36
    이 값들을 명기하지 않으면
    기본 값인 0으로 될 겁니다
  • 3:36 - 3:39
    ViewGroup은 이 자식들을
    위치시키는 데
  • 3:39 - 3:42
    마진에 바탕한다는 걸 기억하려면
    이 속성들을 보면 됩니다
  • 3:42 - 3:45
    모두가 마진에 대해
    레이아웃과 밑줄로 시작하고 있어요
  • 3:45 - 3:49
    그렇게, ViewGroup이 이 뷰들의 위치를
    처리한다는 걸 알 수 있죠
  • 3:50 - 3:53
    패딩과 마진은 모든 뷰에
    적용할 수 있어요
  • 3:53 - 3:56
    방금 우리가 배운 속성들을
    연습해봅시다
  • 3:56 - 3:58
    여기에 선형 레이아웃의 형태로
    3개의 텍스트뷰가 있어요
  • 3:58 - 4:01
    모두가 화면 좌측 구석에
    몰려 있어
  • 4:01 - 4:02
    약간의 공간을 추가하고 싶습니다
  • 4:03 - 4:05
    약간의 마진을 추가하는 것부터
    시작합시다
  • 4:06 - 4:08
    좋네요, 이 텍스트뷰 주위에
    공간이 더 생겼습니다
  • 4:09 - 4:11
    다른 두 개의 텍스트뷰에 대해서도
    동일하게 해보겠습니다
  • 4:12 - 4:17
    재미 있군요, 이게 16개의 dip이니까
    실제로 32개의 dip이군요
  • 4:17 - 4:20
    왜냐하면 첫 텍스트뷰로부터
    하단 마진이 8개 dip이고
  • 4:20 - 4:23
    두 번째 텍스트뷰로부터 상단 마진이
    8개 dip이기 때문이죠
  • 4:23 - 4:25
    공백 설정을 일관적으로 하여
  • 4:25 - 4:30
    모든 뷰 간에 항상 16개 dip이 있기를 바라면
    여기 마진을 변경해야 합니다
  • 4:30 - 4:33
    저는 개별적 마진값으로
    나누었습니다
  • 4:33 - 4:38
    이 코드를 가지고 상단과 좌측 마진
    각각 16개 dip을 설정했습니다
  • 4:38 - 4:41
    첫 텍스트뷰로부터
    하단 마진은 없으므로
  • 4:41 - 4:43
    사이의 공간은 정확히
    16개의 dip이 됩니다
  • 4:43 - 4:47
    마지막 텍스트뷰에 대해서도
    동일하게 적용할 겁니다
  • 4:47 - 4:49
    좋습니다, 이제
    모든 수직 공백이 동일합니다
  • 4:50 - 4:53
    전에 이 뷰들의 모서리에
    흰 공간을 추가한다고 했을 때
  • 4:53 - 4:56
    기술적으로는 그 공간은
    투명한 것이었습니다
  • 4:56 - 4:59
    그 공간을 투과해 뒤에 있는 것을
    볼 수 있는 것이죠
  • 4:59 - 5:02
    이 경우, ViewGroup 상에
    회색 배경이 있습니다
  • 5:02 - 5:05
    장치에서 마진이든 패딩을 이용할 때
    레이아웃이 동일하게 보이는 이유는
  • 5:05 - 5:09
    이 경우 텍스트뷰 상에
    배경색이 없기 때문입니다
  • 5:10 - 5:12
    배경을 추가하여 각 뷰의 한계가
    되는 곳이 어디인지 봅시다
  • 5:13 - 5:16
    자, 이제 첫 텍스트뷰 상에
    배경색이 생겼습니다
  • 5:16 - 5:20
    좌측, 상단 마진을 추가했을 때
    ViewGroup이 밀어내는 걸 보았습니다
  • 5:20 - 5:23
    상단으로 8만큼 하단으로 8만큼
    텍스트뷰가 밀려났죠
  • 5:23 - 5:27
    이 걸 패딩에 맞게 변경할 수 있는데
    이제 텍스트뷰가 더 커진 것이 보이며
  • 5:27 - 5:30
    좌측과 상단에 8dip만큼의
    공간을 차지하고 있습니다
  • 5:31 - 5:33
    고로 시각적으로 대상들은
    장치 상에서 달라 보일 겁니다
  • 5:33 - 5:35
    패딩이든 마진이 있느
    관계 whether you have padding or margin.
  • 5:35 - 5:38
    이 텍스트뷰 상에
    배경색이 있다면
  • 5:38 - 5:41
    다른 뷰들에 대해서도 동일하게
    해보고 잘 되는지 확인할 수 있어요
  • 5:42 - 5:45
    패딩과 마진값을 추가하는 것은
    이 자식 뷰들에만 국한되지 않고
  • 5:45 - 5:48
    ViewGroup 상에도
    추가할 수 있습니다
  • 5:48 - 5:51
    제가 선형 레이아웃에 대해
    패딩값을 추가하면
  • 5:51 - 5:56
    모든 방향에 16 dip만큼 뷰들이
    뒤바뀌는 걸 확인할 수 있어요
  • 5:56 - 5:59
    패딩 및 마진에 대해 아무 값이나
    설정할 수 있다고 제가 그랬죠
  • 5:59 - 6:01
    하지만 어떤 값을 택할지
    어떻게 알까요?
  • 6:01 - 6:05
    머티리얼 디자인 지침에 따르면
    조금씩 값을 올릴 때의 간격을
  • 6:05 - 6:06
    8 dip을 사용하라고 합니다
  • 6:06 - 6:09
    이는 좀 더 발전된 지식이긴 하지만
    본질적으로 저희가 바라는 건
  • 6:09 - 6:13
    이 8dip 정사각형 격자를 따라
    화면 상에서 구성요소들이 정렬하는 겁니다
  • 6:13 - 6:16
    지금 정사각형들은 실제로
    화면에 나타나지는 않지만
  • 6:16 - 6:18
    여기에 텍스트를
    위치시키고자 하면
  • 6:18 - 6:21
    2개의 정사각형을 건너뛰어
    좌측으로 이동시켜야 할 겁니다
  • 6:21 - 6:25
    이 격자상의 2개의 정사각형이
    16 dip과 맞먹는 것이죠
  • 6:25 - 6:29
    이 이메일 화면에는 모든 아이콘들이
    이 줄을 따라 정렬되어 있습니다
  • 6:29 - 6:33
    그 아이콘들은 화면의 좌측 모서리로부터
    16 dip를 넘어 위치되어 있습니다
  • 6:33 - 6:38
    여기 모든 텍스트는 화면 좌측 끝에서
    72dip을 넘어 위치되어 있죠
  • 6:38 - 6:42
    고로 해당 내용이 여기 특정 줄을
    따르기 시작하는 게 상상이 갈 겁니다
  • 6:42 - 6:44
    여기 그걸 형상화하는
    또 다른 방법이 있어요
  • 6:44 - 6:47
    구글 I/O 앱에서 발췌한
    이 스크린샷에는
  • 6:47 - 6:54
    내용물을 16dip 줄과 72dip 줄에
    맞춰 정렬시켰습니다
  • 6:54 - 6:57
    기본적으로 화면 좌측 끝으로부터
    72 dip을 넘어 있습니다
  • 6:57 - 6:59
    그리고 이 가장자리에는
  • 6:59 - 7:03
    내용물이 화면 우측 끝에서부터
    16dip 이전 위치에 멈춰 있습니다
  • 7:03 - 7:05
    태블릿 상에는 앱의
    화면 출력 영역이 더 크기에
  • 7:05 - 7:07
    패딩이 약간 더
    많을 수 있습니다
  • 7:07 - 7:11
    화면의 좌측 끝으로부터
    24dip을 넘어 있거나
  • 7:11 - 7:12
    기타 다른 값을
    가질 수 있죠
  • 7:12 - 7:17
    이 값들을 추천하는 이유는
    내용물의 가독성을 높기이 위함입니다
  • 7:17 - 7:20
    가령, 이 제목이 2-3 픽셀만큼
    이동했고
  • 7:20 - 7:24
    서브텍스트가 2-3 픽셀만큼
    우측으로 이동했다면
  • 7:24 - 7:26
    여기 가장자리가
    들쭉날쭉할 겁니다
  • 7:26 - 7:30
    그리고 사용자가 실제 내용을
    읽는 데 집중에 방해가 되겠죠
  • 7:30 - 7:35
    고로 모든 것을 정렬시킴으로써 앱의
    가독성과 활용성을 높이는 겁니다
  • 7:35 - 7:38
    여기 마진에 패딩을 활용하는
    몇 가지 실례가 있어요
  • 7:38 - 7:40
    여기 보이는 구글 캘린더 앱의
    스크린샷에는
  • 7:40 - 7:44
    여기 텍스트가 약간
    이동한 걸 볼 수 있습니다
  • 7:44 - 7:47
    달력 상의 사건들 간에
    약간의 공백도 있죠
  • 7:47 - 7:48
    패딩을 활용해
    이것을 실행하면
  • 7:48 - 7:52
    이 배경 이미지가
    아마 빈 공간까지 확장될 겁니다
  • 7:52 - 7:56
    그 대신, 마진을 이용하면 뷰 둘레에
    작은 완충지대를 추가하며
  • 7:56 - 7:58
    고로 이게 아마 마진이에요
  • 7:58 - 8:02
    달력상 한 사건에 대한 상세 페이지의
    또 다른 스크린샷이 이겁니다
  • 8:02 - 8:06
    여기에 많은 텍스트가 있고 다른 것보다
    간격이 더 넓은 것 같네요
  • 8:06 - 8:09
    패딩을 추가하여 그러한 더 넓은 간격을
    생성할 수 있습니다
  • 8:09 - 8:13
    여기 이 간격을 추가하기 위해
    이 텍스트뷰에 하단 패딩을 추가하거나
  • 8:13 - 8:15
    이 뷰에 상단 패딩을
    추가할 수 있습니다
  • 8:16 - 8:18
    둘 중 어떤 것도
    해당 효과를 낼 수 있죠
  • 8:18 - 8:21
    혹은 레이아웃 마진을 활용해
    그 효과를 실행할 수도 있습니다
  • 8:21 - 8:25
    이 경우, 패딩과 레이아웃 마진의
    활용 상의 차이를 구별할 수 없는데
  • 8:25 - 8:28
    왜냐하면 사용된 텍스트의 배경은
    투명하기 때문이죠
  • 8:28 - 8:32
    이제 다른 패딩과 마진값을 설정하는
    연습을 여러분이 해볼 차례입니다
  • 8:32 - 8:35
    아래에 있는 링크를 이용해
    시험해볼 초기 코드가 제공되었습니다
  • 8:35 - 8:39
    패딩과 마진값 설정이 편해지면
    계속하여
  • 8:39 - 8:40
    이 레이아웃 구축을 해보세요
  • 8:41 - 8:46
    한편, 이 텍스트는 여기 가장자리로부터
    16 dip만큼 떨어져 위치되어 있습니다
  • 8:46 - 8:49
    하지만 두 텍스트뷰들 사이에는
    단지 8dip만 떨어져 있을 뿐이죠
  • 8:49 - 8:51
    완료하면 이 공란을 체크하세요
Title:
02-20 Padding vs. Margin
Description:

more » « less
Video Language:
English
Team:
Udacity
Project:
UD837 - Android for Beginners
Duration:
08:52

Korean subtitles

Revisions