로그인 화면, 설정 화면, QR코드 가이드 화면을 구성해 보았다.

로그인이 통상 앱과는 달리 '인증'이 중요하다. 또한, 이미 인증을 한 유저라면 다음 인증은 불필요하다!

애플 로그인과 이메일 인증을 통해 로그인을 할 수 있게 UI를 설계하였다. 아직 다다익선만의 로고가 없어서 완성된 로그인 화면은 아니지만 이 화면을 어떻게 구성할 지 미리 생각해보았다.

한 눈에 볼 수 있게....

뭔가 다르게 디자인하기 보다는 기존 List 형식을 따랐다. 3개의 섹션이 있고, 각 섹션은 내 정보, 백업 관리 기기 관리가 될 것이다. 사실 우리가 참고하는 앱인 Authy앱과 비슷하다고 느낄 수 있겠지만, Authy는 각 섹션을 각 화면으로 나누었고 우리는 합쳤다는 것이 다르다. 합쳤던 이유는 따로 있다. 한 두줄뿐인 정보들이 각 뷰에 있는것보다는 한 눈에 볼 수 있는것이 유저에게 편하다고 생각했기 때문이다.

QR코드 스캔 동작을 하기 직전에 어떤 것을 위해 QR코드를 제공하는지 설명해주었다. 사실 한 줄이지만 ㅎㅎ 이 곳에서 우리 앱의 자부심(?)을 담았다.

• 보안은 다다익선! 2FA는 다다익선! TOTP는 다다익선!

👉 앱 플로우

로그인 화면, 계정, 백업, 디바이스 관리에 대한 사용자 스토리와 기능을 적어보았다. Twilio Authy 앱의 백업, 디바이스 관리 기능을 직접 사용해보면서 적었다.

• 기기 연동 집에 있는 안드로이드 기기에 앱을 설치하고 첫 번째 세팅 화면에서 iOS에 등록된 폰 번호를 입력했다. 그리고 인증 방법으로 "USE EXISTING DEVICE"를 선택했더니 iOS 앱에 바로, 어떤 안드로이드 앱에서 기기 추가를 하길 원하는데 수락할 것인지 묻는 메세지가 왔다. 수락을 누르고 백업 허용시 설정했던 비밀번호를 입력했더니 바로 안드로이드 기기에 TOTP 토큰들이 추가되었다.

• 기기 삭제 디바이스 관리 창에 들어 가보니 기기가 추가되어 있었다. 정보 수정 기능이 있었고 이름을 변경해 보았다. 바로 안드로이드 기기에 있는 디바이스 정보가 수정되었다. 이번에는 삭제가 궁금하여 iOS에서 안드로이드 기기를 삭제해 보았다. 그랬더니 안드로이드 앱에 있는 토큰들은 모두 그대로 있지만, Multi-Device 토클 창이 unable 상태가 되었다. 백업도 끊어진 것 같았지만, 안드로이드 앱은 뭔가 허술한 부분이 많아서 이 또한 UI로 제대로 표시되지는 않았다.

  그런데 로그 아웃 기능이 없어서 다시 계정에 연결하는 방법이 없었다. 그래서 앱을 지우고 다시 설치했더니 똑같이 폰 번호를 입력하는 세팅 창이 나왔다. 한번 디바이스가 삭제 되면 영영 연결이 안되는 것이다.

👉 백로그 스프레드 시트

처음 설계할 때 왜 이걸 고려하지 않았는지 모르겠지만... 삭제 기능을 구현하면서 이 고민을 시작하게 되었다. 아애 어떤 셀도 표시 하지 않는 게 좋을지 뭔가 표시 해주어야 할지 고민되었다. 그래도 뭔가 표시해주면 좋다고 판단이 되어 토큰이 아무 것도 없을 때에는 다른 화면을 표시해주도록 했다.

깃허브에서 충돌이 난 것을 고치고 머지를 했는데, 잘 못 고쳐서 트래비스에서 에러가 났다.

이 방법이 맞는지는 모르겠지만... 일단 이렇게 해결했다.

1. 현재 작업하고 있던 브랜치에서 fix/Bug 브랜치같은걸 따로 판다.
2. 여기서 잘 못고친 commit을 냅다 pull을 받는다.
3. 고친다.

간단하고도 무식한 방법이다..ㅎㅎ

Sheet로 TokenEditView로 화면전환을 하면 TokenEditView의 init이 무한하게 호출되었다. 이유를 모르겠다. 추측하자면 Timer와 어떤 연관이 있는 것 같다. 아무튼 이러한 현상 때문에 편집 화면에서 어떤 설정을 하더라도 설정값이 계속 초기화 되어 편집 내용이 반영되지 않게 되었다. 그리고 NavigationLink로 전환하면 3번 호출되는 것도 확인 되었다. 왜 화면 전환인데 1번 호출되는 게 아니라 이렇게 여러 번 호출되는 것인지 알 수 없다.

취소.. 한번 더 살펴보아야겠다.

• 이제 문제의 원인이 아닐까..?

  • 취소를 누르면 엔드 서치가 되면서 쇼우메인뷰가 호출
  • 근데 어찌된 이유인지 모르지만 어떤 이유로 다시 서치 스타트 호출
  • 쇼우 메인뷰가 조금 늦게 렌더링 되면서 스타트 서치위에 또 그려짐 또는 동시에 그려짐

• 심지어 앱이 죽을 때도 있었다.

아직 이유를 잘 모르겠다.

Modifier를 따로 구조체로 빼서 Aelrt가 되게 작성했는데, 아직 alert가 왜 안 뜨는지 이유를 찾지 못했다. 곧 잡아야겠지!

list에서 그냥 네비게이션 링크를 사용하면 destination 뷰를 바로 로드하게 된다... 이를 방지하고 클릭 시에만 로드하게 하려면 아래 코드를 사용해 감싸주면 된다.

struct NavigationLazyView<Content: View>: View {
    let build: () -> Content
    init(_ build: @autoclosure @escaping () -> Content) {
        self.build = build
    }
    var body: Content {
        build()
    }
}

NavigationLazyView 참고 링크

큐알 코드가 넘어가지 않았는데 큐알 인식화면이 종료되었을 때 편집화면이 자동으로 생성되었다. 편집화면의 생성자에서 예외처리를 해줘야 할 것 같다.

• 키체인으로 Service 데이터 저장
• 버그 수정
• 백로그 마무리
• 개발일지 밀린 거 쓰기
• TOTP 코드 뜯어보기
  • 이거 다같이 피피티 만들어보는 것도 좋겠다!
• 복사 버튼 - 클립 보드 복사

(솔직히 쓰기 - 현재 파트너 또는 누군가가 본다고 생각하지 말고 미래의 내가 본다고 생각하며 쓰면 어떨까요??😏)

• 백로그 작성하면서 Authy앱을 이리저리 둘러보았다. 잘 만들어진 앱이라고 생각하고 있었는데.. 내 생각보다 훨씬 더 잘 만들었다고 생각됐다ㅠ.. 이 앱을 따라잡기 위해서는 우리가 할 일이 굉장히 많다고 느껴지는 새벽이다.......
• 그래도 오늘 작업했던 우리 디자인과 백로그는 탄탄대로여서 꽤 만족스러웠다.
• 그런데.. 개발을 하면 할수록 잔 버그가 너무 많다.... 너무너무많다 이유를 알고싶다 마음 한켠이 찝찝하다.
• 재명님의 메모습관을 내 능력으로 가져오고싶다 ~! ㅎㅎㅎㅎ 그리고 리더십도! ㅎ

• 원래는 이번 주에 백업 기능까지 웬만큼 해놓는 것이 목표였지만 SwiftUI에 적응하는 데 시간을 많이 쓰게 되었다. 선언형 패러다임이란게 편하긴 하지만, 어디가 잘못되었는지 자세하게 알기 어려워 문제의 원인을 찾는데 시간이 더 오래 걸리는 것 같다. 그래도 화면 구성과 백로그를 어느 정도 작성하여 마음이 좀 놓인다.
• 어진님의 눈썰미를 믿고 있었는데 믿음을 저버리지 않으시고 또 다시 눈길을 사로잡는 UI를 만들어주셨다. 화면 공유하고 구경하면서 많이 배웠다.
• 오늘은 컨디션이 별로 좋지 못했다. 4시쯤에 삭제 기능 구현을 마치고 머리가 너무 아파서 어진님께 양해를 구하고 한시간 쉬었다. 사실 어제 맥주를 몇 캔 먹고 잤는데 그게 아니면 이렇게 아플 이유가 없는 것 같다. 죄송합니다 어진님...🍺