[TIL] 2022.07.08 (SeSAC iOS)

 

오늘 공부한 내용들을 내가 잊지 않기 위해 기록합니다.

틀린 내용이 있을 수 있는 점 참고 부탁드립니다 :)

 

■ 오늘의 과제

(좌)참고한 페이지 이미지 (우)UI를 따라 만들어본 화면

과제 목표 : 현재 서비스중인 앱의 UI를 따라 만들어보며 오토레이아웃 학습해보기

 

'배달의 민족' 어플을 선정해서 UI를 따라 만들어보며 오토레이아웃을 학습해보았다.

아래는 내가 작업한 화면의 시뮬레이터 위에 간략하게 (내가 작업한 것 기준) 구성요소, 상세설정 요소 등을 끄적여보았다.

알아보기는 힘들지만 구분해보자면,

 

ㅡ 구성요소 객체 구분

ㅡ UI 상세설정이 필요해보여서 설정해준 사항들

ㅡ 실제 앱과 비교해보며 단순화했거나 기타설명 등

 

UI과제 완성 후, 정리해본 고려사항들

 

이전까지는 스토리보드에서 Preview를 두지 않고 작업했어서 (작업한 기종과) 다른 기종으로 시뮬레이터를 돌리면 뭔가 비율이 맞지 않았다.

오토레이아웃으로 작업했으면서 그 작업의 의미를 내다버린 것이나 다름없던 것!

 

오늘 수업시간에 Preview를 켜서 디바이스별(iPhone 13 Pro Max, iPhone 8 Plus, iPhone SE (3rd generation))로 작업한 사항들을 확인해볼 수 있다는 것을 처음 알았다.(이제서야..ㅋㅋㅋ)

실시간으로 확인이 가능하니 레이아웃 배치를 할 때 생각을 좀 더 하면서 작업할 수 있는 것 같다.

 

배달의 민족 화면 상단에서 '배달', '배달1'버튼의 경우,

기종마다 우선 Top, Leading, Trailing, spacing의 제약조건이 디바이스별로 일정해보였다.

→ 그래서 우선 두 개를 stack view로 묶어준 후

→  Top, Leading, Trailing, spacing의 제약조건을 설정하고

→ '배달', '배달1'버튼은 비율이 정해져 있을 것으로 보여서 Aspect ratio를 주었다.

 

근데 최대한 실제 화면과 유사한 비율로 하고 싶어서, 비율상 수치들을 한땀한땀 바꿔서 확인해가며 설정했더니

마지막에는 49:53이라는 깔끔하지 못한 비율이 나왔다 흠

 

현업에서는 디자이너분으로부터 정해진 수치를 받을 수 있겠지..?

어쩌다보니 이런 작은 디테일들에 집착 아닌 집착을 하게 된다ㅠㅠ

후딱후딱하고 지나가고 싶은데 완벽하게 똑같이 하고싶다보니 그게 쉽지 않다

 

---

<오늘의 과제 작업 중 Q&A>

Q1) 아래와 같이 2개 요소의 오토레이아웃 설정시, stackview로 묶고 top/leading/trailing 세 요소 설정 후, 높이를 정하는게 어려웠음. 비율을 최대한 유사하게 따라하기 위해 하나하나 클릭해보고 49:53이라는 (깔끔하지 않은) 숫자로 정하게 되었는데 이상은 없을까요?

A1) 큰 문제 없습니다. (멘토님의 경우에는) 작업시 심지어 소수점이 나온 경우도 존재했어요.

< 수업내용 중 일부 >
- 추후 현업에서는 contraints 설정시 HIG도 고려함
   ex. 버튼간 간격 최소 8이상 등
- 디자이너분들의 피드백을 참고하여 4의 배수 숫자로 설정을 하기도 함

< 여기부터는 TIP >
- UI 설정시 구조에 따른 우선순위를 고려하면 보다 좋음
: 큰 쪽 → 작은 쪽, 위 → 아래, (그룹화된 경우) 보다 큰 영역 -> 작은 영역
- 일반적으로 view당 약 4개의 제약을 걸어줌

 

 

Q2) 배달의 민족 화면의 경우, 각 요소들이 버튼인지/이미지인지/view인지 어떤 객체를 적용해야 할지 명확하게 구분을 하는게 어려워요.

해당 요소들을 구분하는 기준이나 특징이 있을까요?

 

A2) 정답은 없습니다. 앱마다 모두 다 사용하는 요소가 상이하기 때문이죠.

다만 특정 앱에서 해당 요소를 클릭했을때 액션의 여부에 따라 버튼인지를 유추해볼 수는 있습니다.

현재 배달의 민족 연습 UI작업은 오토레이아웃 연습을 위함이니 그냥 UIImage로 해도 무방합니다.