머니투데이 메인 UI수정 Moneytoday.co.kr - 작성자 : 한정환 - 작성일 : 2008-01-18 - 버전 : Ver.01
상단 네비게이션 변경으로 인한 2Depth 접근 어려움 기사 팝업 사용 목적 MT UI 분석 수정 5 페이지 이동으로 인한 이동시간 소요 4 2 상단 네비게이션 변경으로 인한 2Depth 접근 어려움 1 페이지 이동으로 인한 이동시간 소요 3 * 메인 기사 클릭 시 페이지 로딩 시간 단축 * 투자뉴스(1depth)에서 뉴스종합(1depth)으로 상단 UI 변경으로 인한 2Depth로의 이동 불편함 해소
은행 특판예금의 변신.."금리가 달라요" 기사 팝업 화면설계서 MT UI 분석 수정 고객 금리민감도 반영 금리 조정.. 1주일 단위로 조정도 * 다짐 : 나를 위한 행복한 구속 (데이비드 사이먼 저/김시경 역/ 웅진윙스/ 261쪽) 아인슈타인은 “어리석음이란 계속해서 같은 일을 반복하면서도 다른 결과를 기대하는 것”이라고 말했다. 그렇다면 원점으로 복귀하려는 강한 욕망을 떨쳐내고, 진정한 변화의 문을 지나 지금과는 다른 삶을 살기 위해서는 어떻게 해야 할까? 특히 새로운 한 해가 시작되면 인생에서 무언가를 바꿔야겠다는 변화의 욕구가 강해진다. 하지만 며칠만 지나면 그 의지는 하루치의 사소한 욕망에 발목 잡혀 한 걸음도 나아가지 못하고 주저앉고 만다. 이는 ‘모호한 의지’를 ‘구체적인 선택’으로 바꾸고 실천으로 나아가게 하는 ‘다짐’을 하지 않았기 때문이다. 이 책은 외부의 자극에 의해 변화를 거듭하는 마음이 아닌 그 마음의 기저에 깔린 ‘정신’을 변화시켜 스스로에게 동의를 구하도록 도와준다. 이것은 두려움을 강요하는 규율이 아닌 자신과의 약속으로 “해야겠다”는 자발적 의지를 끊임없이 생성시킨다. ‘행복한 삶을 사는 방법’을 아는 것보다 중요한 것은 ‘어떤 삶이 행복한 삶인가’라는 물음에 답하는 것이다. 이 책 속 열 가지 다짐은 인생의 궁극적인 목표가 무엇인지 깨닫게 해 자발적ㆍ지속적으로 실천하게 한다. 창닫기 투자뉴스 > 주식 > 주식시황 전체내용 보기 관련기사 보기 새창 * 메인 기사 클릭 시 페이지 로딩 시간 단축 * 투자뉴스(1depth)에서 뉴스종합(1depth)으로 상단 UI 변경으로 인한 2Depth로의 이동 불편함 해소 * 고객이 페이지 이동과 팝업으로 보기 선택 가능 * 기사 위치 경로 표시로 이동 위치 파악
기사 퀵뷰 화면설계서 가구·소득별 소득세 얼마나 줄어드나 MT UI 분석 수정 [2008년 세법 개정안 시행령] 근로소득 간이세액표는 한마디로 세금을 떼는 기준이 되는 표다. 고용주가 근로자에게 매월 급여를 지급할 때 원천징수해야 하는 세액을 급여수준 및 가족수별로 정했다. 간이세액표에 따라 매월 원천징수한 세액이 근로자가 실제 지급한 보험료·의료비· 교육비·주택자금·신용카드 사용액 등을 반영한 실제 세부담보다 큰 경우 연말정산시 그 차액을 환급받을 수 있다. 반면 실제 세부담보다 적으면 그 차액을 추가 납부해야 한다. * 기사에 대한 대략적인 내용을 빠르게 파악 할 수 있으며 관심 내용에 클릭을 유도 * 투자뉴스, 뉴스종합, 스타뉴스 등 다양한 굴비 영역에 사용하여 UI 변경 없이 확인 가능
기사 팝업& 퀵뷰 가이드 1. 기사팝업 2. 기사 팝업 스크립트 소스 MT UI 분석 수정 1. 기사팝업 1. 기사팝업은 S영역의 기사 클릭 시 전체 기사 내용을 팝업에 노출 2. 기사팝업 사이즈는 1024x768 최소화면 사이즈를 벗어나지 않는 범위에서 크기 설정 3. 기사 팝업 내 관련기사 보기, 나도 한마디, 관련 태그 보기 등을 버튼으로 처리(속도 ↑) 후 본문 기사로 이동 2. 기사 팝업 스크립트 소스 모든 기사 팝업은 ID를 quickArticle로 통일하여 같은 화면을 사용하도록 처리하며 상하 또는 좌우 값을 적용할 부분에 expression 함수 사용하고 고정 값을 가지고 있는 곳에는 필셀 단위로 고정 값을 입력한다. <script language="JavaScript"> <!-- window.onload=fnInit; function fnInit(){ oDiv.style.setExpression("left", "document.documentElement.clientWidth/2 - oDiv.offsetWidth/2" ); oDiv.style.setExpression("top", "document.documentElement.clientHeight/2 - oDiv.offsetHeight/2" ); document.recalc(true); } //--> </script> <DIV ID="oDiv" STYLE="background-color: #CFCFCF; position: absolute; top: 0; left: 0;"> Example DIV </DIV> 모든 팝업 기사는 ID를 quickArticle로 통일하여 같은 화면을 사용하도록 처리하며 상하 또는 좌우 상대 값을 적용할 부분에 expression함수 사용 절대값 적용 부분은 직접 수 기입
기사 팝업& 퀵뷰 가이드 1. 기사 퀵뷰 2. 기사 팝업 스크립트 소스 MT UI 분석 수정 1. 기사 퀵뷰 1) 굴비 영역의 기사 내용의 미리보기 기능으로 기사 마우스 오버 시 2) 기사 타이틀, 서브타이틀 전체 노출, 본문 내용은 5줄만 노출 2. 기사 팝업 스크립트 소스 1) 첨부된 샘플 HTML, JS, CSS 문서 참조 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>돈이 보이는 리얼타임뉴스'머니투데이'</title> <link href="layer.css?ver=20080114102051" type="text/css" rel="stylesheet"> <script src="util.js?ver=20080107174049" type="text/javascript" language="JavaScript"></script> <script> function showPreview(show,hook,title,blog,image,content,tag) { var PreviewLayer = document.getElementById('preview_article'); var oBody = ( document.compatMode && document.compatMode!="BackCompat" ) ? document.documentElement : document.body ; if (show) var intLayerWidth = 350; var intLayerIntval = 15; var intArrowIntval = 15; var intHookLeft = getOffsetLeft(hook); var intHookTop = getOffsetTop(hook); 모든 팝업 기사는 ID를 quickArticle로 통일하여 같은 화면을 사용하도록 처리하며 상하 또는 좌우 상대 값을 적용할 부분에 expression함수 사용 절대값 적용 부분은 직접 수 기입
기사 팝업& 퀵뷰 가이드 MT UI 분석 수정 if (intHookLeft+intLayerWidth > oBody.scrollWidth) { intLayerLeft = oBody.scrollWidth - intLayerWidth - 5; intArrowLeft = intHookLeft-intLayerLeft+intLayerIntval+intArrowIntval; }else{ intLayerLeft = intHookLeft+intLayerIntval; intArrowLeft = intArrowIntval; } intLayerTop = intHookTop + 20; PreviewLayer.style.left = intLayerLeft + "px"; PreviewLayer.style.top = intLayerTop + "px"; PreviewLayer.style.display = "block"; document.getElementById("preview_arrow").style.marginLeft = intArrowLeft+"px"; document.getElementById('preview_title').innerHTML = decodeURIComponent(title); document.getElementById('preview_blog').innerHTML = decodeURIComponent(blog); if (image) document.getElementById('preview_image').style.display = "block"; document.getElementById('preview_image').innerHTML = decodeURIComponent(image); document.getElementById('preview_image').style.display = "none"; document.getElementById('preview_content').innerHTML = decodeURIComponent(content); PreviewLayer.style.display = "none"; </script> </head>
기사 팝업& 퀵뷰 가이드 MT UI 분석 수정 <body> <div id="preview_article" style="display:none;"> <div id = "preview_arrow" class="preview_arrow"></div> <div class="preview_layer"> <h4 id="preview_title"></h4> <h5 id="preview_blog"></h5> <div class="preview_post"> <div id="preview_image" class="preview_img" style="display:none;"><!--img src="../images/img_ex.gif"--></div> <div id="preview_content"></div> </div> <!--div id="preview_tag" class="preview_tag"></div--> <div class="shadow"></div> <div id="quickView"> <ul class="theme_list today_best"> <li class="rank_1"> <div onmouseover="showPreview(true,this,'이곳에 타이틀을 넣어보자!!','이곳은 서브타이틀 들어가야하는 부분','','기사본문내용 5줄 정')" onmouseout="showPreview(false)"> <a href="http://news.moneytoday.co.kr/" class="post" target="_self">Quick view 처리로 빠른 기사보여주기</a> </li> </ul> </body>
기사 팝업& 퀵뷰 적용 영역 MT UI 분석 수정 새창 새창 새창 새창 새창 * 기사팝업 * 기사 Quick View
기사 팝업& 퀵뷰 적용 영역 MT UI 분석 수정 * 기사팝업 * 기사 Quick View
기사 팝업& 퀵뷰 적용 영역 MT UI 분석 수정 * 기사팝업 * 기사 Quick View
투자뉴스 UI수정 MT UI 분석 수정 MT에서 알립니다 타이틀 우측 More 버튼 삭제, 2주간 ◀ 2개▶로 변경 1 MT에서 알립니다 타이틀 우측 More 버튼 삭제, 2주간 ◀ 2개▶로 변경 기사클릭 시 링크 타겟을 _self로 설정 스타뉴스 & 3종 세트 타이틀 우측에 스타뉴스는 기존유지, 3종 세트는 아래와 같이 기사위치표기, More 버튼 전체보기로 수정 머니 플러스 & 부동산 분양관 광고형태의 기사 및 배너 링크 _Blank 처리 굴비 굴비영역 하단 전체보기 버튼 명 ‘더보기’로 변경 주요지수 & 가치지표 지표 퍼가기 팝업 상대좌표로 수정 주요지수 하단 *WMI500=장마감~ 안내문 폰트 및 크기 변경 Bio & Health - 타이틀 Bio & Health로 수정, 기사위치 표기, 전체보기 버튼추가 MT에서 알립니다. ◀ 2개 ▶ 4 2 돈이 보이는 기사 머니위크 전체보기 몸값 올리는 기사 뉴스종합 전체보기 행복 해지는 기사 쿨 머니 전체보기 1 3 5 4 5 3 6 2 6 Bio & Health 뉴스종합 전체보기
투자뉴스 UI수정 MT UI 분석 수정 실시간 투자뉴스 타이틀 이미지 링크 삭제 캠페인 띠 배너 1 1 실시간 투자뉴스 타이틀 이미지 링크 삭제 캠페인 띠 배너 타이틀 추가 서비스와 캠페인 분리 추가 가치투자클럽~ 프리미엄 서비스로 모든 링크 타겟은 _blank 처리 - 기업분석의 경우 프리미엄 서비스이며 종목검색에서 확인 메인에서 클릭 시 프리미엄 UI로 구성 종목 검색 시는 기존화면 유지(기획과 협의) 주식로또 운영 여부 확인 필요 투자대가가 뽑은 한국의 가치주 - 인물 이미지에 링크 처리, 링크 타겟은 _blank 머투를 만나는 또 다른 방법 ‘MT를 만나는 또 다른 방법’ 타이틀명 변경 뉴스플러스(프리미엄 서비스)는 우측 비즈니스로 위치이동) - 신문, 이매니져, 마이링커, 모바일 뉴스 통합 페이지(팝업) 제작 굴비 굴비영역 하단 전체보기 버튼 명 ‘더보기’로 변경 2 6 MT서비스 MT캠페인 2 3 4 4 3 5 5 6
투자뉴스 UI수정 MT UI 분석 수정 마이데스크에 RSS등록하기 - RSS 버튼 클릭 시 링크 타겟은 _blank 1 마이데스크에 RSS등록하기 - RSS 버튼 클릭 시 링크 타겟은 _blank 마이데스크에 등록하기 클릭 시 링크타겟은 _blank 오늘의 주요공시 전체보기 버튼명 ‘더보기’로 변경 비즈니스 타이틀명 프리미엄 서비스로 변경 - 뉴스플러스 추가 타이틀명 우측에 프리미엄 서비스란? 추가 (내용 요청) 풋터 디자인 변경 캠페인 영역 서비스 소개(뉴스종합, 머니투데이, 스타뉴스, 더벨, 머니위크) 추가 회사소개 라인에 광고안내 추가 - 로고 박스 우측에 자회사 관련 콤보박스 추가 2 2 3 1 3 4 4
뉴스종합 UI수정 MT UI 분석 수정 스타뉴스 & 3종 세트 1 스타뉴스 & 3종 세트 타이틀 우측에 스타뉴스는 기존유지, 3종 세트는 아래와 같이 기사위치표기, More 버튼 전체보기로 수정 사진 & VOD 개별 노출 부분을 그룹핑 - 사진 & VOD 뉴스 타이틀 추가 실시간 투자뉴스 타이틀 이미지 링크 삭제 굴비 굴비영역 하단 전체보기 버튼 명 ‘더보기’로 변경 돈이 보이는 기사 머니위크 전체보기 몸값 올리는 기사 뉴스종합 전체보기 행복 해지는 기사 쿨 머니 전체보기 4 2 3 2 4 1 3 4
나만의 칼럼 북마크 뉴스종합 UI수정 MT UI 분석 수정 MT에서 알립니다 1 MT에서 알립니다 타이틀 우측 More 버튼 삭제, 2주간 ◀ 2개▶로 변경 기사클릭 시 링크 타겟을 _self로 설정 블로거들이 제한하는 쇼핑노하우 펌블 타이틀 클릭 시 이동 후 상단 정보과학>정책 노출 X 타이틀 바 More 버튼 추가 나만의 칼럼 북마크 나만의 칼럼 북마크 삭제 후 나의 칼럼 하단에 영역에 설정버튼 추가 굴비 굴비영역 하단 전체보기 버튼 명 More로 변경 비즈니스 타이틀명 프리미엄 서비스로 변경 - 뉴스플러스 추가 타이틀명 우측에 프리미엄 서비스란? 추가 (내용 요청) 4 MT에서 알립니다. ◀ 2개 ▶ 2 1 2 3 내가 원하는 컬럼만 쏙!쏙! 나만의 칼럼 북마크 나만의 칼럼 설정 마이데스크 RSS2.0 3 4 5 5
뉴스종합 UI수정 MT UI 분석 수정 머투를 만나는 또 다른 방법 ‘MT를 만나는 또 다른 방법’ 타이틀명 변경 1 머투를 만나는 또 다른 방법 ‘MT를 만나는 또 다른 방법’ 타이틀명 변경 뉴스플러스(프리미엄 서비스)는 우측 비즈니스로 위치이동) - 신문, 이매니져, 마이링커, 모바일 뉴스 통합 페이지(팝업) 제작 마이데스크에 RSS등록하기 - RSS 버튼 클릭 시 링크 타겟은 _blank 마이데스크에 등록하기 클릭 시 링크타겟은 _blank 풋터 디자인 변경 캠페인 영역 서비스 소개(뉴스종합, 머니투데이, 스타뉴스, 더벨, 머니위크) 추가 회사소개 라인에 광고안내 추가 - 로고 박스 우측에 자회사 관련 콤보박스 추가 1 2 3 2 3