신입의

"신규 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. 요구사항

  1. 협의를 통해 복잡한 인터렉션 디자인 간소화

2-1. 요구사항

  1. 협의를 통해 복잡한 인터렉션 디자인 간소화
  2. eg.js 에서 제공하는 라이브러리 사용
  1. 협의를 통해 복잡한 인터렉션 디자인 간소화
  2. eg.js 에서 제공하는 라이브러리 사용
  3. 최대한 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

구현 1. padding: %로 특정비율 만들기

3-1. frame : width / height

구현 1. padding: %로 특정비율 만들기

1

2.5

9

16

2

1.5

3-1. frame : width / height

구현 1. padding: %로 특정비율 만들기

브라우저의 height 기준으로 width가 바뀌는 spec 이므로  사용할 수 없음

1

2.5

9

16

2

1.5

구현 2. calc() & vh 사용하기

3-1. frame : width / height

구현 2. calc() & vh 사용하기

3-1. frame : width / height

css내 수치들을 "계산"해주는 속성

구현 2. calc() & vh 사용하기

3-1. frame : width / height

css내 수치들을 "계산"해주는 속성

height: calc(140px - 22px);

구현 2. calc() & vh 사용하기

3-1. frame : width / height

css내 수치들을 "계산"해주는 속성

height: calc(140px - 22px);

"뷰포트"의 높이값 

구현 2. calc() & vh 사용하기

3-1. frame : width / height

css내 수치들을 "계산"해주는 속성

height: calc(140px - 22px);

"뷰포트"의 높이값 

100vw

100vh

구현 2. calc() & vh 사용하기

3-1. frame : width / height

css내 수치들을 "계산"해주는 속성

height: calc(140px - 22px); 
// 브라우저 전체 높이값
height: 100vh;

"뷰포트"의 높이값 

구현 2. calc() & vh 사용하기

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 형태

구현1. clip: rect()

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 파악

개발 적용시 상태 고려

  • 시행착오 감소
  • 일정관리에 여유
  • 코드품질 향상

계속해서 변화하는 웹표준

계속해서 변화하는 웹표준

대응 브라우저 상향

새로운 속성/기술 사용 시도

반복되는 시행착오

" 실력 "

새로운 속성/기술 사용 시도

반복되는 시행착오

결론

  1. 기획 & 스펙 정확하게 파악
  2. 개발과의 연계를 고려하여 작업
  3. 새로운 기술/속성등의 사용을 계속 시도

감사합니다 :)

Made with Slides.com