[기타] 'Markt'님이 문의하신 내용에 답변 드립니다.

인벤 스크립트에 관심을 가져주셔서 감사합니다.

문의하신 내용에 대해 답변 드립니다.


1. 버튼 위에 올렸을 때 나타나는 글자를 아래쪽으로 내리고 싶습니다.

---

마무리 일격 쪽은 data-inven-action 을 값을 바탕으로 재가공하다 보니, 스타일 편집이 제한적인 문제가 있습니다.
악성 코드 유입 등의 문제로 유저의 input을 최소화하는 과정에서 어쩔 수 없이 이렇게 변하게 되었는데요.

이로 인해 마무리 일격 기능에는 텍스트를 내리기 위한 position이나 display스타일 사용에 제약이 있습니다.
대안으로써는 data-inven-attr-for="send-note"의 스타일 속에 padding-top:65%; (상단 여백 65%)를 추가해서 맞춰주는 방법을 이용하시면 될 듯합니다.



2. 버튼 바깥쪽에 있을 때 버튼이 반응합니다.

---

수정의 편의를 위해 아래와 같은 형태로 외곽 박스 소스를 고정으로 잡아 놨습니다.

<마우스 오버시, 색상이 변하는 Box>
텍스트 또는 기능 (여기서는 마격기)
</Box>

말씀하신 문제는 여기서 동작의 대상을 _SLEF_로 걸어 놨는데, 이 _SLEF_라는 것은 자신 및 자신이 포함하고 있는 내용 전부를 의미하게 됩니다.
즉 마격기가 들어가게 되면, 마격기 자체의 네모 상자 또한 자신의 일부로 인식하게 됩니다.

마격기 상자는 위에 말씀드린 것과 같이 스타일 편집이 제한되어 있어서, 외곽(class="action-wrapper", class="inner-wrapper")의 사각 상자를 편집할 수 없습니다.
즉, 외곽 상자 위에 마우스가 올라가서 배경색은 변하지만, 폰트의 색상 변화는 버튼에 걸어놨기 때문에 폰트는 표시되지 않는 것입니다.

수정 방법은 간단합니다. 색상이 변하는 Box를 지워버리고, 버튼 속에 색상 변화를 넣어 주면 끝입니다.

수정한 예시 소스는 아래를 참고해 주세요.

<div style='background-color:skyblue; margin: 0px 15px; border-radius: 123px; border: 3px solid white; border-image: none; width: 92px; height: 92px; overflow: hidden; display: inline-block;'>
<div data-inven-action data-inven-nick-default="닉네임 입력" style="border:0px;padding:0;margin:0;">
<span data-inven-attr-for="input" style="display:none;"></span>
<span data-inven-attr-for="send-note" style="background-color:rgba(255,255,255,0); width: 92px; height: 92px; color: rgba(255, 255, 255, 0);border-radius:123px;padding:0;margin:0;transition:0.4s;border:0px;font-family: 'Jeju Gothic', sans-serif;font-size:15px; border-radius: 123px;" data-inven-text="쪽지"
data-inven-over-css="{'_SELF_':{'background-color':'green','color':'rgba(255,255,255,1)'}}" data-inven-out-css="{'_SELF_':{'background-color':'skyblue','color':'rgba(255,255,255,0)'}}"></span>
</div></div>



3. 버튼 위에 커서를 가져갔을 때 지정된 배경색 대신 다른 이미지가 나오게 하고 싶습니다.

---

말씀하신 내용 그대로 구현한다면, data-inven-over-css에 background:url 스타일을 바꾸는 것입니다만,
흔하게 구현하는 방법은 이미지의 투명도(opacity)를 많이 사용합니다.

아래는 말씀하신 것과 같이 동작하는 소스입니다. opacity는 1은 완전 불투명, 0은 완전 투명을 의미합니다.

<!-- 2x1 사각형 -->
<div style="width:295px; height:146px; float:left;display:block;background-color:red;border-radius:15px;margin:0px 3px 3px 0px;background:url(https://upload2.inven.co.kr/upload/2016/05/04/bbs/i13630778389.png);color:rgba(255,255,255,0);">
<div style="width:295px; height:146px;border-radius:15px;transition:0.4s;background:url(https://upload2.inven.co.kr/upload/2016/05/04/bbs/i10572663016.gif) right;opacity:0;"
data-inven-over-css="{'_SELF_':{'opacity':'1','color':'rgba(255,255,255,1)'}}" data-inven-out-css="{'_SELF_':{'opacity':'0','color':'rgba(255,255,255,0)'}}">
<div style="padding:1em;"></div>
</div></div>

두 이미지 모두 배경으로 넣었는데, 반드시 이렇게 넣어주실 필요는 없고 <img> 태그에 바로 opacity를 걸어주셔도 됩니다.
기본 이미지를 배경에 두고, 표시될 이미지는 <img> 태그로 삽입하는 것이죠.

다만, 이 경우 배경에 data-inven-over-css와 data-inven-out-css을 동시에 사용하면 되면, 말씀하신 "깜빡이 증상" 이 발생합니다.
(이미지가 배경을 가려서 out-css가 작동, 이미지가 사라지면 over-css가 작동)
배경에는 data-inven-over-css만, 이미지에는 data-inven-out-css만 적용해서 깜빡이는 증상을 고칠 수 있습니다.



4. 지정된 폰트 외에 다른 웹폰트를 사용할 수 있는지 궁금합니다.

---

급하게 소스를 올리다 보니, 정리되지 않는 소스가 일부 섞여 있네요.
브라우저에 설치되어 있다는 가정하에, 다른 웹 폰트를 사용하실 수 있습니다. 하지만 해당 폰트가 설치되어 있지 않은 다른 컴퓨터에서는 font-family 의 다른 폰트가 출력되게 됩니다.
(샘플 소스에서는 브라우저 기본 지원인 sans-serif 채로 출력되는 것을 볼 수 있습니다.)

일부 사이트에서는 브라우저에서 스타일 시트를 이용해 다운받을 수 있게 제공합니다만, 해당 방법은 데이터 사용과 관련된 민감한 운영 이슈가 겹쳐져 있어서 지원하지 않습니다.

인벤에서 기본으로 지원하는 서체는 인벤토리의 편집기에서 확인하실 수 있는 굴림, 돋음, 궁서 등 7개 서체입니다.



6. css에서 쓰이는 animation 기능을 어떻게 사용할 수 있는지 알려주십시오.

---

Transitions을 소개해 드리면서 animation에 대한 언급을 한 것을 기억하고 있습니다만, 정확하게는 정말 한정적으로밖에 이용할 수 없습니다.

아래에도 언급하겠지만, <style></style> 태그가 차단되어 있어서, animation css의 핵심 요소인 keyframes을 사용할 수 없습니다.
결국, 한정된 (keyframes이 없는) animation css를 사용하거나, Transition css 를 이용한 에니메이션 정도만 구현할 수 있다고 보시면 됩니다.

Transition 의 다양한 사용은 Transition css로 검색하시거나, 아래의 주소를 참고해 주시면 될 듯합니다.

https://www.w3schools.com/css/css3_transitions.asp



5, 7. 어떤 기능을 쓸 수 있고 어떻게 쓰는지 배울 수 있는 곳을 알려주십시오. data-inven 형식을 배울 수 있는 곳을 알려주십시오.

---

HTML / CSS / Javascript(대체 인벤 스크립트) 세 가지에 대해 짧게 설명을 하면,

HTML은 문서를 정의합니다. 이 내용이 제목이고, 이 내용은 표이며, 이 내용은 본문, 이 내용은 주석과 같이 각 내용이 무엇인지 이름표를 붙여주는 것입니다.

CSS는 문서의 스타일을 정의합니다. HTML에서 정의했던 제목과 내용, 본문의 크기나 굵기 폰트, 색상, 배경등의 모든 스타일은 CSS를 통해서 설정할 수 있습니다.

Script는 동작을 정의합니다. 내용에 마우스를 올리거나 클릭했을 때, 스타일이 어떻게 변할 것인지 아니면 웹 페이지에 특정 동작(마격, 쪽지, 새창, 툴팁 등)들은 스크립트의 일입니다.

여기서 인벤 스크립트는 보안상의 이슈로 인해 자바스크립트의 사용을 막으면서, 인장에 사용되던 자바스크립트 기능을 대체하기 위해 "인벤에서 자체 제작"한 메타 스크립팅 기술의 일종입니다.
웹 표준에 의해서, 자체 태그의 경우 접두사 data를 붙이게 되어 있고, 인벤에서 제공하는 스크립트를 일괄 관리하기 위해 data-inven-의 접두사를 가지게 되었습니다.

인벤의 자체 제작이고, 해당 스크립트가 인벤에서 밖에 사용할 수 없으므로, 인벤 스크립트 게시판 이외의 외부에서 인벤 스크립트의 정보를 얻는 것을 일반적으로 불가능합니다.

인벤 스크립트 게시판의 상단과 공지 글들을 전부 읽어 주셨다고 하셨는데, data-inven의 형식이나 사용방법은 해당 내용이 전부입니다.
오픈 베타 테스트 기간 동안, 해당 기능을 통해 거의 모든 유저분들의 다양한 자바스크립트 기능에 대응할 수 있음을 확인하여 정식 적용이 되었습니다.

CSS, HTML 사용에 있어서 일부 제약이 있는 것들이 있는데, 대표적으로 인장 밖의 항목에 간섭할 수 있는 <style></style> 태그, 레이어 악용이 가능한 Overflow:show, index-z, position:absolut, 그리고 XSS 등의 보안과 관련 있는 <iframe>, <embed> 태그등이 있습니다.

위에 언급된 핵심 제약 이외에도 여러 조건이 걸려 있지만, 기본적으로 3가지 원칙 "사이트 스타일 간섭, 스타일 악용, 보안위협"만 없는 소스라면 모두 사용할 수 있습니다.
<style></style> 태그가 막혀 있다 보니, 모든 스타일은 inline 스타일로 입력해 주셔야 하게 되었습니다. 이는 곳 inline스타일로 넣을 수 없는 스타일은 사용할 수 없다는 것을 의미합니다.
대표적으로 위에서 언급된 animation의 keyframe은 inline으로는 구현할 수 없습니다.

이 부분은 유저분들의 편의 및 총체적 보안(개인 정보뿐만이 아니라 사용간 불편 / 악용 방지를 포함하는 개념의 보안)을 위한 부분으로 양해 부탁드립니다.


물론 유저분들이 꼭 필요한 기능이 있다면, 지금이라도 새 기능을 추가할 준비가 되어 있습니다.
인벤 스크립트 사용간 불편한 점이나, 원하시는 기능, 이외에도 궁금하신 점은 언제든지 글 남겨주세요.

감사합니다.