개발 일지(1) - ListenApp

최근 영어 듣기를 공부할 때 불편함 점들이 많았다. 문장 시작점으로 가기 위해서 5초 단위로 이동을 하니 듣고 싶은 부분으로 이동하고 싶어도 2초 정도 기다려야 하는 답답함이 있었다. 물론 이런 문제들에 대해 초단위 를 작게 쪼개는 플레이어도 있지만 오래전에 만들어져 사용하기 불편하거나 UI가 별로인 것들이 많았다. 또한 초단위로 뒤로가기, 반복하는 것이 아닌 "어절에 맞추어 반복할 수 있는 앱"을 만들고자 한다. 3월전까지 출시하는 것을 목표로 삼았다.

 

 

 

일주일에 한번씩은 중간 과정을 포스팅할 생각이다!

 

 

 

 ~ 2023/01/09

영어 듣기 앱 UI 구상 - Figma를 이용해 디자인 하였고 UI를 복잡한 기능보다는 필요한 기능들만 깔끔하게 보여주고자 했다.

 

 

2023/01/05 ~ 2023/01/12 

대략적인 UI 구현을 완료했다. 

 

 

UI 구현에 있어서 가장 고민 되었던 점은 재생 화면이었다. 필자는 세부분으로 나누어 구현했다.

 

먼저 상단부분에서 이미지, 오디오 파장 두 가지 화면을 보여 주어야 했다. 처음에는 CollectionVIew를 이용해서 이미지 화면을 넘기고 하단의 버튼을 통해 선택한 화면으로 넘어가도록 구현하려고 했지만, 오디오 파장을 구현하는 데 있어 아무래도 UIView보다는 ViewController가 유리할 것으로 예상 되어 pageViewController를 이용해 구현해 주었다. 그 이외의 부분은 색깔별로 UIVIew를 구분해 안에 stackView를 사용해서 구현해 주었다.

 

 

또한 자세한 이유는 모르겠지만 SnapKit을 이용해 autolayout을 설정할때 safeArea가 제대로 설정되지 않았다. 계속해서 safeArea를 넘어가도록 설정이 되어서 구글링을 해봤지만 safeArea를 넘어가고 싶어하는 사람은 있어도 이를 막고자 하는 글을 찾기 힘들었다(필자가 못 찾은 것일 수도 있다) 기존에 다른 앱들을 만들때는 이런 적이 없어서 이유를 찾느라 삽질을 좀 했다ㅎ 나중에 우연히 view.safeAreaLayoutGuide 키워드를 보고 적용해 봤더니 원하는 결과를 얻을 수 있었다.