[SOPT] Seminar5
스플래쉬 + 폰트 + 아이콘
스플래쉬(Splash)
- 백그라운드에 있지 않은 어플리케이션을 실행했을 때 맨 처음 나오는 화면
(보통은 로그인 하기 전에 나오는 화면)을 말한다. - 사용자로 하여금 앱이 실행되고 있음을 보여준다.
- 로그인 전에 서버와 통신해야 할 부분이나 기타 처리할 데이터가 있으면 이 화면에서 처리한다.
폰트
- 외부 폰트를 안드로이드 스튜디오 내에서 사용할 수 있도록 xml로 작성한다.
- res -> new -> Android Resource Directroy에서 font를 추가
- 사용할 폰트를 font 폴더에 추가한다.
- 그리고 추가한 폰트를 사용하는 xml 파일을 작성한다.
- 그리고 layout xml 파일에서 사용할 폰트 xml 파일을 적용한다.
아이콘
우리가 사용하는 앱의 아이콘은 어떻게 설정할까요??
- 그렇게 어렵지 않습니다.
- res -> mimmap -> new -> Image Asset에서 새로운 아이콘 이미지 추가
Path에서 사용하고 싶은 이미지를 불러오고 적용 시키면 끝!!
화면의 이해
- 해상도 : 하나의 이미지를 표혀하는데 몇 개의 픽셀(pixel) 또는 도트(dot)로 나타내는 지의 정도를 알려주는 지표
- 안드로이드 운영체제를 가진 device는 다양한 종류가 존재한다. 즉 너무나도 다양한 해상도가 존재하는 것이다. 이처럼 다양한 해상도를 가진 device에 뷰를 맞춰서 개발하는 것은 힘든 일이다.
- 이와 같은 문제를 잘 해결하기 위해서 다음에서 설명하는 개념들을 잘 알고 있어야 한다.
픽셀의 이해
- 픽셀은 고정값이다.
- 그래서 크기가 변한다.
- 값은 고정이지만 해상도별로 달라보이는 문제가 발생한다.
- 그래서 값은 고정이어도 크기는 변한다.
- 그래서 픽셀로는 화면에 대응하기가 힘들다.
- 픽셀 : 기기 대응이 힘들다.
DP
- dp는 디바이스에 따라 값이 변한다.
- 그래서 크기가 고정된다.
- 기기 해상도에 따라 네모 사이즈가 같아보인다.
(디바이스 해상도에 따라 크기의 사이즈가 조정되었기 때문) - 그래서 device는 달라도 크기는 고정된다.
- 이 때문에 디자이너가 여러 dp에 대응하게끔 이미지를 준다.
문제
- 같은 dp라 할지라도 화면 너비, 높이에 따라 차지하는 정도는 달라질 수 있다.즉,
여백 문제가 발생함 - 크기 중심으로 갈 지 여백 중심으로 갈 지 잘 판단해야 한다.
- 우선적으로는 사용할 대표 기기를 선정하는 것이 그나마 수치의 오차를 줄일 수 있는 방법
- 사실상, 가장 확실한 방법은 기기마다 레이아웃을 짜는 것이지만, 쉽지는 않다.
SP
- 글자에 많이 쓰이는 사이즈 단위
- 글자가 가지는 고유의 사이즈에
비례해서 크기가 변하는 것 - 기본 원리는 dp와 유사
- 사용자가 설정한 글꼴에 따라 호환되어 사이즈 조정
디자이너와 협동하기
방법
- 서로가 고생하기
디자이너는 모든 기기에 대한 디자인을 만든다
개발자는 모든 기기에 대한 레이아웃을 짠다.
가능할까?
Build 클래스를 통해 기기 분류가 가능하다. 가장 정확한 방법이지만, SOPT에서 진행하는 2주간의 App Jam에서는 시간이 부족하고 불가능한 방법이다.
- 적당히 타협하기
- 중요도를 묻는다.
– 뷰 자체의 크기가 중요하면 뷰 위주로 값을 넣을 것
– 배치 및 공간이 중요하면 여백 위주로 값을 넣을 것 - 기기들의 태생적 한계를 공유한다.
– 기기가 너무 다양한 나머지 디자인적인 차이와 한계가 존재한다.
– 디자이너가 기준으로 정한 기기 이외의 기기들과는 보이는 모습이 조금 달라 질 수 있음을 충분히 인지시키자. - 수치를 최대한 자세하게 요구한다.
– 길이든 색상이든 일단 최대한 빈틈없이 알려달라 할 것
– 수치를 보면 무엇이 중요한지(자체 크기, 공간) 어느정도 판단 가능 - 이미지 이름은 꼭
소문자, 밑줄(_) 그리고 숫자 조합지어달라 한다.
과제
- 세미나 시간 동안 디자이너와 협업한 View 완성하기(SeekBar 사용)
- 참고 : 기능은 구현하지 않고 View 만 구현하였습니다.
Github : https://github.com/WooVictory/SOPT_22th_Seminar5_HomeWork
- 다른 뮤직 플레이어 (Progressbar Wheel 사용)
Github : https://github.com/WooVictory/SOPT_22th_Seminar5_Preview