돌아오신 것을 환영합니다
이번 강의에서는, labels(라벨)들이나 텍스트들, 그리고 이 Unit Converter(단위 변환기)의 모습을 바꿔보고자 합니다
result(결과) 또한 꽤 작게 뜨기 때문에 바꿔봅시다
텍스트의 property(속성)을 변형하는 방식을 사용할 수 있는데
우선 저는 지금 가장 밑에 result(결과) 텍스트가 있는 곳에 있습니다
output value(출력값) 그리고 output unit(출력 단위)라고 적혀있는 부분입니다
이것이 result(결과) 텍스트입니다
이렇게 하면 찾기가 좀 더 쉬워질 것입니다
다음으로는 style(스타일)이라는 것을 추가해보고자 합니다
좋습니다
여기에 이 style(스타일) property(속성)이라는 어느 텍스트 composable(컴포저블)이 가지는 것이 있는데
그리고 이 MaterialTheme class가 있는데
Android 6 혹은 7 때부터 Android가 사용했던 테마 언어입니다
따라서 MaterialTheme은 이미 꽤 오래되었습니다
즉 그 당시에 적용된 앱아 어떻게 생길 것이냐에 대한 또 다른 디자인 언어인 것입니다
그리고 여기서 typography(활판), 즉 텍스트를 고르고 온점을 입력하면 다양한 옵션들이 있습니다
여기 보시면 헤드라인 스몰, 헤드라인 미디움, 라벨 미디움 등에서 고를 수 있습니다
저는 이것이 헤드라인 미디움이 되길 원합니다
어떻게 되는지 살펴봅시다
그 다음에 다양하게 시도해볼 수 있습니다
이제 텍스트의 style(스타일)을 바꾸는 방법과 위치를 알았으니
가지고 놀아볼 수 있습니다
자 이게 헤드라인 미디움으로 했을 때의 결과입니다
멋집니다
이제 제일 윗줄에도 같은 과정을 반복합시다
Unit Converter(단위 변환기)라고 적혀있는 부분입니다
반점을 입력하고 같은 방법을 사용하면 되는데
이번에는 헤드라인 라지를 사용해보겠습니다
이번에는 어떤지 보도록 하겠습니다
둘을 비교해볼 수 있겠습니다
이제 이 Unit Converter(단위 변환기) 텍스트가 훨씬 크게 보일 것입니다
그렇습니다
전에 비해 눈에 띄게 큰 글씨로 Unit Converter(단위 변환기)라고 적혀있습니다
그리고 밑에는 result(결과)가 있습니다
이정도면 제가 보여드리고 싶었던 것의 전부입니다
style(스타일)로 여러가지를 시도해보실 수 있습니다. 폰트도 변경할 수 있고 다른 것들도 변경할 수 있습니다
다양한 문서를 조사해볼 수도 있고 챗GPT를 이용할 수도 있습니다
그렇게 한 번 해봅시다
이 영상이 꽤 짧기 때문에
챗GPT 탭을 하나 열고 한번 시도해봅시다
좋습니다
자
사용을 해봅시다
'내 Android 앱의 텍스트를 style(스타일)하고 싶어'
'난 Kotlin과 Jetpack Compose를 사용하고 있어'
'style(스타일)하는 것을 도와줘'라고 하겠습니다
이렇게 간단한 것으로 시작해봅시다
저는 이 추가 지시 사항들을 얻고 있습니다
추가적 디테일들입니다
이것을 원하신다면 additional settings(추가 설정)으로 가서
이 텍스트를 사용하시면 됩니다
한 번 읽어보겠습니다
제 조수가 이것을 강의에 추가해서 여러분이 복사할 수 있도록 할 것입니다
우선 여러분께 먼저 물어보는 답변을 줄 것입니다
'물론입니다, 여러분의 Android 앱의 텍스트를 style(스타일)하는 것을 도와드리겠습니다'
'생각하고 있는 style(스타일)에 대한 설명을 해주실 수 있습니까?'
'예를 들어 폰트 사이즈나 색깔을 바꾸고 싶습니까?'
'1. 나는 폰트와 색깔을 바꾸고 싶어'
'2.'
'단일 텍스트 요소'
그리고
'3.'
'디자인이나 사용자 인터페이스(UI) 가이드라인이 있나요?'
'현재로서는 없어'
좋습니다
지금 막 시작하고 있기 때문에
아직은 자세한 요구 사항이 없는 것입니다
그럼 이제 챗GPT가 방금 전에 보여드린 지시 사항들에 따라서
전문가를 통해 추가적 도움을 줍니다
네
이 부분이 그 전문가입니다
Android 와 Kotlin 과 Jetpack Compose의 텍스트 스타일링 전문가라고 합니다
'원하는 폰트와 색깔을 규정할 텍스트 style(스타일)을 만드십시오'
'그 텍스트 style(스타일)을 텍스트 요소에 적용하십시오'
'코드 예시를 들어줄 수 있어?'
자
그러면 '물론이지' 라고 합니다
이렇게 보여주고 있습니다
그리고 이 val custom text style(커스텀 텍스트 스타일)을 만들어줍니다
이 텍스트 style(스타일)을 복사해봅시다
그리고 저희의 애플리케이션에
집어넣겠습니다
여기에 넣으면 됩니다
custom text styles(커스텀 텍스트 스타일)들은 텍스트 style(스타일) class를 import해야 합니다
따라서 이 compose(컴포즈)를 사용해봅시다
font family를 import해야 하는데 이 또한 마찬가지로 compose(컴포즈) 버전을 사용합니다
sp를 사용할 것인데 이는 dp와 비슷하지만 폰트와 텍스트를 위한 것입니다
그리고 여기서는 color를 사용합니다
이것이 현재로서의 custom text style(커스텀 텍스트 스타일)이고
이제 어떻게 적용해야 하는지 봅시다
자
이것은 텍스트와 어떻게 실험해볼 수 있는지를 보여주는 예시이고
텍스트 style(스타일), 텍스트 값, remember(리멤버), basic text field(기본 텍스트 창)
여기 있습니다 custom text style(커스텀 텍스트 스타일)
여기
basic text field(기본 텍스트 창) 밑에 있습니다
이러한 변화를 보여주고 있습니다
'나는 텍스트 field(창)이 아니라 텍스트 composable(컴포저블)을 위한 style(스타일)을 사용하고 싶어'
'그것을 위한 코드를 줄 수 있어?'
어떤 답변을 주는지 봅시다
좋습니다
이런 코드를 보여주고 있습니다
네
약간 바꿔서 그냥 style(스타일)
custom text style(커스텀 텍스트 스타일)이라고 하고 있습니다
완벽합니다
그럼 이제 이것을 여기 이것에 적용해봅시다
Unit Converter(단위 변환기)에 헤드라인 라지 대신 방금 전에 만든 이
custom text style(커스텀 텍스트 스타일)을 사용하겠습니다
그리고 앱을 재가동해서 이제 저희의 헤드라인에 어떤 텍스트 style(스타일)이 있나 확인해봅시다
빨간색일 것입니다
그렇습니다. Unit Converter(단위 변환기)
이제 빨간색입니다
이것이 이 custom text style(커스텀 텍스트 스타일)의 기능입니다
지금은 default(초기 설정) font family입니다
다른 font family들도 사용할 수 있습니다
예를 들어 Monospace를 사용할 수 있습니다
네
Monospace를 사용해봅시다
여기서는 폰트 사이즈를 정할 수 있습니다
텍스트 사이즈는 32sp로 해봅시다
그리고 색은 그대로 빨강입니다
어떻게 나타나는지 보겠습니다
되었습니다
Unit Converter(단위 변환기)라고 하는데 물론 다른 디자인 언어들과는 어우러지지
않지만 말입니다
이것은 텍스트와 텍스트 style(스타일)을 조정하는 방법을 보여드리기 위함이었습니다
지금 이 모습이 좋은 텍스트 디자인이라는 말은 아닙니다. 오히려 전보다 별로로 만들었다면 그렇다고 할 수
있겠습니다
그러나 이것이 어떻게 작동하는지 보여드리고 싶었습니다
그리고 챗GPT가 큰 도움을 주니 활용하는 방법도 보여드리고자 했습니다
네
이제 MaterialTheme typography(활자)로 돌아가서 다시 전에 사용했던 헤드라인 라지로 돌아가겠습니다
이쪽이 방금 만든 것보다 더 보기에 좋았으니 말입니다
아참,
너무 한참 전으로 돌아가 빨간색의 import도 없어졌습니다
그러나 다시 해주면 아마 되었을 것입니다
여기까지 간단한 소개였습니다
즐거우셨길 바랍니다
다음 강의에서는, 우선 여러분들을 위한 연습 문제들이 여전히 꽤나 준비되어있습니다
그러니 그것들을 하시면 되고, 오늘은 이정도에서 마무리하겠습니다. 수고하셨습니다