Web-based IDE 같이 만드실 분 모집합니다.

byungsin의 이미지

Web-based Source Code Editor_mozzip

Web-based IDE 같이 만드실 분 모집합니다.

안녕하세요^^

그동안 action.io(지금은 nitrous.io), netbeans, eclipse 등을 쓰다가
그것들보다 더 개발자에게 편한 온라인에디터가 가능할 것 같아서 GukEditor를 준비하고 있습니다.

일단, 대략적인 spec. 은 다음과 같습니다:
------------------------------------------------------------------------------------
[Basic features]

- git integration : github, bitbucket 등과 연동, editor 내에 저장한 파일들에대해서도 version control (git) 제공.

- HTML/JS 의 경우: sample 로 웹에서 직접 돌려볼 수 있도록 (*이건 editor 와 다른 도메인을 쓰면 됩니다.) 할 것입니다.
(+보안쪽으로 신경을 더 쓸 수 있고 돈도 많아지면 아예 nitrous.io 처럼 console 까지 제공할 생각입니다. (*dedicated server정도일때.)

[UI spec.]

0. 대략적인 에디터 UI:
http://i.imgur.com/7ptUJQ0.jpg 시간이 없어서(자대 복귀ㅠ) 대충 그렸습니다.

1. View mode:
- Text-only View Mode, (일반 IDE)
그리고 EnhancedViewMode 이렇게 나눴습니다.
EnhancedViewMode에서는 옵션으로
(1). Render Markup (주석에 기본적인 HTML (img, 등...),custom Font Styling 등이 들어갈 수 있도록 해놨습니다.
(2). Toggle Comment-only Highlighter:
Render Markup 때문에 누가 일반 코드와 비슷하게 styling 을 주면 애먹을꺼 같아서 있는것입니다.
(3). Toggle Range-link Visibility:
아래 있는 Range Link 기능을 보여줄지/안보여줄지 기능입니다.
-Show #Tag1,#Tag2,.... : Tag별로 보여줄지 안보여줄지를 결정하는 것입니다.
(+ Tag 별로 Styling 도 정할수 있게 하려 합니다.)
-Interactive #Tag1,#Tag2,... : Tag 별로 Interaction 가능하게 할지를 결정하는 것입니다.
(e.g. #Tag1 이 선택되있으면 #Tag1
(4). Toggle Range-link Interactivity

(5). Code-Map (Code-Range-Link map) mode:
(그림참조) http://i.imgur.com/0CnpvGp.jpg
Range-Link 가 만드는 src code 간 "relation" 을 가지고 map 을 만들 수 있게 하는 기능입니다. (*한 프로젝트 당 Map 이 1개 (MotherMap)이지만,
거기서 derive 시킨건 (e.g. Styling 에 변화, ~는 보여주고 ~는 숨기기, 등...)여러개 있을 수 있습니다.)
(* 여기서 Edit 하고 싶으시면 더블클릭/더블탭, 드래그: 이동, MotherMap 내에서 ToDoList, 등 OverView 를 제공하기 좋은 mode 입니다.)
*사용자가 무슨 50인치 TV를 사용하고 그만한 해상도가 나오면
Map자체에서 editing 가능케 하는것도 고려중입니다.)

2. Range Link
예를 들어, gukIndex.html, Line 77, caret 0~ Line 77,caret 20 에
| gukJS.callmemaybe()

이렇게 되있다고 하면
아예 사용자가 (아니면 custom-script? 이건 나중에 고려하려 합니다.)
gukJS.js 파일에
...
function callmemaybe(){
...
}
Line 33, caret 1 ~ Line99, caret 1에 있으면 여기에 일종의 link 를 거는 것입니다.

3. Sticky-notes, 등... (widgets?)
- Src Code 내에 sticky notes, 등 widget 들을 추가할 수 있게 해주는 것입니다.

4. Caret-bookmark
- Caret (그 텍스트 치실때 껌뻑이는 | )위치를 bookmark 해서
(이름,등 메모도 같이 붙여서)
src code editing 할 때 안전하게 여러군데 돌아다닐 수 있게 해주는 것입니다.

[backend, frontend]
그리고 현재 backend, frontend 는 일단은 제 취향대로 다 정해졌지만(codemirror,nginx,jquery,tukeMX,...), 더 맞는 것이 있으면 옮길 생각입니다.

혹시 같이 하실 생각 있으시면 johnyi9020@gmail.com 메일 주시면 됩니다.

긴 글 읽어주셔서 감사합니다 : )