신입의
"신규 PROJECT" 경험기
UI개발 4팀 이상진
신입의
"신규 PROJECT" 경험기
5개월차
UI개발 4팀 이상진
목차
1. 서비스 소개
2. 요구사항
3. 이슈 & 해결
4. 마치며
1
서비스 소개
1-1. 서비스 소개
1-1. 서비스 소개
1-1. 서비스 소개
" 패피들이 알려주는
리얼아이템 "
1-2. 담당페이지
1-2. 담당페이지
1-2. 담당페이지
소개페이지
1-3. 소개페이지
2
요구사항
마크업 일정
6MD
2-1. 요구사항 - 개발
마크업 일정
6MD
개발 일정
1MD
2-1. 요구사항 - 개발
마크업 일정
6MD
개발 일정
1MD
2-1. 요구사항 - 개발
내가 해야되는 것은?
마크업 + 스크립트
같이 구현하기
2-1. 요구사항
2-1. 요구사항
일정 안에 작업을 완료하려면?
스크립트에 익숙하지 않은 내가
2-1. 요구사항
- 협의를 통해 복잡한 인터렉션 디자인 간소화
2-1. 요구사항
- 협의를 통해 복잡한 인터렉션 디자인 간소화
- eg.js 에서 제공하는 라이브러리 사용
- 협의를 통해 복잡한 인터렉션 디자인 간소화
- eg.js 에서 제공하는 라이브러리 사용
- 최대한 css로 구현
2-1. 요구사항
2-2. 디자인 시안 : BG 플리킹
mobile
pc
2-2. 디자인 시안 : frame
2-2. 디자인 시안 : frame > 문구
2-2. 디자인 시안 : frame > 문구
2-2. 반응형 & 크로스브라우징
모바일 :
android 4.x
PC :
Internet Explorer 9
3
이슈 & 해결
3-1. frame : width / height
3-1. frame : width / height
디자인가이드
3-1. frame : width / height
3-1. frame : width / height
3-1. frame : width / height
3-1. frame : width / height
3-1. frame : width / height
3-1. frame : width / height
100%
3-1. frame : width / height
100%
85%
3-1. frame : width / height
100%
85%
1 : 2.5
3-1. frame : width / height
3-1. frame : width / height
브라우저의 "height"에 따라 가변
3-1. frame : width / height
<div class="container">
3-1. frame : width / height
.container {
box-sizing: border-box;
height: 100%;
padding: 62px 0 42px;
}
<div class="container">
3-1. frame : width / height
.container {
box-sizing: border-box;
height: 100%;
padding: 62px 0 42px;
}
<div class="container">
3-1. frame : width / height
.container {
box-sizing: border-box;
height: 100%;
padding: 62px 0 42px;
}
<div class="container">
<div class="content">
.container .content {
height: 100%;
}
100%
3-1. frame : width / height
.container {
box-sizing: border-box;
height: 100%;
padding: 62px 0 42px;
}
.container .content {
height: 100%;
}
<div class="container">
<div class="content">
100%
3-1. frame : width / height
.container {
box-sizing: border-box;
height: 100%;
padding: 62px 0 42px;
}
.container .content {
height: 100%;
}
<div class="container">
<div class="content">
100%
.container .content .frame {
height: 85%;
}
3-1. frame : width / height
<div class="container">
<div class="content">
100%
3-1. frame : width / height
<div class="container">
<div class="content">
100%
.container .content .frame {
width: ??;
height: 85%;
}
?
3-1. frame : width / height
<div class="container">
<div class="content">
100%
x : y
1 : 2.5
.container .content .frame {
width: ??;
height: 85%;
}
?
3-1. frame : width / height
<div class="container">
<div class="content">
100%
x : y
1 : 2.5
.container .content .frame {
width: height * 1/2.5;
height: 85%;
}
3-1. frame : width / height
<div class="container">
<div class="content">
100%
x : y
1 : 2.5
.container .content .frame {
width: height * 1/2.5;
height: 85%;
}
height * 1/2.5
3-1. frame : width / height
<div class="container">
<div class="content">
100%
x : y
1 : 2.5
" 연산(x / + - ) " 필요
.container .content .frame {
width: height * 1/2.5;
height: 85%;
}
height * 1/2.5
3-1. frame : width / height
<div class="container">
<div class="content">
100%
x : y
1 : 2.5
" 연산(x / + - ) " 필요
.container .content .frame {
width: height * 1/2.5;
height: 85%;
}
height * 1/2.5
스크립트 처리
3-1. frame : width / height
<div class="container">
<div class="content">
100%
x : y
1 : 2.5
" 연산(x / + - ) " 필요
.container .content .frame {
width: height * 1/2.5;
height: 85%;
}
height * 1/2.5
스크립트 처리
var setFrameWidth = function(){
var frame = $('.content .frame');
var frameHeight = frame.outerHeight();
frame.outerWidth(frameHeight / 2.5);
};
$(window).resize(function(){
setFrameWidth();
});
CSS만으로 구현이 가능하지 않을까?
(스크립트는 최후의 선택으로)
3-1. frame : width / height
3-1. frame : width / height
1
2.5
9
16
2
1.5
3-1. frame : width / height
브라우저의 height 기준으로 width가 바뀌는 spec 이므로 사용할 수 없음
1
2.5
9
16
2
1.5
3-1. frame : width / height
3-1. frame : width / height
css내 수치들을 "계산"해주는 속성
3-1. frame : width / height
css내 수치들을 "계산"해주는 속성
height: calc(140px - 22px);
3-1. frame : width / height
css내 수치들을 "계산"해주는 속성
height: calc(140px - 22px);
"뷰포트"의 높이값
3-1. frame : width / height
css내 수치들을 "계산"해주는 속성
height: calc(140px - 22px);
"뷰포트"의 높이값
100vw
100vh
3-1. frame : width / height
css내 수치들을 "계산"해주는 속성
height: calc(140px - 22px);
// 브라우저 전체 높이값
height: 100vh;
"뷰포트"의 높이값
3-1. frame : width / height
height: calc(140px - 22px);
+
css내 수치들을 "계산"해주는 속성
"뷰포트"의 높이값
// 브라우저 전체 높이값
height: 100vh;
<div class="container">
<div class="content">
100%
x : y
1 : 2.5
3-1. frame : width / height
구현2. calc() & vh 사용하기
<div class="container">
<div class="content">
100%
x : y
1 : 2.5
3-1. frame : width / height
구현2. calc() & vh 사용하기
<div class="container">
<div class="content">
100%
x : y
1 : 2.5
구현2. calc() & vh 사용하기
width = height * 1/2.5
3-1. frame : width / height
<div class="container">
<div class="content">
100%
구현2. calc() & vh 사용하기
3-1. frame : width / height
width = height * 1/2.5
구현2. calc() & vh 사용하기
3-1. frame : width / height
width = height * 1/2.5
구현2. calc() & vh 사용하기
3-1. frame : width / height
width = height * 1/2.5
100vh
구현2. calc() & vh 사용하기
3-1. frame : width / height
width = height * 1/2.5
구현2. calc() & vh 사용하기
100vh - (62+42)px
3-1. frame : width / height
width = height * 1/2.5
3-1. frame : width / height
구현2. calc() & vh 사용하기
width = height * 1/2.5
85%
3-1. frame : width / height
구현2. calc() & vh 사용하기
(100vh - (62+42)px)
width = height * 1/2.5
85%
3-1. frame : width / height
구현2. calc() & vh 사용하기
(100vh - (62+42)px) * 0.85
width = height * 1/2.5
85%
3-1. frame : width / height
구현2. calc() & vh 사용하기
(100vh - (62+42)px) * 0.85
width = height * 1/2.5
3-1. frame : width / height
구현2. calc() & vh 사용하기
width: (100vh - (62+42)px) * 0.85 * 1/2.5
3-1. frame : width / height
구현2. calc() & vh 사용하기
width: (100vh - (62+42)px) * 0.85 * 1/2.5
3-1. frame : width / height
구현2. calc() & vh 사용하기
.frame {
box-sizing: border-box;
position: absolute;
z-index: 2100;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: calc((100vh - (62px+42px)) * 0.85 * 0.4);
height: 85%;
margin: auto;
border: 8px solid #2b2e3c;
}
3-1. frame : width / height
구현2. calc() & vh 사용하기 : 크로스브라우징
3-1. frame : width / height
구현2. calc() & vh 사용하기 : 크로스브라우징
안드로이드 4.3
안드로이드 4.3
안드로이드 4.4
- 곱셈/나눗셈
3-1. frame : width / height
구현2. calc() & vh 사용하기 : 크로스브라우징
4.4.2
4.1.2
7.0
'아쉽지만
스크립트로...'
3-1. frame : border 형태
mobile
pc
3-1. frame : border 형태
mobile : 우측 하단이 뚫린 형태
3-1. frame : border 형태
3-1. frame : border 형태
- %단위 지원 x
- 연산필요 (스크립트 or calc() )
3-1. frame : border 형태
- 선택부분 만 "보이게" 하는 속성
- %단위 지원 x
- 연산필요 (스크립트 or calc() )
사용할 수 없음
3-1. frame : border 형태
구현2. background-image
3-1. frame : border 형태
mobile
pc
3-1. frame : border 형태
mobile
pc
svg 이미지
css : border
3-1. frame : border 형태
// mobile
.frame {
border-box: box-sizing;
border: none;
background-image: url(['border이미지경로']);
background-size: 100%;
background-position: center;
}
// PC
@media (min-width: 1025px) {
.frame {
border: 7px solid #2b2e3c;
background-image: none;
}
}
3-2. eg.js 사용과 z-index
3-2. eg.js 사용과 z-index
bg_1
bg_2
bg_3
<div class="group_section">
<section class="section bg_1"></section>
<section class="section bg_2"></section>
<section class="section bg_3"></section>
</div>
3-2. eg.js 사용과 z-index
AS-IS
bg_1
bg_2
bg_3
<div class="group_section">
<div class="eg-flick-container" style="position: relative;
z-index: 2000; width: 100%; height: 100%; transform: translate
(-918px, 0px); will-change: transform;"></div>
</div>
3-2. eg.js 사용과 z-index
TO-BE
bg_1
bg_2
bg_3
z-index: 2000;
3-2. eg.js 사용과 z-index
<div class="group_section">
<div class="eg-flick-container" style="position: relative;
z-index: 2000; width: 100%; height: 100%; transform: translate
(-918px, 0px); will-change: transform;"></div>
</div>
TO-BE
3-2. eg.js 사용과 z-index : frame영역 플리킹
정상적인 플리킹
플리킹 이슈
이슈 원인. z-index
3-2. eg.js 사용과 z-index : frame영역 플리킹
이슈 원인. z-index
body {
z-index: auto;
}
3-2. eg.js 사용과 z-index : frame영역 플리킹
이슈 원인. z-index
div.eg-flick-container {
z-index: 2000;
}
3-2. eg.js 사용과 z-index : frame영역 플리킹
div.frame {
z-index: 2100;
}
이슈 원인. z-index
3-2. eg.js 사용과 z-index : frame영역 플리킹
이슈 원인. z-index
3-2. eg.js 사용과 z-index : frame영역 플리킹
구현1. pointer-events 속성
a.banner {
position: absolute;
top: 1em;
left: 3em;
}
<p>텍스트 영역 텍스트 영역 텍스트 영역 텍스트 영역 텍스트 영역</p>
<a href="http://naver.com" class="banner">
이것은 광고 배너입니다. 이것은 광고 배너입니다.
</a>
3-2. eg.js 사용과 z-index : frame영역 플리킹
a.banner {
position: absolute;
top: 1em;
left: 3em;
pointer-events: none;
}
<p>텍스트 영역 텍스트 영역 텍스트 영역 텍스트 영역 텍스트 영역</p>
<a href="http://naver.com" class="banner">
이것은 광고 배너입니다. 이것은 광고 배너입니다.
</a>
구현1. pointer-events 속성
3-2. eg.js 사용과 z-index : frame영역 플리킹
div.frame {
box-sizing: border-box;
position: absolute;
z-index: 2100;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 85%;
pointer-events: none;
...
}
구현1. pointer-events 속성
3-2. eg.js 사용과 z-index : frame영역 플리킹
구현1. pointer-events 속성 - 크로스브라우징
3-2. eg.js 사용과 z-index : frame영역 플리킹
구현1. pointer-events 속성 - 크로스브라우징
3-2. eg.js 사용과 z-index : frame영역 플리킹
'아쉽지만
스크립트로...'
구현2. 스크립트 처리
3-2. eg.js 사용과 z-index : frame영역 플리킹
구현2. 스크립트 처리
3-2. eg.js 사용과 z-index : frame영역 플리킹
구현2. 스크립트 처리
Div.controller_page
3-2. eg.js 사용과 z-index : frame영역 플리킹
구현2. 스크립트 처리
Div.controller_page
z-index: 2200
3-2. eg.js 사용과 z-index : frame영역 플리킹
구현2. 스크립트 처리
Div.controller_page
z-index: 2200
.controller_page {
position: fixed;
z-index: 2200;
top: 62px; // header 높이
right: 0;
bottom: 42px; // footer 높이
left: 0;
}
3-2. eg.js 사용과 z-index : frame영역 플리킹
구현2. 스크립트 처리
Div.controller_page
z-index: 2200
.controller_page {
position: fixed;
z-index: 2200;
top: 62px; // header 높이
right: 0;
bottom: 42px; // footer 높이
left: 0;
}
3-2. eg.js 사용과 z-index : frame영역 플리킹
구현2. 스크립트 처리
플리킹 이벤트 처리
Div.controller_page
3-2. eg.js 사용과 z-index : frame영역 플리킹
div.frame {
z-index: 2100;
}
구현2. 스크립트 처리
3-2. eg.js 사용과 z-index : frame영역 플리킹
div.controller_page {
z-index: 2200;
}
구현2. 스크립트 처리
3-2. eg.js 사용과 z-index : frame영역 플리킹
div.controller_page {
z-index: 2200;
}
구현2. 스크립트 처리
이벤트처리
3-2. eg.js 사용과 z-index : frame영역 플리킹
div.controller_page {
z-index: 2200;
}
구현2. 스크립트 처리
이벤트처리
3-2. eg.js 사용과 z-index : frame영역 플리킹
.banner, .button_link {
z-index: 2300;
}
구현2. 스크립트 처리
링크, 버튼요소들
3-2. eg.js 사용과 z-index : frame영역 플리킹
3-2. eg.js 사용과 z-index : 재선언
z-index 재선언 이슈
소개페이지에서는 z-index를 2000 위로 재선언 필요
z-index 재선언 이슈
3-2. eg.js 사용과 z-index : 재선언
3-2. eg.js 사용과 z-index : 재선언
z-index 재선언 이슈
}
전체적 숫자단위가 커짐
유지보수에 어려움
3-2. eg.js 사용과 z-index : 재선언
z-index 재선언 이슈
구현1. eg.js 컴포넌트 z-index 초기화
3-2. eg.js 사용과 z-index : 재선언
구현1. eg.js 컴포넌트 z-index 초기화
3-2. eg.js 사용과 z-index : 재선언
구현1. eg.js 컴포넌트 z-index 초기화
important 키워드 사용
조심스럽게...!
3-2. eg.js 사용과 z-index : 재선언
<div class="wrap">
...
<main class="container">
<div class="content">
...
<div class="group_section">
<div class="eg-flick-container" style="z-index:2000;">
...
구현2. eg.js 컴포넌트 부모 z-index: 0;
3-2. eg.js 사용과 z-index : 재선언
구현2. eg.js 컴포넌트 부모 z-index: 0;
<div class="wrap">
...
<main class="container">
<div class="content">
...
<div class="group_section">
<div class="eg-flick-container" style="z-index:2000;">
...
3-2. eg.js 사용과 z-index : 재선언
구현2. eg.js 컴포넌트 부모 z-index: 0;
<div class="wrap">
...
<main class="container">
<div class="content">
...
<div class="group_section">
<div class="eg-flick-container" style="z-index:2000;">
...
}
z-index: auto (default)
3-2. eg.js 사용과 z-index : 재선언
구현2. eg.js 컴포넌트 부모 z-index: 0;
<div class="wrap">
...
<main class="container">
<div class="content">
...
<div class="group_section">
<div class="eg-flick-container" style="z-index:2000;">
...
}
z-index: 0; ( < 2000 )
3-2. eg.js 사용과 z-index : 재선언
4
마치며
좁은 시야
반복되는 시행착오
기획
디자인
마크업
개발
기획
디자인
마크업
개발
기획
디자인
마크업
개발
정확한 spec 파악
개발 적용시 상태 고려
기획
디자인
마크업
개발
정확한 spec 파악
개발 적용시 상태 고려
- 시행착오 감소
- 일정관리에 여유
- 코드품질 향상
계속해서 변화하는 웹표준
계속해서 변화하는 웹표준
대응 브라우저 상향
새로운 속성/기술 사용 시도
반복되는 시행착오
" 실력 "
새로운 속성/기술 사용 시도
반복되는 시행착오
결론
- 기획 & 스펙 정확하게 파악
- 개발과의 연계를 고려하여 작업
- 새로운 기술/속성등의 사용을 계속 시도
감사합니다 :)
selective후기발표
By Sang Jin Lee
selective후기발표
- 756