🗣 CUSE ME_iOS 💻

발달장애인을 위한 카드형 의사소통도구, 큐즈미

---

발달장애인들에게 세상은 넓고 깊은 바다와 같습니다.
말이 통하지 않는 사람들로 가득한 세상은 그들에겐 함부로 나아가기 어렵고, 무서운 곳이니까요.
우리는 발달장애인들도 넓은 세상을 자유롭게 헤엄칠 수 있기를 바랍니다.
우리와 최소한의 의사소통이 가능하다면, 발달장애인의 세상도 조금은 넓어지지 않을까요?

💕	약자가 배제되지 않는 세상을 꿈꿉니다.
	일상에서 말이 통하지 않는다는 이유로 세상을 포기하지 않았으면 좋겠습니다.

💕	이 앱을 마주할 모든 사용자를 생각했습니다.
	발달장애인 뿐만 아니라 보호자, 이 앱을 마주할 비장애인들을 모두 고려한 UX

💕	기존 앱보다 사용성을 높였습니다.
	TTS(Text To Speach), 음성 녹음, 카드 공유 기능

---

SOPT 25th APPJAM

• 개발 기간 : 2019년 12월 24일 ~ 2020년 1월 4일

📄 Service Work Flow

📱 실행 화면

• 발달장애인 홈 (카드 클릭 전)

• 발달 장애인 홈 (카드 클릭)

• 관리자 모드

• 사용자 홈 (카드 데이터 존재)

• 사용자 홈 (카드 데이터 없음)

• 사용자 홈 Custom Tabbar

• 카드 내려받기

• 카드 추가

• 설정

🖥 개발 환경 및 사용한 라이브러리

개발 환경

• Swift 5
• Target OS : iOS 11~

사용한 라이브러리

• Kingfisher (5.8.3) : S3 저장소 URL 로부터 이미지를 다운로드하고 캐싱하기 위한 라이브러리

  let url = URL(string: "https://example.com/image.png")
  imageView.kf.setImage(with: url)
  

• Alamofire (4.9.0) : Swift 로 작성된 HTTP 네트워킹 라이브러리

   func userName(completion: @escaping (ResposeObject<User>?, Error?) -> Void) {
       
       let id = "example"
       let url = URL(string: "https://example.com/user/id")
           
       Alamofire.request(url, method: .get, parameters: nil, encoding: JSONEncoding.default, headers: nil)
           .responseJSON {
               response in
               
               switch response.result {
               case .success:
                   if let data = response.data {
                       do {
                           let decoder = JSONDecoder()
                           let result = try decoder.decode(ResponseObject<User>.self, from: data)
                           completion(result, nil)
                       } catch (let error) {
                           print("getMyRentalList(catch): \(error.localizedDescription)")
                           completion(nil, error)
                       }
                   }
               case .failure(let e):
                   print("getMyRentalList(failure): \(e.localizedDescription)")
                   completion(nil, e)
               }
       }
     }
  

• lottie-ios : 벡터 기반의 애니메이션을 JSON으로 랜더링하고 실시간으로 동작하게하는 라이브러리

📋 기능 소개

기능	개발 여부	기타사항	담당
Lottie	○	Home 화면 배경	이승언
카드 정렬	○	사용자 설정, 빈도, 이름	이승언,신유진
음성 재생	○	음성 데이터가 있을 경우	이승언
TTS	○	음성 데이터가 없을 경우 텍스트를 바탕으로 생성	이승언
Pinch	△	카드 크기 확대 및 축소	이승언
카드 관리	○	삭제, 숨김 (다중 선택 가능) / 수정	이승언
카드 순서 변경	○	카드 Drag & Drop	이승언
카드 검색	○	카드 제목 및 내용 검색	이승언,신유진
카드 다운로드	△	일련번호를 이용하여 다운로드	이승언, 뷰:신유진
새 카드 생성	○		이승언,뷰:신유진
이미지 추가	○	새 카드 생성시 카메라롤에서 사진 추가	이승언
카드 수정	△		이승언
음성 녹음	○	서버에 파일 저장	이승언
음성 스트리밍	○		이승언
설정 정보 변경	○	연락처, 비밀번호 업데이트	이승언, 뷰:신유진
UUID generator keychain	○		이승언

🔎문제점과 해결방안

• 사용자 홈의 가운데 floating menu 문제 Tabbar Controller를 Customize시켜 해결 HomeHelperTabBarController.swift

• collectionview delegate 에서 tts나 음성 메모가 출력 중일 때 중복으로 셀이 터치되는 문제

guard !synthesizer.isSpeaking && !streamingPlayer.isPlaying else { return }


extension AVPlayer {
    var isPlaying: Bool {
        return rate != 0 && error == nil
    }
}

• 녹음 중 시간 Progress bar Customize 하기

override func viewDidLoad() {
        super.viewDidLoad()
        
        //init path
        let circularPath = UIBezierPath(arcCenter: .zero, radius: 43, startAngle: 0, endAngle: 2 * CGFloat.pi, clockwise: true)
        
        //Draw the Circle
        timeLayer.path = circularPath.cgPath
        timeLayer.strokeColor = UIColor(red:251/255, green:109/255, blue:106/255, alpha:1.0).cgColor
        timeLayer.lineWidth = 2
        timeLayer.strokeEnd = 0
        timeLayer.lineCap = CAShapeLayerLineCap.round
        timeLayer.fillColor = UIColor.clear.cgColor
        timeLayer.position = CGPoint(x: 188, y: 723)
        timeLayer.transform = CATransform3DMakeRotation(-CGFloat.pi / 2, 0, 0, 1)
        
        backgroundLayer.position = CGPoint(x: 188, y: 723)
        backgroundLayer.path = circularPath.cgPath
        backgroundLayer.lineWidth = 2
        backgroundLayer.fillColor = UIColor.clear.cgColor
        backgroundLayer.strokeColor = UIColor(red:229/255, green:229/255, blue:229/255, alpha:1.0).cgColor
        
        //add layers to view
        view.layer.addSublayer(backgroundLayer)
        view.layer.addSublayer(timeLayer)}

😁 개발

👩🏻‍💻 신유진

👨🏻‍💻 이승언