18
초초초초 초초 초초초 초초초 초초초 초초초초 초초초 초초초 초초 < 초초초초초 > 1. 초초초 ( 초초 초초초 or 초초초 초초초 or 초초초 초초초 ?), 초초초 초초초초초 ( 초초초초초 ) 초 초초 . 2. HAMMOCK 초초 ( 초초초 초 초초초초초초 , 초초초 초초 초초초초초초 , 초초 초초초 초초초 ) 초 초초초 초초 초초초초 초 초 초초 초초초초 초초 . 3. 초초초 초초초 초초 초초 초초초초 초초초 초 초 초초 초초초초 초초 . 4. 초초초 초초초 초초초초 초 초 초초 초초초초 초초 . 5. 초초초 초초초초 초초 . 6. 초초초초초초 초초 초초초 초초초 초초 초초초 초초초 초초초초 초초 초초 초초 초초초 초초초초 . 초초초초 초초초 초초초 초 초초초 초초초초 초초초초 초초초 초초 . 7. 초초초 초초 초초초초 초초 . 1 2 3 4 5 초초초초 초초초 초초초초 초초초 초초초 초초초 초초 . 초초 초초초초 초초초 초초초 초초초초 초초초 초초초초 . 초초초 초초 초초초 초초초 초초초 초초 초초 . 6 오오오 오오 7 초 초 초초초초초 , 초초초 초초초 초초초 초초초초 ?

멋쟁이 사자처럼 2기 '해먹' 웹서비스 기획

Embed Size (px)

Citation preview

초심자를 위한 가이드 오늘의 이야기 언젠가의

이야기 로그인 똑똑 < 메인페이지 >

1. 홈버튼 ( 해먹 아이콘 or 야자수 아이콘 or 홈버튼 아이콘 ?), 누르면 메인페이지 ( 현재페이지 ) 로 이동 .

2. HAMMOCK 소개 ( 해먹이 왜 만들어졌는지 , 무엇을 위해 만들어졌는지 , 누가 만들고 있는지 ) 와 서비스 이용 가이드를 볼 수 있는 공간으로 이동 .

3. 오늘의 질문에 대한 다른 사용자의 답변을 볼 수 있는 공간으로 이동 .

4. 이전에 올라온 질문들을 볼 수 있는 공간으로 이동 .

5. 로그인 페이지로 이동 .

6. 메인페이지에 바로 질문을 띄우지 않고 유저의 마음을 풀어주는 짧은 글과 함께 사진을 게시한다 . 사용자가 질문에 답하기 전 간단히 긴장감을 풀어주는 역할을 한다 .

7. 오늘의 질문 페이지로 이동 .

1 2 3 4 5

아침부터 까지가 울어대면 반가운 손님이 온다고 하죠 .오늘 아침에도 까치가 신나게 울어대는 소리를 들었어요 .

아마도 오늘 당신을 만나기 위해서 였나 봐요 .

6

오늘의 질문7

한 숨 돌리셨으면 , 오늘의 질문을 만나러 가볼까요 ?

< 오늘의 질문페이지 >

1. 웹사이트 전체 배경색 ( 다른 페이지에서도 기본적으로 배경색으로 적용 ).

2. 흰색 부분 , 사진 또는 패턴을 넣어 하루하루 바뀔 디자인 공간 ( 사진이나 패턴에 투명도를 줘서 배경색과 자연스럽게 어울리게끔 하는 것이 좋을 듯함 ).

3. 질문이 게시된 날짜가 표시되고 입력된 사용자의 이름이 표시되어 사용자로하여금 말을 거는 것 같은 느낌을 준다 .

4. 질문 카테고리를 알려주는 아이콘 ( 나의 상태에 대한 질문이므로 사람 아이콘으로 표시함 , 사랑에 관련한 질문이라면 하트 아이콘 등으로 표시 됨 .)

5. 아래로 화면이 빠지며 답변할 수 있는 form 이 나타남 .

6. 답변 작성 페이지로 이동 .

7. 로그인 되었다고 가정할 때 표시되는 항목 . 나의 무인도 = 마이 페이지 , 이만가볼게요 = 로그아웃 .

8. Noun project CCL 표시

초심자를 위한 가이드 오늘의 이야기 언젠가의

이야기 이만가볼게요나의 무인도7

Icon :

1

2

8

당신은 지금

무엇을 향해 나아가고 싶은 상태인가요 ? ( 또는 무엇에서 벗어나고 싶은 상태인가요 ?)

2015 년 09 월 05 일 , ‘ 보민’님께 도착한 질문입니다 .

3

< 오늘의 질문페이지 _ 답변 form>

1. 한 줄 답변의 변형판 . Place holder를 이용하여 유저로 하여금 질문에 대해 생각해보도록 유도하며 , 첫 생각은 무조건 공개된다 .

2. 상세 답변의 변형판 . 마찬가지로 place holder 를 이용하여 유저로 하여금 질문에 대해 깊은 생각을 유도하고 , 공개여부는 선택하도록한다 .

초심자를 위한 가이드 오늘의 이야기 언젠가의

이야기 이만가볼게요나의 무인도

깊은 생각

왜 그런 생각이 들었을까요 ?

이 생각을 해먹인들과 공유할까요 ?

첫 생각

질문을 보고 어떤 생각이 가장 먼저 떠올랐나요 ?

1

2

< 오늘의 질문페이지 _ 답변 form>

1. 깊은 생각 공개여부를 묻는다 . 공개를 원하는 유저는 우측의 체크박스를 클릭하여 체크한다 (체크 안 하면 기본 설정인 비공개로 저장 .).

2. 답변 저장 버튼을 누르면1. 나의 무인도에 답변이

저장되고2. 공개 선택 유무에 따라 오늘의

‘첫 생각’과 ‘깊은 생각’이 ‘누군가의 이야기’ 페이지에 업로드 된다 .

깊은 생각

왜 그런 생각이 들었을까요 ?

이 생각을 해먹인들과 공유할까요 ?

첫 생각

질문을 보고 어떤 생각이 가장 먼저 떠올랐나요 ?초심자를 위한 가이드 오늘의 이야기 언젠가의

이야기 이만가볼게요나의 무인도

1

답변 저장2

<‘ 초심자를 위한 가이드’ 페이지 >

1. 초심자를 위한 가이드 페이지에 들어왔음을 표시

2. 해먹의 스토리

이만가볼게요나의 해먹초심자를 위한

가이드

1

삶의 바다 , 외딴 섬 해먹 이야기

일 분 일 초 단위로 변해가는 세상 .우리들은 모두 삶이라는 바다에 빠져있었습니다 .

삶은 정말 만만치 않았습니다 . 매 순간 파도와 풍랑이 몰아쳤습니다 .스스로도 모르는 사이에 삶 속에 던져진 우리는 , 시시각각 변하는 삶이라는 녀석의 한 가운데에서 살아남기에도

바빴습니다 .점점 여유를 잃어버리고 있었습니다 .

2

<‘ 초심자를 위한 가이드’ 페이지 >

1. 위 아래 스크롤로 스토리 이동이만가볼게요나의 해먹

초심자를 위한 가이드

그러던 어느 날 , 삶에 떠밀려 다니다 지친 다섯 사람이 이제는 여유가 필요하다고 생각했습니다 .다섯 사람은 힘을 합쳐 여유가 필요한 사람들을 위한 한적한 무인도를 만들었습니다 .

무인도 야자나무 숲 그늘 아래 무지개색 해먹들을 묶어놓고 ,여유를 가지고 싶은 친구들을 초대하기 시작했습니다 .

1

<‘ 초심자를 위한 가이드’ 페이지 >이만가볼게요나의 해먹

초심자를 위한 가이드

무인도에 초대된 친구들은 해먹 위에 누웠습니다 . 삶에서 잠시 벗어나 가만히 생각을 하기 시작했습니다 .

‘ 나의 삶’과 ‘내 주변의 삶’과 ‘세상 모든 것들’에 대하여 생각해보기 시작했습니다 .

<‘ 초심자를 위한 가이드’ 페이지 >

1. 해먹 회원가입 페이지로 이동 .

2. 로그인 안되어있을 경우 로그인 페이지로 이동 , 로그인 되어있을 경우 친구초대 이메일 보내는 기능으로 이동 .

3. 오늘의 질문 페이지로 이동 .

이만가볼게요나의 해먹초심자를 위한

가이드

그리고 어떻게 되었을까요 ?

그 뒷 이야기는 여러분이 들려주세요 .

친구 초대하기해먹 가입하기 오늘의 질문1 2 3

<‘ 오늘의 이야기‘ 페이지 >

1. 오늘의 이야기 페이지로 들어왔음을 표시함 .

2. 오늘의 질문을 카톡방 공지사항처럼 표현 .

3. 답변을 등록한 다른 유저의 프로필 아이콘 .

1. 아이콘을 클릭하면 해당 유저의 그 동안의 활동을 볼 수 있는 개인 페이지로 넘어간다 . .( 아직 디테일 페이지 기획 안됨 )

4. 프로필 아이콘에 해당하는 유저의 답변 표시 .

1. 첫 생각과 깊은 생각 사이에는 간격을 두고 표현 .

2. 깊은 생각 내용이 많을 경우 최대 2 줄까지만 표현한다 .

3. 자세한 답변은 말풍선을 클릭하면 들어가 볼 수 있다 .( 아직 디테일 페이지 기획 안됨 )

오늘의 이야기 (09.05) 이만가볼게요나의 해먹

첫 생각 예시 01깊은 생각 예시 01. 예시 만드는 것도 문제야 젠장 . 짜낼 머리가 더 이상 없엌ㅋㅋㅋ 이럴순 없는거야 ㅠ 학교 가기 싫다 . 휴학할까 휴학하고 신나게 놀아볼까…

당신은 지금 무엇을 향해 나아가고 싶은

상태인가요 ?( 또는 무엇에서 벗어나고 싶은 상태인가요 ?)

2

34

1

<‘ 오늘의 이야기‘ 페이지 >

1. 오늘의 질문에 로그인한 유저가 답변을 달았다면 , 자신의 쪽 (오른쪽 하단 ) 으로 말풍선이 보여진다 .

2. 만약 ‘깊은 생각’이 작성되지 않았거나 비공개로 선택되었을 경우 첫 생각은 말풍선 중앙으로 정렬된다 .

첫 생각 예시 01깊은 생각 예시 01. 예시 만드는 것도 문제야 젠장 . 짜낼 머리가 더 이상 없엌ㅋㅋㅋ 이럴순 없는거야 ㅠ 학교 가기 싫다 . 휴학할까 휴학하고 신나게 놀아볼까…

이만가볼게요나의 해먹

첫 생각 예시 01깊은 생각 예시 01. 예시 만드는 것도 문제야 젠장 . 짜낼 머리가 더 이상 없엌ㅋㅋㅋ 이럴순 없는거야 ㅠ 학교 가기 싫다 . 휴학할까 휴학하고 신나게 놀아볼까…

첫 생각 예시 01

1

2

오늘의 이야기

<‘ 언젠가의 이야기‘ 페이지 >

1. 언젠가의 이야기 페이지로 들어왔음을 표시함 .

2. 월간 달력이 질문 목록의 역할을 대신한다 .

3. 어떤 질문이 올라왔는지 궁금한 날짜를 클릭한다 .

4. 클릭한 날짜에 해당하는 질문이 표시된다 ( 페이지 이동 없음 , 다른 날짜를 다시 클릭하면 또 그 날에 해당하는 질문으로 내용이 바뀌어 표시된다 .).

5. 해당 질문에 답변한 사람의 수를 표시하고 이 버튼을 클릭할 시 해당 질문에 달린 답변들을 디테일하게 볼 수 있는 페이지로 이동한다 .

이만가볼게요나의 해먹

당신은 지금 무엇을 향해 나아가고 싶은

상태인가요 ?( 또는 무엇에서 벗어나고 싶은 상태인가요 ?)

답변 (17)

2

3

4

5

언젠가의 이야기

1

<‘ 언젠가의 이야기‘ 페이지 >

1. 이전 페이지에서 날짜를 선택하고 답변보기를 선택하면 , 이전 페이지에서 선택한 날짜가 괄호 안에 표시된다 .

페이지 구조는 ‘오늘의 이야기’와 동일 .

이만가볼게요나의 해먹

당신은 지금 무엇을 향해 나아가고 싶은

상태인가요 ?( 또는 무엇에서 벗어나고 싶은 상태인가요 ?)

첫 생각 예시 01깊은 생각 예시 01. 예시 만드는 것도 문제야 젠장 . 짜낼 머리가 더 이상 없엌ㅋㅋㅋ 이럴순 없는거야 ㅠ 학교 가기 싫다 . 휴학할까 휴학하고 신나게 놀아볼까…

언젠가의 이야기(12.31)

1

<‘ 언젠가의 이야기‘ 페이지 >

페이지 구조는 ‘오늘의 이야기’와 동일 .

첫 생각 예시 01깊은 생각 예시 01. 예시 만드는 것도 문제야 젠장 . 짜낼 머리가 더 이상 없엌ㅋㅋㅋ 이럴순 없는거야 ㅠ 학교 가기 싫다 . 휴학할까 휴학하고 신나게 놀아볼까…

이만가볼게요나의 해먹언젠가의 이야기(12.31)

첫 생각 예시 01깊은 생각 예시 01. 예시 만드는 것도 문제야 젠장 . 짜낼 머리가 더 이상 없엌ㅋㅋㅋ 이럴순 없는거야 ㅠ 학교 가기 싫다 . 휴학할까 휴학하고 신나게 놀아볼까…

첫 생각 예시 01

<‘ 나의 무인도’ 페이지 >

1. 나의 무인도 페이지로 들어왔음을 표시함 .

2. 나의 해먹 메인 .

3. 로그인된 유저 아이콘 표시 .

4. 오늘 하루에 대해 생각해볼 만한 질문을 던짐 .

5. 클릭하면 사라지는 Placeholder 로 ‘오늘은’을 넣어 오늘에 대해 생각하기에 수월하도록 함 .

1. 입력 버튼을 누르면 질문이 사라지며 오늘에 대해 유저가 입력한 한마디 , 한 단어가 표시됨( 하루동안 유지 ).

이만가볼게요나의 해먹1

생각 돌아 보기

자문자답

오늘을 표현하는 한 단어 ( 또는 한 문장 ) 는 무엇인가요 ?

오늘은 입력

23

4

5

<‘ 나의 무인도’ 페이지 >

1. 입력된 글 길이에 따라 아이콘의 위치도 함꼐 조정됨 .

2. 유저이름을 넣어 자신의 페이지임을 각인시킨다 .

3. 이전 페이지에서 받아온 입력값을 “ ” 안에 표시하여 스스로 페이지를 구성했다는 느낌을 주도록 한다 .

* 이 페이지의 내용물은 그 유저에게 하루동안 보여지고 , 24 시 넘어서 하루가 지나면 새로운 입력값을 받도록 한다 .

이만가볼게요나의 해먹 생각 돌아 보기

자문자답

이보민님의

오늘은 “입력값”입니다 .

1

2

3

<‘ 나의 무인도’ 페이지 >

1. 생각 돌아 보기 페이지로 들어왔음을 표시하는 밑줄 .

2. 질문받은 날짜 .

3. 질문 카테코리 아이콘 .

1. 카테고리 아이콘을 클릭하면 동일한 카테고리의 내 답변이 보여진다 .(보이지는 형식은 지금 이 페이지의 구성과 같음 .)

4. 그 날의 질문 .

5. ‘ 첫 생각‘ 답변이 먼저 한줄로 표시되고 ,

6. ‘ 깊은 생각‘ 답변이 첫 생각 답변과 간격을 두고 표시된다 .

1. 내용이 너무 길 경우 전문이 표시되지 않으며 max 두줄까지 표현된다 .

2. 나머지 내용을 확인하기 위해서는 해당 답변을 클릭하여 디테일 페이지로 이동해야 한다 .

7. 이와 같은 형식으로 유저가 대답한 지난 질문과 답변들이 아래로 주르륵 보여진다 .

이만가볼게요

첫 생각 예시 01.깊은 생각 예시 01. 예시 만드는 것도 문제야 젠장 . 짜낼 머리가 더 이상 없엌ㅋㅋㅋ 이럴순 없는거야 ㅠ 학교 가기 싫다 . 휴학할까 휴학하고 신나게 놀아볼까…

당신은 지금 무엇을 향해 나아가고 싶은 상태인가요 ?( 또는 무엇에서 벗어나고 싶은 상태인가요 ?)

토09.05

첫 생각 예시 02.깊은 생각 예시 02. 예시 만드는 것도 문제야 젠장 . 짜낼 머리가 더 이상 없엌ㅋㅋㅋ 이럴순 없는거야 ㅠ 학교 가기 싫다 . 휴학할까 휴학하고 신나게 놀아볼까…

다른 질문 다른 질문금

09.04

2 3 4

5

6

7

나의 해먹1

생각 돌아 보기

자문자답

첫 생각 예시 01.깊은 생각 예시 01. 예시 만드는 것도 문제야 젠장 . 짜낼 머리가 더 이상 없엌ㅋㅋㅋ 이럴순 없는거야 ㅠ 학교 가기 싫다 . 휴학할까 휴학하고 신나게 놀아볼까…

당신은 지금 무엇을 향해 나아가고 싶은 상태인가요 ?( 또는 무엇에서 벗어나고 싶은 상태인가요 ?)

토09.05

첫 생각 예시 02.깊은 생각 예시 02. 예시 만드는 것도 문제야 젠장 . 짜낼 머리가 더 이상 없엌ㅋㅋㅋ 이럴순 없는거야 ㅠ 학교 가기 싫다 . 휴학할까 휴학하고 신나게 놀아볼까…

다른 질문 다른 질문금

09.04

<‘ 나의 무인도’ 페이지 >

1. 이 때 손쉽게 몇 일전 , 몇 주전에 답변한 것을 보기 위한 방법으로 스크롤바를 내리면 해당 부분에 어떤 날짜의 게시글이 있는지 표시되도록한다 .

EX) 아래 한글문서에서 스크롤을 통해 몇 페이지쯤으로 이동하는지 알려주는 것 .

EX2) 핸드폰 갤러리에서 스크롤을 통해 언제쯤의 사진을 볼 수 있는지 정보를 아는 것 .

+ 기술적으로 개발 불가능할 시에는 일반 게시글 넘어가는 것처럼 한 페이지에 정해진 개수의 답변을 표현하고 페이지를 넘겨서 이전의 게시글을 보는 방법으로 대체한다 . But 이렇게 되면 지난 답변을 보는데 번거로울 것 같으니 1번이 꼭 구현이 되기를 .

이만가볼게요

18 월 5 일

나의 해먹 생각 돌아 보기

자문자답

2015.09.04

< 전체적인 기획사항 >

1. 스크롤을 사용하는 페이지들에서는 스크롤 이동이 있을 때만 스크롤 표시가 되는 javascript 를 이용한다 .

2. 디자인적으로 색감이나 형태는 바꿀 수 있으나 , 분위기는 침착한 분위기 , 안정된 분위기를 낼 수 있도록 한다 .

<더해야 할 것 >

3. 로그인 페이지 , 회원가입페이지 추가 .

4. 마이 해먹의 추가 기능 , 커스터마이징 구체화 ( 자문자답 , 질문 카테고리 별로 분석하는 기능과 페이지 등등 )

5. 마이해먹 생각 돌아보기 페이지에서 답변을 클릭해서 들어갔을때 보이는 디테일 페이지 추가 .

+ 오늘의 이야기 , 언젠가의 이야기에서 다른 유저의 답변 말풍선을 클릭해서 들어갈 시 보이는 디테일 페이지 추가 .