[유데미x스나이퍼팩토리] 프로젝트 캠프 - IT 서비스기획(9)

화면정의서

• 상단메뉴 : 문서에 대한 정보
• 디자인 영역
• 설명
  • No.
  • 이름(목적 + UI)
  • 정의(규칙, 뜻, 인터렉션)

UI란

• 아이템들의 이름 <시각적으로 유저에게 보이는 모든 아이템들>
• UI 종류

  • Label

    • 제목 ~ 소제목

    • 짧은 글을 표현할 때 사용하는 텍스트

    • 사용방법 : ID_label, 소제목_label

      • 폰트

      • 사이즈

      • 내용 : 어떤 내용을 입력해야하는지

      • 규칙 : 3초에 한 번 씩 바뀐다.

        • 어떻게 바뀌어야 하는지

  • Textview

    • 내용

    • 긴 글에 해당하는 표현을 할 때

      • 폰트
      • 사이즈
      • 정렬, 디자인 가이드
      • 내용 : 내용 컨셉
      • 규칙

    • 제품상세_Textview

  • Button

    • 눌리는 애니메이션이 있다

    • 인터렉션의 시작점

    • 이벤트

      • '화면'으로 이동한다.

      • 입력된 ID와 PW를 서버에 전송한다.

      • 응답이 왔을 때

        • ID가 일치하지 않을 때

    • 활성화 여부

      • 디폴트 : 활성화
      • 초기 : 비활성화
      • 활성화를 시키는 조건

  • Image

    • 사진, 그림

    • 프로필_image

    • 확장자: png, jpg

    • 사이즈: 가로 세로 - 비율

    • 어떤 이미지를 넣게 할 것인지? 어떻게 보여줄 것인지?

    • 디폴트 이미지: ex) 카톡 기본 프로필 이미지

    • 터치여부 : No

      • Yes

        • 이벤트

          • 전체화면으로 확대된다.

  • video player

  • textfield(네모영역)

    • 텍스트를 입력받는 공간

    • 터치하는 순간 키보드가 생성

    • 소거 방법

    • ID_Textfield <ID입력_UI>

    • Placeholder : 이메일을 입력해주세요

    • 키보드

      • 천지인 키보드
      • E-mail 키보드
      • Number 키보드
      • 한글
      • 영문
      • 기본키보드 : 핸드폰에서 설정한 기본 키보드

    • 용량제한

      • 한글: 2
      • 영문, 띄어쓰기: 1

    • 엔터 이벤트

      • 메시지가 전송된다.
      • 줄바꿈
      • 키보드가 내려감

    • Table

      • 동일한 형태의 구성을 반복시키는 영역 UI

        • 카톡의 친구리스트
          • 채팅방 리스트

      • Cell

        • 반복되는 구성 UI 묶음

        • ex - 카톡 친구리스트

          • 프로필_image
          • 이름_label
          • 소개_textview
          • 멜론API

      • 몇개까지 화면이 보여질 것인지

      • 셀이 없을 경우 무엇을 띄울 것인가? <디폴트>

        • 친구 등록하기

---

앱

앱이란?

• 어플리케이션
  • 소프트웨어 상의 응용 프로그램 <모바일>
• 모바일
  • 휴대폰
  • 이동통신장치
• 휴대폰에 있는 프로그램

  • 모바일 앱

    • 네이티브 앱

    • 기기별, OS별 맞춤형으로 제작되는 개발 방식

      • IOS & AOS

    • 장점

      • 기기와의 호환성
      • 완성도가 높음

    • 단점

      • 높은 비용
      • 오랜 시간
      • 사용성, 범용성이 떨어짐

  • 웹앱

    • 인터넷 m.도메인

    • 웹상에서 모바일 버전으로 보여주는 형태

    • 장점

      • 업데이트 반영도 좋음
      • 사용성, 범용성 높다
      • 개발기간이 짧음
      • 저비용

    • 단점

      • 기기별 호환성 떨어짐
      • 퀄리티가 떨어짐
      • 인터넷을 기반으로 함

  • 하이브리드 앱 (네이티브 + 웹)

    • 네이티브로 디자인을 만든다.

    • 데이터, 기능 -> 클라우드로 처리

    • 장점

      • 호환성이 좋다
      • 높은 완성도
      • 높은 범용성과 사용성
      • 네이티브에 비해 빠른 개발속도

    • 단점

      • 개발자의 역량
      • 인터넷 기반

제스처

• 탭
• 롱 탭
• 드래그
• 더블
• 스와이프
• 프레스
• 핀치
  • 아웃 : 확대
  • 인 : 축소
• 로테이트
• 멀티탭
  • 2

UI

• 윈도우 PC - 안드로이드 스튜디오
• MAC - xcode

인터렉션

• 상호작용
• 감각기관 (1차)
  • 시각
    • 애니메이션
    • 색상의 변화 → 디자인
    • 카메라 - 아이트래킹 → Tracking
  • 촉각
    • 진동
    • 버튼
    • 제스처
    • 위치센서, 기울기센서
    • 화면의 로테이트
  • 청각
    • 스피커
    • 마이크
      • 음파
      • 텍스트 리딩
      • 음악 분석
• 감성적 인터렉션 (2차)
  • 재밌다.
  • 좋다/나쁘다

상황

• 변수가 많다.
  • 주변 환경
  • 하드웨어의 한계성
• 시점의 자율성

ios 기획

• Appstore 정책
• 심사가 3일 소요
• 폐쇄적
• 터치 : 손가락 중심보다 살짝 위
• 디자인가이드
• 개발환경 : Mac
• 뒤고가기 필수
• 라이다 센서

AOS 기획

• Playstore 정책
• 심사 기간이 짧다.
• 자율적
• 터치 : 펜 중심
• 디자인가이드
• 개발환경 : 모두 호환
• 하단버튼의 자유
• TOF

---

본 후기는 유데미 x 스나이퍼팩토리 IT서비스기획 과정(B-log) 리뷰로 작성 되었습니다.