6 of 29

➊

[공통] 헤더 좌측 상단에는 로고가 위치한다. 로고를 클릭하면 메인페이지로 이동한다.

➋

로그인 버튼을 누르면 로그인 모달이 뜬다. 버튼을 호버하는 경우 투명도가 1이 되며 디폴트 투명도는 0.5다.

➌

버튼을 클릭하면 에디터 페이지로 이동한다. 버튼을 호버하는 경우 배경색의 투명도가 1이되며, 디폴트 투명도는 0.5다.

➍

리액트 로고에 애니메이션 효과를 주어

샤방샤방한 느낌을 준다.

cocode

| 메인페이지

- 미로그인 상태

②

①

③

④

7 of 29

➊

모달 팝업창을 제외한 배경의 색이 어두워진다.

➋

로그인 방법은 OAuth2만 사용한다. github 로그인을 통해 로그인이 가능하다.

➌

버튼 클릭 시 새 탭으로 github oAuth 로그인 페이지로 이동한다. 로그인이 완료된 후에는 로그인 페이지가 닫힌다. 로그인이 된 상태의 메인 페이지로 리로딩된다. 각 버튼을 호버하는 경우 배경색의 투명도가 1이되며, 디폴트 투명도는 0.5다.

➍

버튼을 클릭하면 해당 모달창이 닫힌다. 버튼을 호버하는 경우 배경색의 투명도가 1이되며, 디폴트 투명도는 0.5다

cocode

| 메인페이지

- 미로그인 상태

①

③

②

➃

8 of 29

➊

로그인이 완료되면, 헤더 컴포넌트 우측의 sign in 버튼이 사라지고 사용자 프로필 이미지와 사용자의 아이디가 노출된다.

➋

사용자의 프로필 이미지를 클릭하면 드롭다운이 펼쳐진다.

➌

버튼을 클릭하면 대시보드 페이지로 이동한다.

➍

버튼을 클릭하면 로그아웃 되며, 다시 미로그인 메인 페이지로 리로딩된다.

cocode

| 메인페이지

- 로그인 상태

①

②

③

④

9 of 29

➊

기본 메인 페이지의 하단에 스크롤1 페이지가 위치하여, 스크롤 시 나타난다.

➋

해당 영역에는 cocode 서비스의 기능을 소개할 예정이며, 구체적인 UI는 아직 논의중이다.

➌

스크롤의 y축 값이 일정 이상이 되면 나타나며, 해당 버튼을 클릭하면 스크롤이 최 상단으로 이동하여 기본 메인 페이지가 나타난다. 버튼을 호버하는 경우 배경색의 투명도가 1이되며, 디폴트 투명도는 0.5다.

cocode

| 메인페이지

- 스크롤1

①

③

②

10 of 29

➊

팀원들 각각의 사진이 원형 모양으로 노출된다.

➋

팀원들 각각의 이름이 노출된다.

➌

팀원들 각각의 깃허브 아이디가 노출된다. 아이디를 클릭하면 해당 팀원의 깃헙 페이지로 이동된다. 각각의 아이디를 호버하는 경우 밑줄이 생긴다.

cocode

| 메인페이지

- 스크롤2

①

②

③

11 of 29

cocode

| 대시보드 페이지

12 of 29

➊

버튼을 클릭하면 새 프로젝트가 생성되고, 생성된 프로젝트의 에디터 페이지로 화면이 전환된다. 버튼을 호버하는 경우 배경색의 투명도가 1이되며, 디폴트 투명도는 0.5다.

➋

사용자가 생성한 프로젝트가 카드 형태로 노출된다. 버튼을 호버하는 경우 배경색의 투명도가 1이되며, 디폴트 투명도는 0.5다.

➌

내용이 한 줄 이상 넘어가면 말줄임표로 표시한다.

cocode

①

②

| 대시보드 페이지

③

13 of 29

➊

해당 프로젝트의 이름이 노출된다.

➋

해당 프로젝트의 마지막 수정 시간으로 부터 경과한 시간이 시간, 날짜, 월, 년으로 노출된다.

➌

우측 하단의 아이콘을 클릭하면 드롭다운이 좌측으로 펼쳐진다. 한 번 더 아이콘을 클릭하면 해당 드롭다운이 닫힌다.

cocode

②

①

③

| 대시보드 페이지

14 of 29

➍

버튼을 클릭하면 해당 프로젝트의 에디터 페이지로 전환된다.

➎

버튼을 클릭하면 ➊이 input 태그로 변경되며 엔터키를 누르면 변경이 반영된다.

➏

버튼을 클릭하면 해당 프로젝트는 삭제되며 프로젝트 카드 역시 삭제된다.

cocode

| 대시보드 페이지

④

⑤

⑥

①

15 of 29

cocode

| 에디터 페이지

-프로젝트 정보

16 of 29

cocode

| 에디터 페이지

-탐색기

17 of 29

cocode

| 에디터 페이지

-디펜던시

18 of 29

cocode

| 에디터 페이지

-라이브 off

19 of 29

cocode

| 에디터 페이지

-라이브 on

20 of 29

➊

해당 프로젝트의 이름이 노출된다.

➋

에디터의 탭이 노출된다. 순서대로 프로젝트 정보, 탐색기, 디펜던시, 라이브 설정이 가능하다. 탭이 클릭되면 해당 탭이 흰색으로 칠해진다. 탭 버튼을 호버하는 경우 배경색의 투명도가 1이되며, 디폴트 투명도는 0.5다.

➌

활성화된 탭에 따라 설정하고자 하는 내용이 변경되는 영역이다.

➍

선택한 파일의 코드를 편집할 수 있는 에디터 영역이다.

➎

해당 프로젝트의 빌드 결과를 나타내는 브라우저다.

cocode

②

①

③

➄

| 에디터 페이지

-공통

④

21 of 29

➊

아이콘(해당 파일의 확장자에 따라 아이콘이 변경된다)과 해당 파일의 파일명이 노출된다. 선택된 파일명은 실제 에디터 영역의 배경색과 같은 배경색을 가진다.

➋

편집 중인 파일명은 다른 파일명과 배경색으로 구분된다.

➌

해당 파일이 저장되지 않은 상태로 코드가 편집되면 닫기 버튼에서 해당 모양으로 변경된다.

➍

버튼을 클릭하면 해당 파일이 닫힌다.

cocode

| 에디터 페이지

-에디터

①

③

②

➃

22 of 29

➎

해당 파일의 라인수를 나타낸다.

➏

편집을 할 수 있는 실질적인 에디터 영역이다.

➐

커서가 위치한 라인은 회색 테두리로 하이라이팅된다.

➑

구문 오류시, 해당 부분에 빨간 밑줄이 물결 무늬로 노출된다.

➒

사용자가 문자를 입력 시, 문자와 매칭되는 키워드가 드롭박스 형태로 노출된다.

cocode

| 에디터 페이지

-에디터

⑦

⑥

⑧

⑤

⑨

23 of 29

➊

버튼을 클릭하면, 해당 브라우저의 히스토리를 기준으로 뒤로가기가 실행된다.

➋

버튼을 클릭하면, 해당 브라우저의 히스토리를 기준으로 앞으로가기가 실행된다.

➌

버튼을 클릭하면, 해당 브라우저에 새로고침이 실행된다.

➍

url 입력창으로서, 편집이 가능하며, 엔터 키 입력 시 해당 url로 이동한다.

➎

실질적으로 빌드된 결과를 노출할 화면이다.

cocode

①

➄

| 에디터 페이지

-브라우저

➁

➂

➃

24 of 29

➊

해당 프로젝트의 이름이 노출된다.

➋

버튼을 클릭하면 해당 항목의 텍스트 영역이 input 영역으로 변경되며, 엔터키 입력시 변경사항이 반영된다.

➌

해당 프로젝트의 설명이 노출된다.

➍

해당 프로젝트의 저자, 즉 생성자가 노출된다.

➎

버튼을 클릭하면 해당 프로젝트는 삭제되며, 대시보드 페이지로 이동된다. 버튼을 호버하는 경우 배경색의 투명도가 1이되며, 디폴트 투명도는 0.5다.

cocode

②

①

③

④

⑤

| 에디터 페이지

-프로젝트 정보

25 of 29

➊

열려있지 않은 폴더 아이콘이다.

➋

열려있는 폴더 아이콘이다.

➌

부모에 속해있는 자식 파일/폴더들은 다음과 같이 들여쓰기로 표현된다. 아이콘(확장자에 따라 변경된다.)과 파일명으로 노출된다.

cocode

②

①

③

| 에디터 페이지

-탐색기

26 of 29

➊

[공통] 섹션의 ˇ 버튼을 누르면 아이템의 노출 여부가 변경된다.

➋

현재 추가된 디펜던시 목록이 노출된다. 호버하는 경우 배경색의 투명도가 1이되며, 디폴트 투명도는 0.5다.

➌

튼을 클릭하면 해당 모듈의 버전이 드롭다운 형태로 나타난다. 기존의 설치된 버전과 다른 버전을 선택시 변경이 반영된다.

➍

버튼을 클릭하면 해당 모듈이 삭제된다..

cocode

| 에디터 페이지

-디펜던시

②

①

③

④

27 of 29

➎

서치바에 문자를 입력 후, 엔터를 누르면 결과 리스트가 노출된다.

➏

현재 추가된 디펜던시 목록이 노출된다. 호버하는 경우 배경색의 투명도가 1이되며, 디폴트 투명도는 0.5다.

➐

버튼을 클릭하면 해당 모듈이 설치되고, 해당 버튼은 사라진다. 설치된 모듈은 ➋에 반영된다.

➑

아이콘을 클릭하면 해당 모듈의 github 레파지토리로 이동한다.

➒

아이콘을 클릭하면 해당 모듈의 npm 페이지로 이동한다.

cocode

| 에디터 페이지

-디펜던시

⑤

⑥

⑦

⑧

⑨

②

28 of 29

➊

버튼 클릭시 라이브 서버가 켜지며, 라이브가 활성화된다. 버튼을 호버하는 경우 배경색의 투명도가 1이되며, 디폴트 투명도는 0.5다.

cocode

①

| 에디터 페이지

-라이브 off

29 of 29

➊

해당 프로젝트의 고유한 url과는 또 다른 고유한 라이브 url 이 제공되며, 해당 url로 다른 사람의 접근이 허락된다.

➋

버튼 클릭시 라이브 서버는 종료되며, 라이브가 off 된 상태로 해당 영역이 변경된다. 버튼을 호버하는 경우 배경색의 투명도가 1이되며, 디폴트 투명도는 0.5다.

➌

해당 프로젝트의 생성자를 나타낸다.

➍

현재 라이브 서버에 들어와있는 사용자들을 나타낸다. 로그인을 한 사용자만 접속할 수 있다.

➎

프로필 사진과 아이디가 노출된다.

cocode

②

①

③

④

⑤

| 에디터 페이지

-라이브 on