새싹 iOS 1주차 - 1

영 yyyng·2022년 7월 4일
2

Sesac

목록 보기
4/32
post-thumbnail
  • Bundle Identifier
    app의 고유한 id. 수정 후 빌드시 다른 앱. ex)주민등록증

  • HIG (Human Interface Guidelines)
    애플 인터페이스 가이드라인

  • SF Symbols (San Francisco Symbols)
    iOS 13부터 지원한 아이콘 라이브러리, 직관적으로 보이는 것이 특징.

  • Assets
    리소스 이미지들을 그대로 사용할 수 없고 비율 등이 다른 디바이스 별로 사용되기 위한 것

  • Launch Screen
    앱 실행 후 첫 뷰가 로딩되는 동안 보여줄 수 있는 화면으로,
    Splash(안드로이드의 스플래쉬)와 같다.
    앱의 성격을 나타낼 수 있는 대표 이미지나 문구를 사용하면 좋을 것 같다.

  • Entry Point
    Launch Screen이 존재한다면 사라진 뒤 나타날 첫 뷰를 지정할 수 있다.
    없다면 앱 실행 후 바로 보여지는 화면을 가르킨다.
    시작화면이니 당연히 하나만 지정 가능하고,
    지정하지 않으면 앱 실행 시 유저에게 표시해야할 첫 화면이 지정되지 않았으므로 검은 화면만 표시된다.
    만약 위와 같은 경우 attributes inspector에서 is Initial View Controller에 체크하여 Entry Point 지정 후 해결 가능하다.

  • Simulator Build
    Xcode를 통해 디바이스 별로 앱의 시뮬레이션이 가능하다.
    아이패드가 없는 경우 앱 개발 중 확인할 때 사용하거나
    비율이 다른 아이폰의 화면 테스트 등이 가능하다.
    카메라, GPS, 센서 등의 테스트를 위해선 직접적인 디바이스 연결이 필요하다.

  • Object Library
    스토리보드에서 Command + Shift + L
    Label, View, Button 등 추가 가능한 라이브러리

  • UILabel
    뷰에 표시될 레이블을 작성할 수 있다.
    Line Break로 줄바꿈 설정 가능

  • UIButton
    뷰에서 상호작용할 버튼

  • UITextField
    유저로부터 텍스트나 숫자를 입력받을 수 있는 필드
    키보드타입이 설정가능하다. ex)넘버패드
    Secure Text Entry로 비밀번호 처럼 입력 받을 수 있다. ex)***

  • UIImageView
    컨텐츠에 삽입될 이미지, 배경 등으로 쓰일 이미지를 뷰에 나타낼 수 있다.

  • UISegmentedControl
    뷰에서 다른 뷰로 화면 전환을 위해 사용

Skeuomorphism 3차원적이고 사실적인 디자인(옛날 iOS)
Meterial (Google)
Flat (현재 iOS)
Newmorphism (Skeoumorphism에 기반한 디자인)

Et cetera
사용자의 편의성을 위해 애플에서 계속 iOS를 업데이트하므로
동일한 프로젝트더라도 iOS버전에 따라 UI차이가 날 수 있다.
예를 들어 SF Symbols 같은 경우도 iOS 12 이하에서는 지원하지 않기에
아이콘이나 이미지를 확인할 수 없다.


Launch screen (위 캡쳐)

네비게이션 바 아이템 크기 조절이 힘들다.
assets에 이미지 크기를 줄여 넣는 방법 말곤 없을까?
네비게이션바 쉐도우 지우는 법을 몰라서 상단에 선이 남아있다.
배민 앱 내에서 주소부분을 누르면 뜨는 팝업이나 버튼 개수 등의 차이로 보아 상단을 네비게이션 바가 아닌 다른 방법으로 만든 듯 하다.
알아볼 것. ( 학습을 더 하다보니 네비게이션 컨트롤이 맞음, 바 아이템 2개 가능 )

버튼들에 이미지를 삽입하여 정렬하는 방식을 실패.
이미지 뷰로 정렬을 시도했고 이미지별 비율이 맞지 않아 엉망진창 정렬인 상태.
위와 같이 여러 오브젝트를 생성해야 할 경우 옵션키를 누른 채 오브젝트를 드래그앤 드랍하면 복사가 된다.
계속 연구 중...

Jack님의 도움으로 이미지 뷰가 아닌
아까 실패했던 UI버튼에 이미지를 삽입하여 정렬을 했다.
key는 style plain -> default 변경
왜 4번째 줄에서 정렬이 망가지는 건지 모르겠다.
3번째 줄까지는 그나마 잘 정렬됐다. 이미지 비율은 여전히 갠플 중..

어설프지만 4번째 줄까지.
다른 이미지일 때 정상적으로 정렬이 되는 걸 보니,
이미지 크기가 제각각이라 정렬에 어려움을 겪은 듯.
아까했던 이미지뷰 정렬보다 더 못났다.
크기가 다른 이미지끼리도 정렬 방법이 있지않을까

강의 중에 넷플릭스 화면 구현해보던 것.
그라데이션 이미지를 다른 그림에 겹쳐 그라데이션 효과를 주신 Jack님.
(그라데이션 이미지는 layer 중 마지막이 되어야 하며, xcode상 view controller scene 디렉토리에서 가장 위로 가야한다.)
개발도, 디자인 작업도 경험이 없는 내겐 너무 신박했다.

//하단 원형 이미지 코드
        imagename.layer.cornerRadius = imagename.frame.height/2
        imagename.layer.borderWidth = 1
        imagename.clipsToBounds = true
        imagename.layer.borderColor = UIColor.clear.cgColor  //원형 이미지의 테두리 제거
        //CornerRadius를 적용하려는 객체의 Attributes inspector에서 Content Mode가 Aspect Fill이 아니라면 적용이 안되는 것 같다.
profile
yyyng2.github.io

0개의 댓글