
2

Ver. Date Change Area Details of Change

1.0 2011.12.22 최초작성 UX중심의 화면설계서 작성

1.1 2011.12.23 all 기능정의 및 캡션설명 추가

Doc. Change History


3

Touch Interaction Type Touch interaction

Tap Touch 시 포커스, Release 시 실행

Double Tap 같은 지점을 빠르게 두 번 Tap

Touch & Hold Screen의 한 지점을 일정 시갂 이상 누르고 있는 상태

Flick 빠르게 직선 이동 Release 시 가속도 Scroll 리스트 빠르게 넘길 대

Tap & Drag 원하는 곳으로 터치후 밀기 화면 및 리스트 스크롤 링

4

Project

Directory


Channel IT (모바일)

IA

1. Main

5

Project

Directory



HOT이슈

관심찿널

브라우징

최근활동

설정하기

Channel IT 1

• HOT 이슈 페이지에서,

업데이트 순으로 보기 탭 메뉴

• Channel IT 방송과 매치된,

최근 업데이트 컨텎츠 리스트

( 편성표와 매치되는 강조할 컨텎츠 리스트 )

2


인기 순으로 보기 탭 메뉴

• SNS공유 및 최근활동, 관심채널, 클릭 률을

합산하여 추전

3


최근 순으로 보기 탭 메뉴

• 최근 등록 순으로서, 뉴스 및 각종 리뷰를 포함함

4 • 동영상 썸네일 터치 시, 해당하는 동영상 플레이

5 • 텍스트 영역을 터치 시, 해당하는

상세내용 페이지로 이동

6 • 하단 화살표 영역을 터치 시,

갂략한 소셜참여 버튼이 하단으로 열림

공통

• 업데이트순 인기순 최근순의 리스트는

공통된 크기의 썸네일 리스트로서,

최대한 일관성을 유지한다

업데이트 순 인기 순 최근 순

'스마트콘텐츠 2011 어워드 & 컨퍼런스' - 앱 창작 워크숍 ...

2011.11.24 오젂 8:33 출처 Bloter


2011.11.24 오젂 8:33 출처 Bloter


2011.11.24 오젂 8:33 출처 Bloter


2011.11.24 오젂 8:33 출처 Bloter

1 2 3

편성표

4 5

HOT이슈

관심찿널

브라우징

최근활동

설정하기

Channel IT

업데이트 순 인기 순 최근 순


2011.11.24 오젂 8:33 출처 Bloter


2011.11.24 오젂 8:33 출처 Bloter


2011.11.24 오젂 8:33 출처 Bloter

편성표

6

좋아요 Face Book 20 Twitter 10

6

Project

Directory



HOT이슈

관심찿널

브라우징

최근활동

설정하기

Channel IT

1 • 텍스트 영역을 터치 시, 해당하는


2 • 동영상 썸네일 터치 시, 해당하는 동영상 플레이

• 휴대폰 방향 회전할 시, 화면크기 자동조정 업데이트 순 인기 순 최근 순


2011.11.24 오젂 8:33 출처 Bloter


2011.11.24 오젂 8:33 출처 Bloter


2011.11.24 오젂 8:33 출처 Bloter


2011.11.24 오젂 8:33 출처 Bloter

편성표

1 Tap

Status

뒤로 공유

상세페이지 타이틀

컨텎츠 제공,작성자 | DATE

상세페이지 컨텐츠내용

관련 컨텐츠 리스트

이젂 다음

2 Tap

Status

닫기

이젂 다음

7

Project

Directory



HOT이슈

관심찿널

브라우징

최근활동

설정하기

Channel IT

1 • 편성표 버튼을 터치 하면,

편성표 화면 보기로 이동

2 • 뒤로 버튼을 터치하면,

HOT 이슈 페이지로 되돌아감

3 • 편성표 리스트를 탭 하면,

방송보기 랜딩 페이지로 이동

편성표

2011. 12. 23

For Better Your Life (제9화)

05:00


06:00


07:00


08:00


09:00


10:00

편성표

2011. 12. 23


05:00


06:00


07:00


07:00


07:00


07:00

뒤로


07:00

1 2

3 Tap

Status

닫기


이젂 다음

8

Project

Directory



뒤로

이젂 방송찿널 정보 다음


• 편성표 리스트를 탭 하면,

방송보기 랜딩 페이지로 이동

1 • 뒤로 버튼 터치하면 편성표로 되돌아감

2

• 방송채널정보 버튼이나,

여백의 빈 화면을 터치하면,

방송채널정보 페이지로

• 방송보기 버튼이나,

영상 썸네일을 터치하면,

방송보기 페이지로 되돌아감

3 • 뒤로 버튼 터치하면 방송보기 페이지로 되돌아감

뒤로

이젂 방송보기 다음

For Better Your Life

• 방송시간 : 본방 월~금 10시

• 출연 : 유재석, 남희석, 강호동, 김재동..등

• 방송등급 : 전체 관람가

IT관련 정보, 이슈, 트렌드를 젂달하는 IT테크롤

로지가 방송과 결합된 신개념 네트워크 정보쇼!

2

2

1 3

2

2

9

Project

Directory



뒤로

이젂 관련 컨텐츠 다음

스마트콘텐츠 2011 어워드 & 컨퍼런스 앱창작 워크숍 참가자모집

1

공유

2011.11.24 오젂 8:33 출처 Bloter

문화체육관광부가 주최하고 한국콘텎츠짂흥원이 주관해 11월 2일부터 3일 양일갂 코엑스에서 열리는 ‘스마트콘텎츠 2011 어워드 & 컨퍼런스’ 의 앱창작워크숍과 투자피칭 프로그램의 참가자 모집을 시작한다.

관련 컨텐츠 뒤로

이젂 컨텐츠 보기 다음


2011.11.24 오젂 8:33 출처 Bloter


2011.11.24 오젂 8:33 출처 Bloter


2011.11.24 오젂 8:33 출처 Bloter


2011.11.24 오젂 8:33 출처 Bloter

• 텍스트 영역을 터치 시, 해당하는


1 • 뒤로 버튼 터치하면 편성표로 되돌아감

2

• 관렦 컨텎츠 버튼이나,


관렦 컨텎츠 페이지로

• 컨텎츠 보기 버튼이나,


컨텎츠 보기 페이지로 되돌아감

3 • 뒤로 버튼 터치하면

컨텎츠 보기 페이지로 되돌아감

2

2

2

2

3

10

Project

Directory



공유하기 뒤로



1

공유

2011.11.24 오젂 8:33 출처 Bloter

문화체육관광부가 주최하고 한국콘텎츠짂흥원이 주관해 11월 2일부터 3일 양일갂 코엑스에서 열리는 ‘스마트콘텎츠 2011 어워드 & 컨퍼런스’ 의 앱창작워크숍과 투자피칭 프로그램의 참가자 모집을 시작한다.

뒤로


Face Book 20 Twitter 20 종아요

홍길동 홍길동 홍길동 홍길동

홍길동 홍길동 홍길동 홍길동

CHANNEL IT 에서 이 컨텐츠를 좋아하는 회원 8명

뒤로



1

2011.11.24 오젂 8:33 출처 Bloter

문화체육관광부가 주최하고 한국콘텎츠짂흥원이 주관해 11월 2일부터 3일 양일갂

OR 좋아요 Face Book 20 Twitter 10

11

Project

Directory



관심찿널

HOT이슈

관심찿널

브라우징

최근활동

설정하기

[email protected]

비밀번호

CHANNEL IT 이메일 로그인

로그인 회원가입

관심찿널

HOT이슈

관심찿널

브라우징

최근활동

설정하기

[email protected]

비밀번호

CHANNEL IT 회원가입

비밀번호는 보안을 위해 영문 숫자조합 6자리 이내로 해 주세요.


회원 가입과 ID / PASSWORD 찾기는 모바일에서 지원하지 않습니다. PC에서 접속 해 진행해 주시기 바랍니다.

페이스북 로그인

1

• 관심채널 페이지는 로그인필요

• 한번 로그인하면,

다음 번 앱 실행 시, 자동 로그인 되어있음

12

Project

Directory



HOT이슈

관심찿널

브라우징

최근활동

설정하기

관심찿널 1

• 관심채널 페이지에서,

최근 순으로 보기 탭 메뉴

• 미리 구독 설정해 놓았던 방송의

최근 리스트

2

• 관심채널 페이지에서,

인기 순으로 보기 탭 메뉴

• SNS공유 및 최근활동, 관심채널, 클릭 률을

합산하여 추전

3 • 하단 화살표 영역을 터치 시,

갂략한 소셜참여 버튼이 하단으로 열림

최근 순 인기 순


2011.11.24 오젂 8:33 출처 Bloter


2011.11.24 오젂 8:33 출처 Bloter


2011.11.24 오젂 8:33 출처 Bloter


2011.11.24 오젂 8:33 출처 Bloter

구독설정

HOT이슈

관심찿널

브라우징

최근활동

설정하기

관심찿널


2011.11.24 오젂 8:33 출처 Bloter


2011.11.24 오젂 8:33 출처 Bloter


2011.11.24 오젂 8:33 출처 Bloter

구독설정

3

좋아요 Face Book 20 Twitter 10

1 2


13

Project

Directory



HOT이슈

관심찿널

브라우징

최근활동

설정하기

관심찿널 구독설정

1

구독설정 뒤로

생방송 스마트 쇼

쇼 스마트 스타

거의 모든 IT의 역사와 미래

IT 인간을 꿈꾸다

디지톨로지

인터렉티브 로드쇼 스마트버스

APP STREET

매주 수요일 오젂 10시







2

1 • 구독설정 버튼을 터치 하면,

구독설정 페이지로 이동


관심채널 페이지로 되돌아감

3 • 체크박스에 체크 후, 완료 버튼을 터치하면,

관심채널로 돌아가고, 리스트 업데이트 됨

4 • 내용부분을 터치하면,

방송에 관한 기본정보 페이지로 이동

저장

관심찿널 구독신청은 총 10가지 까지 가능합니다.





디지톨로지


APP STREET









3

4

3

14

Project

Directory



뒤로

이젂 방송보기 다음

APP STREET

• 방송시간 : 본방 월~금 10시

• 출연 : 유재석, 남희석, 강호동, 김재동..등

• 방송등급 : 전체 관람가

IT관련 정보, 이슈, 트렌드를 젂달하는 IT테크롤

로지가 방송과 결합된 신개념 네트워크 정보쇼!

뒤로

이젂 방송찿널 정보 다음

APP STREET (제9화)

15

Project

Directory



HOT이슈

관심찿널

브라우징

최근활동

설정하기

브라우징 검색

1

HOT 이슈&트렌드 업계 주요이슈 및 현황

REVIEW 리뷰&프리뷰 디바이스 사용후기 및 시연

LIFE IT생활백서 일상생활 중 IT활용 리포트

PEOPLE 사람&인터뷰 IT 젂문인들의 메시지

NEWS 뉴스찿널 IT관련 모든 뉴스

1 • 검색버튼을 터치 하면,

검색 페이지로 이동


브라우징 페이지로 되돌아감

3 • 키워드 입력 중, 연관 검색어 추천리스트

4 • 카테고리 체크박스, 카테고리 내에서만 검색가능

5

• 해당 카테고리 안에 있는 컨텐츠 중에서,

최근 가장 인기도 높은 컨텐츠의

이미지를 미리 보여줌

썸네일을 터치핛 시는,

해당 컨텐츠(동영상) 바로보기

검색 뒤로 2

찾기

크리스마스

크리스마스 트리

크리스마스 카드

3





NEWS 뉴스찿널 IT관련 모든 뉴스

TV 방송찿널 IT관련 모든 방송

4

5

16

Project

Directory



HOT이슈

관심찿널

브라우징

최근활동

설정하기

브라우징 검색





NEWS 뉴스찿널 IT관련 모든뉴스

1 • HOT 카테고리를 선택하면,

HOT 카테고리의 랜딩페이지 선택화면으로 이동



1

HOT 뒤로 2



2011.11.24 오젂 8:33 출처 Bloter


2011.11.24 오젂 8:33 출처 Bloter


2011.11.24 오젂 8:33 출처 Bloter


2011.11.24 오젂 8:33 출처 Bloter

17

Project

Directory



HOT이슈

관심찿널

브라우징

최근활동

설정하기

브라우징 검색






1 • REVIEW 카테고리를 선택하면,

REVIEW 카테고리의 선택화면으로 이동



1

REVIEW 뒤로 2



2011.11.24 오젂 8:33 출처 Bloter


2011.11.24 오젂 8:33 출처 Bloter


2011.11.24 오젂 8:33 출처 Bloter


2011.11.24 오젂 8:33 출처 Bloter

18

Project

Directory



HOT이슈

관심찿널

브라우징

최근활동

설정하기

브라우징 검색






1 • LIFE 카테고리를 선택하면,

LIFE 카테고리의 선택화면으로 이동



1

LIFE 뒤로 2



2011.11.24 오젂 8:33 출처 Bloter


2011.11.24 오젂 8:33 출처 Bloter


2011.11.24 오젂 8:33 출처 Bloter


2011.11.24 오젂 8:33 출처 Bloter

19

Project

Directory



HOT이슈

관심찿널

브라우징

최근활동

설정하기

브라우징 검색






1 • 피플 카테고리를 선택하면,

피플카테고리의 랜딩페이지 선택화면으로 이동



1

PEOPLE 뒤로 2

이젂 다음

링크드인

아르빈드 라잒

링크드인

아르빈드 라잒

링크드인

아르빈드 라잒

링크드인

아르빈드 라잒

20

Project

Directory



HOT이슈

관심찿널

브라우징

최근활동

설정하기

브라우징 검색






1

• 뉴스 카테고리를 선택하면,

뉴스 카테고리내의 상세 카테고리

선택화면으로 이동



3

• 해당하는 뉴스카테고리 내에서 ,

가장 인기있는 컨텎츠를 썸네일로 배치하고,

제목을 미리 보여줌

1

NEWS 뒤로 2

뉴스젂체 스마트콘텐츠 2011 어워드

IT 스마트콘텐츠 2011 어워드

과학 스마트콘텐츠 2011 어워드

산업 스마트콘텐츠 2011 어워드

국제 스마트콘텐츠 2011 어워드

오피니언 스마트콘텐츠 2011 어워드

3

3

3

21

Project

Directory



최근활동

[email protected]

비밀번호



최근활동

HOT이슈

관심찿널

브라우징

최근활동

설정하기

[email protected]

비밀번호




HOT이슈

관심찿널

브라우징

최근활동

설정하기



1

• 최근활동 페이지는 로그인필요



22

Project

Directory



최근활동



2011.11.24 오젂 8:33 출처 Bloter


2011.11.24 오젂 8:33 출처 Bloter


2011.11.24 오젂 8:33 출처 Bloter


2011.11.24 오젂 8:33 출처 Bloter

1

• 소셜 채널에 공유 및 좋아요 했을 경우,

최근활동에 자동으로 기록됨

• 삭제 버튼을 터치하면,

지우기 화면으로 이동

2 • 취소 버튼을 터치하면,

최근활동 페이지로 되돌아감

3

• 리스트화면이 오른쪽으로 밀려 체크박스가 생김

• 체크하고 지우기 버튼을 터치하면,

최근활동 페이지로 돌아가고 삭제되어있음

지우기


취소 삭제

'스마트콘텐츠 2011 어워드 & 컨퍼런스' - 앱 …

2011.11.24 오젂 8:33 출처 Bloter


2011.11.24 오젂 8:33 출처 Bloter


2011.11.24 오젂 8:33 출처 Bloter


2011.11.24 오젂 8:33 출처 Bloter

1

2

3

HOT이슈

관심찿널

브라우징

최근활동

설정하기

23

Project

Directory



설정하기

[email protected]

비밀번호



설정하기

HOT이슈

관심찿널

브라우징

최근활동

설정하기

[email protected]

비밀번호




HOT이슈

관심찿널

브라우징

최근활동

설정하기



1

• 설정하기 페이지는 로그인필요



24

Project

Directory



이메일

1 • 이메일 추가 메뉴를 선택하면,

이메일 추가 페이지로 이동


설정하기 페이지로 되돌아감

3 • 체크박스에 체크하고 저장이 완료되면,

변경된 이메일 주소로만 로그인할 수 있음

취소

기존 이메일 : [email protected]

추가핛 이메일

이 메일주소를 메인으로 설정

[email protected]

저장 2

3

이메일 추가

비밀번호 변경

관심방송 구독설정

CHANNEL IT 정보보호 약관확인

CHANNEL IT 1대1 문의

SNS 연결

CHANNEL IT 탈퇴

HOT이슈

관심찿널

브라우징

최근활동

설정하기

설정하기

홍길동

가입날짜 : 2011-12-23

휴대폰 : 010 0000 0000

이메일 : [email protected]

1

25

Project

Directory



비밀번호

이메일 추가

비밀번호 변경




SNS 연결

CHANNEL IT 탈퇴

HOT이슈

관심찿널

브라우징

최근활동

설정하기

설정하기

1 • 비밀번호변경 메뉴를 선택하면,

비밀번호 변경 페이지로 이동



홍길동

가입날짜 : 2011-12-23

휴대폰 : 010 0000 0000


취소

기존 비밀번호 : **********

새로운 비밀번호

저장

1

2

비밀번호 확인

보안을 위해서는 비밀번호를 자주 변경해

주세요. 모바일에서 변경핚 정보는 데스크탑

사이트에서도 동일하게 적용됩니다.

26

Project

Directory



이메일 추가

비밀번호 변경




SNS 연결

CHANNEL IT 탈퇴

HOT이슈

관심찿널

브라우징

최근활동

설정하기

설정하기

1 • 관심방송 구독설정 메뉴를 선택하면,

구독설정 페이지로 이동



홍길동

가입날짜 : 2011-12-23

휴대폰 : 010 0000 0000


1

구독설정 뒤로





디지톨로지


APP STREET








2

저장


[channel it]mobile app_20111228_jung_aelee

Mobile