1. 최상단 4개의 탭 관리를 더 깔끔하게 개선해보았습니다.

기존 12개의 이미지를 사용하여 탭을 바꿀때마다 여러개의 사진이 바뀌도록 하였는데,
하나로 합쳐서 총 4개의 이미지를 사용하여 구성될 수 있도록 수정하였습니다.

<div data-inven-id="tab_1" .... 아래

<img src="https://upload2.inven.co.kr/upload/2017/01/27/bbs/i14366918788.jpg" usemap="#top_1">
<map name="top_1">
<area shape="rect" coords="0,86,113,145" title="t1" style="cursor:pointer;"
data-inven-click-css="{'tab_1':{'display':'block'},'tab_2':{'display':'none'},'tab_3':{'display':'none'},'tab_4':{'display':'none'}}">
<area shape="rect" coords="114,86,225,145" title="t2" style="cursor:pointer;"
data-inven-click-css="{'tab_1':{'display':'none'},'tab_2':{'display':'block'},'tab_3':{'display':'none'},'tab_4':{'display':'none'}}">
<area shape="rect" coords="226,86,338,145" title="t3" style="cursor:pointer;"
data-inven-click-css="{'tab_1':{'display':'none'},'tab_2':{'display':'none'},'tab_3':{'display':'block'},'tab_4':{'display':'none'}}">
<area shape="rect" coords="339,86,450,145" title="t4" style="cursor:pointer;"
data-inven-click-css="{'tab_1':{'display':'none'},'tab_2':{'display':'none'},'tab_3':{'display':'none'},'tab_4':{'display':'block'}}">
</map>



<div data-inven-id="tab_2" .... 아래

<img src="https://upload2.inven.co.kr/upload/2017/01/27/bbs/i14393595811.jpg" usemap="#top_2">
<map name="top_2">
<area shape="rect" coords="0,86,113,145" title="t1" style="cursor:pointer;"
data-inven-click-css="{'tab_1':{'display':'block'},'tab_2':{'display':'none'},'tab_3':{'display':'none'},'tab_4':{'display':'none'}}">
<area shape="rect" coords="114,86,225,145" title="t2" style="cursor:pointer;"
data-inven-click-css="{'tab_1':{'display':'none'},'tab_2':{'display':'block'},'tab_3':{'display':'none'},'tab_4':{'display':'none'}}">
<area shape="rect" coords="226,86,338,145" title="t3" style="cursor:pointer;"
data-inven-click-css="{'tab_1':{'display':'none'},'tab_2':{'display':'none'},'tab_3':{'display':'block'},'tab_4':{'display':'none'}}">
<area shape="rect" coords="339,86,450,145" title="t4" style="cursor:pointer;"
data-inven-click-css="{'tab_1':{'display':'none'},'tab_2':{'display':'none'},'tab_3':{'display':'none'},'tab_4':{'display':'block'}}">
</map>


이 이하는 복붙하시면 됩니다.
<!-- 검색 탭 자유롭게 활용하셔도 됩니다 -->
<div data-inven-id="tab_3" style="display:none; border: 0px; width: 450px; padding: 0em;">
<img src="https://upload2.inven.co.kr/upload/2017/01/27/bbs/i14319622424.jpg" usemap="#top_3">
<map name="top_3">
<area shape="rect" coords="0,86,113,145" title="t1" style="cursor:pointer;"
data-inven-click-css="{'tab_1':{'display':'block'},'tab_2':{'display':'none'},'tab_3':{'display':'none'},'tab_4':{'display':'none'}}">
<area shape="rect" coords="114,86,225,145" title="t2" style="cursor:pointer;"
data-inven-click-css="{'tab_1':{'display':'none'},'tab_2':{'display':'block'},'tab_3':{'display':'none'},'tab_4':{'display':'none'}}">
<area shape="rect" coords="226,86,338,145" title="t3" style="cursor:pointer;"
data-inven-click-css="{'tab_1':{'display':'none'},'tab_2':{'display':'none'},'tab_3':{'display':'block'},'tab_4':{'display':'none'}}">
<area shape="rect" coords="339,86,450,145" title="t4" style="cursor:pointer;"
data-inven-click-css="{'tab_1':{'display':'none'},'tab_2':{'display':'none'},'tab_3':{'display':'none'},'tab_4':{'display':'block'}}">
</map>
<img src="https://upload2.inven.co.kr/upload/2017/01/09/bbs/i13330776144.jpg">
<img src="https://upload2.inven.co.kr/upload/2017/01/09/bbs/i14171626620.jpg">
</div>
<!-- 설정 탭 자유롭게 활용하셔도 됩니다 -->
<div data-inven-id="tab_4" style="display:none; border: 0px; width: 450px; padding: 0em;">
<img src="https://upload2.inven.co.kr/upload/2017/01/27/bbs/i14347464907.jpg" usemap="#top_4">
<map name="top_4">
<area shape="rect" coords="0,86,113,145" title="t1" style="cursor:pointer;"
data-inven-click-css="{'tab_1':{'display':'block'},'tab_2':{'display':'none'},'tab_3':{'display':'none'},'tab_4':{'display':'none'}}">
<area shape="rect" coords="114,86,225,145" title="t2" style="cursor:pointer;"
data-inven-click-css="{'tab_1':{'display':'none'},'tab_2':{'display':'block'},'tab_3':{'display':'none'},'tab_4':{'display':'none'}}">
<area shape="rect" coords="226,86,338,145" title="t3" style="cursor:pointer;"
data-inven-click-css="{'tab_1':{'display':'none'},'tab_2':{'display':'none'},'tab_3':{'display':'block'},'tab_4':{'display':'none'}}">
<area shape="rect" coords="339,86,450,145" title="t4" style="cursor:pointer;"
data-inven-click-css="{'tab_1':{'display':'none'},'tab_2':{'display':'none'},'tab_3':{'display':'none'},'tab_4':{'display':'block'}}">
</map>
<img src="https://upload2.inven.co.kr/upload/2017/01/09/bbs/i13979827323.jpg"></div>
</div>

추가적인 이해를 돕기 위해 현재 상태의 script 를 첨부해드리겠습니다.

2. 친구 프로필을 구성할 때, 여러개의 움짤을 사용하여 꾸며볼 수 있도록 개선해보았습니다.
* 움짤은 450*540으로 맞춰주세요. (포토샵 등으로 편집)

<div data-inven-id="ext_con1_twicenayeon" style="display:none;">
<a data-inven-random="nayeon_1,nayeon_2,nayeon_3"></a>
<div data-inven-id="nayeon_1" style="display:none; width:450px; height:800px; background:url(https://upload2.inven.co.kr/upload/2017/01/27/bbs/i14611219093.gif); padding:0px; margin:0px;">
<img src="https://upload2.inven.co.kr/upload/2017/01/27/bbs/i14643223615.png" usemap="#ext_con1_nayeon"></div>
<div data-inven-id="nayeon_2" style="display:none; width:450px; height:800px; background:url(https://upload2.inven.co.kr/upload/2017/01/27/bbs/i14653961455.gif); padding:0px; margin:0px;">
<img src="https://upload2.inven.co.kr/upload/2017/01/27/bbs/i14643223615.png" usemap="#ext_con1_nayeon"></div>
<div data-inven-id="nayeon_3" style="display:none; width:450px; height:800px; background:url(https://upload2.inven.co.kr/upload/2017/01/27/bbs/i14608328005.gif); padding:0px; margin:0px;">
<img src="https://upload2.inven.co.kr/upload/2017/01/27/bbs/i14643223615.png" usemap="#ext_con1_nayeon"></div>
<map name="ext_con1_nayeon">
<area shape="rect" coords="4,35,47,79" title="backtomain" data-inven-click-css="{'ext_con1_twicenayeon':{'display':'none'},'main_kakao':{'display':'block'}}"></map></div>

시작과 끝의 div 박스는 유지한 채로,

<a data-inven-random> 을 사용하여 랜덤으로 이탤릭+취소줄이 그어진 주소의 움짤을 링크할 수 있도록 해두었습니다.
초록색끼리는 코드가 같아야하며,

여러 움짤을 사용할 경우 빨간색 글씨를 수정하면 됩니다.