editor

 

게임을 개발할 계획은 없지만 테스트할 일이 있어서 유니티를 설치하게 되었는데 최신 버전 보다는 예전 버전을 설치하는 방법이 필요하여 기록으로 남겨 놓습니다.

알고나면 아무것도 아니지만 모르면 답답하기 때문에...

 

Unity Hub를 설치해야 원하는 버전을 선택하여 Unity Editor 설치가 가능합니다.

 

 

유니티 사이트 들어가면 제일 먼저 유니티 허브를 다운 받을 수 있도록 되어 있습니다.

https://unity.com/kr/download

 

 

2023년 10월 현재는 위와 같은 화면에서 [Windows용 다운로드] 버튼을 클릭하면 다운로드 받을 수 있습니다.

만약 Products 화면에 있다면 Unity Personal 이라는 항목을 다운로드하는 링크를 클릭하면 됩니다.

다운받은 UnityHubSetup.exe 파일을 실행하여 설치를 진행 합니다.

 

 

Unity Hub 사용 계약에 동의하고

 

 

설치 위치를 선택하고 [설치]를 진행합니다.

 

 

설치가 진행 되고

 

 

Unity Hub 설치가 완료되면 [마침]을 클릭하여 Hub를 실행합니다.

 

 

Unity Hub 사용을 위해서는 회원가입이 되어있어야 합니다.

[Create Account] 라고 적힌 글씨를 클릭하여 회원 가입을 합니다.

 

 

이메일은 확인 메일을 받기위해 꼭 사용 가능한 메일 주소를 입력합니다.

Full Name은 생략해도 됩니다.

[Create a Unity ID] 버튼을 클릭하면 메일이 오는데 15일 이내에 링크를 클릭하면 회원 가입이 완료됩니다.

 

 

받은 메일에서 [Link to confirm email]을 클릭 합니다.

그리고 웹에서 로그인을 하면 다시 유니티 허브 창으로 이동합니다.

 

 

[Got it]을 클릭해서 다음으로 넘어갑니다.

 

 

여기에서 [Install Unity editor]를 클릭하면 현재 보이는 버전이 설치가 됩니다.

만일 다른 버전을 선택하려면 우측 하단의 [Skip Installation]을 클릭하면 되는데 이건 하단에서 설명합니다.

일단 현재 보이는 버전을 설치해 봅니다.

 

 

[Agree and get personal edition license]를 클릭 합니다.

 

 

처음에는 위와 같이 환경 설정하는 창이 나오고 하단에서는 계속 설치가 진행됩니다.

설정 값들을 보기위해 [Try it now]를 클릭하면

 

 

몇가지 환경 설정들이 보입니다.  테마를 Light로 해보았습니다.

 

 

배경이 하얗게 변하고 설치가 진행되고 있습니다.

 

 

클릭을 해보면 상세 설치 내역을 볼 수 있습니다.

 

 

설치가 완료 되었습니다.

 

 

이제 버전을 선택해서 설치하는 방법을 알아보겠습니다.

Unity Hub를 처음 실행한 화면에서부터 진행 합니다.

 

 

여기서 [Install Unity Editor]를 클릭하지 않고 우측 하단의 [Skip Installation]을 클릭 합니다.

 

 

환결설정 창이 보이지만 하단에 설치가 진행되는 모습은 보이지 않습니다.

 

우측 상단에 있는 [install Editor] 버튼을 클릭합니다.

 

 

텍스트 탭에서 [Archive]를 클릭하고 설명에서 [download archive]를 클릭하면 사이트로 이동합니다.

 

https://unity.com/releases/editor/archive

 

 

여기에서 본인이 설치하려는 버전을 선택하고 [Unity Hub] 버튼을 클릭합니다.

여기서는 테스트용으로 Unity 2022.3.10 을 설치하기로 했습니다.

 

 

선택한 버전 정보를 Unity Hub로 보낸다고 하는데 [열기] 버튼을 클릭합니다.

 

 

어떤 프로젝트를 만드는지에 따라 필요한 기능들을 클릭하고 [Continue] 버튼을 클릭합니다.

 

 

라이선스 확인하고 [Install] 버튼을 클릭합니다.

 

설치가 진행됩니다.

만약 다른 버전이 필요하다면 [Install Editor] 버튼을 클릭하여 계속해서 추가해주면 됩니다.

 

- copy coding -

저작자표시 비영리 변경금지 (새창열림)

'Application' 카테고리의 다른 글

다빈치 리졸브(DaVinci Resolve) 18.6 다운로드 및 설치  (0) 2023.11.10
Unity 코딩 없이 ARCore 증강현실 Android 앱 만들기  (0) 2023.11.02
[Telnet] SSH 연결용 putty, mtputty Client 무설치 사용법  (0) 2023.05.27
[FTP] 무료 WinSCP 설치방법과 무설치 버전  (0) 2023.05.20
[FTP] 무료 FTP Client 프로그램 FileZilla 설치 하기  (0) 2023.05.17


 

간단하게 사용할 수 있는 web editor를 하나 추가할 일이 있어서 naver에서 만들었으니 믿을만 하겠지 하고 설치를 하기로 하였습니다.  그런데 그냥 설치 하는 방법은 매뉴얼만 보면서 하면 되는데 요즘에는 화면 그리는 툴들을 많이 사용하고 있어서 javascript function 안에서 구현을 해야 하는 상황이 발생하여 다음에 또 써야할 일이 발생하면 사용하려고 작성 합니다.  예전에 HTML Tag만 가지고 구현하느라 1주일 걸린적이 있는데 그 소스는 어디 갔는지 모르겠네요.

 

순서

1. Source 다운로드

2. 일반적인 설치 방법

3. javascript 내에서 설치 방법

 

 

1. Source 다운로드


기존에 사용하던 개발자 url에서는 다운로드가 되지 않고 github에서 다운로드를 해야 합니다.

https://github.com/naver/smarteditor2

그리고 smartEditor 3.x 버전은 공개를 하지 않는다고 하네요.  저는 2.x 버전 만으로도 충분.


naver_smarteditor2


Clone or download를 클릭해서 확장된 메뉴 중 Download ZIP을 선택하면 압축된 형태로 다운로드가 진행 됩니다.  다운로드가 완료 되면 파일이 있는 디렉토리로 이동하여 압축풀기를 해줍니다.  디렉토리 구조를 보면 dist와 workspace 두개가 있는데 이중에 dist를 이용하여 작업을 진행 합니다.


naver_smarteditor2



2. 일반적인 설치 방법

 

그냥 html, jsp, php등에 설치 하는 방법은 네이버 매뉴얼에 잘 설명이 되어 있습니다.

http://naver.github.io/smarteditor2/user_guide/

 

간단하게 요약해서 설명 하면


2.1 압축을 푼 파일을 적당한 곳에 복사


dist 아래에 있는 파일들을 웹 서버에 복사를 하는데 웹에서 path를 잡을 수 있는 곳이면 아무 곳이나 가능하지만 너무 깊이 숨겨 놓으면 안되겠죠.

 

2.2 js 추가


smartEditor의 기본이 되는 javascript 파일을 작업하려는 파일 상단에 추가 합니다.


 <script type="text/javascript" src="상위경로/js/service/HuskyEZCreator.js" charset="utf-8"></script>


2.3 Textarea 추가

 

웹 에디터를 사용할 textarea를 작업 파일에 추가 합니다.  id는 나중에 사용해야 하므로 적당한 명칭을 부여 합니다.


<textarea name="weditor" id="weditor" rows="10" cols="100"></textarea>


2.4 editor 생성 javascript

 

2.3에서 생성한 textarea에 웹 에디터를 추가하기 위한 javascript를 작성 합니다.  매뉴얼에서 복사해서 사용하면 됩니다.

elPlaceHolder에 위에서 작성한 id를 입력 합니다.

sSkinURI에는 복사한 path를 잘 맞추어 기입합니다.


<script type="text/javascript">

 

var oEditors = [];

nhn.husky.EZCreator.createInIFrame({

    oAppRef: oEditors,

    elPlaceHolder: "weditor",

    sSkinURI: "경로/SmartEditor2Skin.html",

    fCreator: "createSEditor2"

});

 

</script> 



2.5 결과



naver_smarteditor2


2.6 전체 소스


좀 허접하지만 2.5에 있는 모양을 만들기 위해 제가 만든 test.html 전체 소스입니다.


webeditor

  

<script type="text/javascript" src="./dist/js/service/HuskyEZCreator.js" charset="utf-8"></script>

 

<textarea name="weditor" id="weditor" rows="10" cols="90"></textarea>

 

<script type="text/javascript">

 

var oEditors = [];

nhn.husky.EZCreator.createInIFrame({

    oAppRef: oEditors,

    elPlaceHolder: "weditor",

    sSkinURI: "./dist/SmartEditor2Skin.html",

    fCreator: "createSEditor2"

});

 

</script> 


좀 허접이 아니고 진짜 허접하네요.  dist에 있는 파일을 바로 메인에 복사해서 사용했습니다.

 

 

3. javascript 내에서 설치 방법

 

일반적인 방법으로 설치를 해보았다면 이것도 별거 없습니다.  그냥 function 안에서 구현을 한것 이외에는 나머지 스크립트는 동일 합니다.

 

3.1 구현 방법


$.getScript() jQuery를 이용하여 javascript 내에서 javascript를 불러옵니다.  그리고 불러온 js를 이용한 코드를 내부에 기입하면 됩니다.

 

textarea와 button을 화면에 표시되고 HTML Tag를 적용시킬 수 있는 부분에 설정을 해줍니다.  툴에 따라 component, element, division등등이 될 수 있겠죠.  버튼도 이벤트를 직접 호출 할 수 없는 경우에는 가상으로 만들어서 사용하면 됩니다.

 

textarea를 먼저 정의하지 않으면 id를 찾을 수 없어 Cannot read property 'parentNode' of null / HuskyEZCreator.js 오류가 발생 할 수 있습니다.


naver_smarteditor2


 

3.2 전체 소스

 

화면 초기화가 완료되는 함수에 넣어서 구현한 내용입니다.


function onLoadedFunction()

{

           this.eleTxt.setHtml(‘<textarea name="ir1" id="ir1" rows="10" cols="100"></textarea>’);

this.eleBtn.setHtml(‘<button class=”saveBtn”>저장</button>’);

 

           $.getScript("./dist/js/service/HuskyEZCreator.js", function() {

                     var oEditors = [];

                     nhn.husky.EZCreator.createInIFrame({

                                oAppRef: oEditors,

                                elPlaceHolder: "ir1",

                                sSkinURI: "./dist/SmartEditor2Skin.html",

                                fCreator: "createSEditor2"

                     });

                      $(document).on('click', '.saveBtn', function () {

                    

                                var val2 = oEditors.getById["ir1"].exec("UPDATE_CONTENTS_FIELD", []);

                                this.contents = $('#ir1').val();

                                alert(this.contents);

                                this.onSubmitBtnClick();

                     });

           });

          

};


3.3 결과 화면

 

위의 코드를 실행하면 나오는 결과 화면 입니다.


naver_smarteditor2



4. size 조절

 

화면에 따라 에디터의 사이즈를 조절해야 하는 경우가 발생 합니다.  그런데 html을 아무리 찾아보고 비슷한걸 수정해도 사이즈는 변경이 안되는데 사이트 변경은 js 파일에서 관리 합니다.

 

/dist/js/service에 가면 SE2BasicCreator.js 파일이 있습니다.  위치는 버전에 따라 하나 윗단계인 js에 들어 있기도 합니다. SE2BasicCreator.js 파일을 열고 아래와 같은 내용을 찾아서 수정 합니다.


 

            var htDimension = {

                     nMinHeight:205,

                     nMinWidth:parseInt(elIRField.style.minWidth, 10)||570,

                     nHeight:elIRField.style.height||elIRField.offsetHeight,

                     nWidth:elIRField.style.width||elIRField.offsetWidth

           };

 

높이 : nMinHeight:205

가로 : nMinWidth:parseInt(elIRField.style.minWidth, 10)||570,

 

화면에 따라 사이즈가 여러개 필요하다고요?

그럼 SmartEditor2xxx.html 파일과 SE2BasicCreator.js 파일을 여러개 복사해서 이름을 변경하고 각 html 파일에서 다른 js 파일을 불러오면 됩니다.


저작자표시 비영리 (새창열림)

'Etc' 카테고리의 다른 글

[윈도우즈] sch.exe의 작동이 중지되었습니다. 카카오인코더(CacaoEncoder) 삭제  (0) 2019.02.20
[꿈해몽 모음] 바위, 돌, 돌덩어리 관련 꿈 해몽  (0) 2019.02.16
[윈도우즈] 노트북 마우스 패드 잠금 또는 해제 하는 방법  (0) 2019.02.12
[꿈해몽 모음] 장례식 조의금 상주와 관련된 꿈 해몽  (0) 2019.02.12
[Pixlr] Adobe Photoshop 없이 무료 투명 배경 이미지 만들기  (2) 2019.01.31

1

+ Recent posts

티스토리툴바