FrontEnd/Vue.js

UX ν–₯상을 μœ„ν•œ micro-interactions(λ§ˆμ΄ν¬λ‘œμΈν„°λž™μ…˜)의 ν•„μš”μ„±κ³Ό Vue.js둜 λ§Œλ“  λ§ˆμ΄ν¬λ‘œμΈν„°λž™μ…˜ μ˜ˆμ‹œ μ½”λ“œ

κΉ€ν‰λ²”λ‹˜ 2021. 3. 1. 20:23
λ°˜μ‘ν˜•

 

Vue.jsμ—μ„œ λ§ˆμ΄ν¬λ‘œμΈν„°λž™μ…˜ μ‚¬μš©ν•˜κΈ°

πŸŽ‰ 마이크둜 μΈν„°λž™μ…˜

μš”μ¦˜ SNSμ—μ„œ ν”νžˆ λ³Ό 수 μžˆλŠ” μΈμŠ€νƒ€κ·Έλž¨μ˜ "μ’‹μ•„μš”", νŠΈμœ„ν„°μ˜ 경우 λ¦¬νŠΈμœ—μ€

μ‚¬μš©μžλ“€μ΄ μž‘μ€ λ™μž‘μœΌλ‘œ ν•΄λ‹Ή κ²Œμ‹œλ¬Όμ— ν”Όλ“œλ°±μ„ μ£ΌλŠ” 쒋은 방법이닀.

 

마이크둜 μΈν„°λž™μ…˜μ€ μ‚¬μš©μžλ“€μ΄ ν™ˆνŽ˜μ΄μ§€μ—μ„œ ν•˜λŠ” μž‘μ€ 행동듀을 

μ–΄λ– ν•œ λ³€ν™”λ₯Ό μ£Όμ—ˆλŠ”μ§€λ₯Ό μ‚¬μš©μž κ²½ν—˜μœΌλ‘œμ¨ λŠλ‚„ 수 있게 ν•΄ μ€€λ‹€.

 

μžμ‹ μ΄ ν–‰ν•œ νŠΉμ • 행동에 μžμ—°μŠ€λŸ¬μš΄ UI ν”Όλ“œλ°±μ„ μ£Όμ–΄

κ΅¬κ΅¬μ ˆμ ˆν•œ μ„€λͺ…이 없이도 μ‚¬μš©μžλŠ” λ³€ν™”λ₯Ό μ•Œμ•„μ°¨λ¦΄ 수 μžˆλ„λ‘ μ‹œκ°ν™”ν•˜λ©°

였λ₯˜ 및 λ‹€μŒ 행동듀을 μ§€μ‹œν•  수 있게 ν•œλ‹€.

 

μ™œ 마이크둜 μΈν„°λž™μ…˜μ„ μ‚¬μš©ν•΄μ•Ό ν•˜λŠ”κ°€?

마이크둜 μΈν„°λž™μ…˜μœΌλ‘œ μš°λ¦¬λŠ” μ‚¬μš©μžμ—κ²Œ 

  • μ–΄λ– ν•œ 일이 μ§€κΈˆ μΌμ–΄λ‚˜κ³  μžˆλŠ”μ§€
  • λ‹€μŒ λͺ©ν‘œλ₯Ό μœ„ν•΄ μ–΄λ– ν•œ 일을 진행해야 ν•˜λŠ”μ§€ 
  • κΈ°λ‹€λ¦Ό λ™μ•ˆ νŽ˜μ΄μ§€ μ΄νƒˆμ„ λ°©μ§€μ‹œμΌœμ£ΌλŠ” λ“±μ˜ κΈ°λŠ₯을 μ œκ³΅ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

 μ΄λŸ¬ν•œ 마이크둜 μΈν„°λž™μ…˜μ€ μ‚¬μš©μžμ—κ²Œ UX적인 κ²½ν—˜μ„ ν–₯상해 μ‚¬μ΄νŠΈλ₯Ό μ•ˆμ •μ μœΌλ‘œ μ΄μš©ν•  수 있게 ν•˜λ©°,

우리 μ‚¬μ΄νŠΈμ—μ„œ 쒋은 κ²½ν—˜μ„ μ£Όμ–΄ 긍정적인 인식을 κ°€μ§ˆ 수 있게 ν•œλ‹€.

 

그럼 ν˜„μ—…μ—μ„œ 자주 λ³Ό 수 있으며, μ‚¬μš©ν•  수 μžˆλŠ” 마이크둜 μΈν„°λž™μ…˜μ„ λ§Œλ“€μ–΄ 보도둝 ν•˜μž.

 

 

🎈자주 μ‚¬μš©ν•˜λŠ” 마이크둜 μΈν„°λž™μ…˜ μ˜ˆμ‹œ

 

μ•ŒλžŒ

μ•ŒλžŒμ˜ 경우 μ‚¬μš©μžκ°€ μ•ŒλžŒμ΄ λ°œμƒν•¨μ„ 인지할 수 있게, μ‹€μ œμ²˜λŸΌ 쒅을 ν”λ“œλŠ” νš¨κ³Όμ™€

μ•ŒλžŒμ΄ λ°œμƒν•œ 수λ₯Ό ν‘œμ‹œν•˜μ—¬ μ‚¬μš©μžκ°€ ν•΄λ‹Ή μ•ŒλžŒ μ•„μ΄μ½˜μ— 눈이 갈 수 있게 ν•˜λŠ” 방법이 μžˆλ‹€.

특히 μ•ŒλžŒ κ°œμˆ˜μ— κ°•λ ¬ν•œ 색을 λ„£μ–΄μ„œ μ‚¬μš©μžμ˜ μ‹œμ„ μ„ 가지고 올 수 있게 ν•˜λŠ” 것이 μ’‹μ•„ 보인닀.

 

μ•ŒλžŒ λ°œμƒ μ‹œ μ’… 흔듀림 효과

 

μƒ˜ν”Œ μ½”λ“œ(Vue.js)

<template>
    <div class="wrapper">
        <a :class="alarmEventClass" @click="alarmEvent">
            <img src="alarm.svg" />
            <span>1</span>
        </a>
    </div>
</template>
<script>
    export default {
        data() {
            return{
                alarmEventClass:'',
            }
        },
        methods: {
            alarmEvent() {
                console.log(this.alarmEventClass);
                if( this.alarmEventClass  === 'alarm-shake') {
                    this.alarmEventClass = '';
                } else {

                    this.alarmEventClass = 'alarm-shake';
                }

            }
        }
    }
</script>
<style>
    @import url('https://fonts.googleapis.com/css2?family=Staatliches&display=swap');
    .wrapper {
        padding:50px;
        text-align:center;
    }
    @keyframes alarm-shake {
        20%,60% {
            transform: rotate(20deg);
        }

        40%,80% {
            transform: rotate(-20deg);
        }
        100% {
            transform: rotate(0deg);
        }
    }
    .alarm-shake {
        animation-name: alarm-shake;
        animation-duration: .5s;
        animation-iteration-count:2;
        animation-fill-mode: both;
    }
    a {
        display:block;
        position:relative;
        width:200px;
        height:200px;
        margin:0 auto;

    }
    a img {width:200px;}
    @keyframes number-alarm {
        0% {
            transform: scale(0);
        }

        50% {
            transform: scale(1.1);
        }

        100% {
            transform: scale(1);
        }
    }
    .alarm-shake span {
        animation-name: number-alarm;
        animation-duration: 1s;
        animation-delay: 1s;
        animation-fill-mode: both;
    }
    span {
        position:absolute;
        top:15px;
        right:15px;
        display:block;
        width:60px;
        height:60px;
        line-height:60px;
        background:#EE6B60;
        color:#fff;
        border-radius:50px;
        font-size:26px;
        font-weight:bold;
        text-align:center;
        font-family: 'Staatliches', cursive;
        transform: scale(0);
    }
</style>

 

 

 

 

λ‘œλ”© 효과

λŒ€μš©λŸ‰ νŒŒμΌμ„ λ‹€μš΄λ‘œλ“œν•˜κ±°λ‚˜, DB μž‘μ—…, API 호좜 λ“± μ‹œκ°„μ΄ 였래 κ±Έλ¦¬λŠ” μž‘μ—…μ΄ μžˆμ„ 경우

μž¬λ°ŒλŠ” λ‘œλ”© barλ₯Ό μ΄μš©ν•˜λ©΄  μ‚¬μš©μžκ°€ 기닀림을 인지할 수 있으며, μΈν„°λ ‰μ…˜ 효과λ₯Ό ν†΅ν•˜μ—¬ ν•΄λ‹Ή νŽ˜μ΄μ§€ μ΄νƒˆμ„ 방지할 수 μžˆλ‹€.

 

λ‘œλ”©νš¨κ³Όκ°€ 적용된 μΈν„°λž™μ…˜ λ²„νŠΌ

μƒ˜ν”Œ μ½”λ“œ(Vue.js)

<template>
    <div class="wrapper">
        <a :class="state + ' button'" @click="submit">
            <div class="button-wrap">
                <div>SUBMIT</div>
                <div class="loading-div">
                    <span></span>LOADING
                </div>
                <div class="success-div">
                    <svg height="24" viewBox="0 0 24 24" width="24">
                        <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
                    </svg>
                    SUCCESS
                </div>
            </div>
        </a>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                state: 'submit',
            }
        },
        methods: {
            submit() {
                this.state = "loading";
                setTimeout(() => {
                    this.state = "success";
                    console.log("bbb")
                }, 3000);
            }
        }
    }
</script>
<style>
    @import url('https://fonts.googleapis.com/css2?family=Staatliches&display=swap');

    .wrapper {
        padding: 50px;
        text-align: center;
    }

    a.button {
        display: block;
        position: relative;
        width: 200px;
        height: 50px;
        margin: 0 auto;
        font-family: 'Staatliches', cursive;
        font-size: 26px;
        border-radius: 10px;
        color: #fff;
        background: #00A178;
        font-weight: 400;
        letter-spacing: 1px;
        overflow: hidden;
        cursor: pointer;
        transition:all ease-in .5s;
    }

    .button-wrap {
        transition:all ease-in-out .2s;
    }
    .loading .button-wrap {
        transform: translateY(-50px);
    }
    .loading.button {
        background:#22A6C0;
    }
    .success .button-wrap {
        transform: translateY(-100px);
    }

    .success.button {
        background:#4CC290;
    }
    div.button-wrap div {
        height: 50px;
        line-height: 50px;
    }

    @keyframes loading {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }

    .loading-div span {
        display: inline-block;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        border: 2px solid #CCDACD;
        border-top: 3px solid #2C656B;
        margin: 0 10px 0 0;
        animation: loading 1s ease-in-out infinite;
    }

    @keyframes success {
        0% {
            stroke-dashoffset: -50px;
        }
        70% {
            stroke-dashoffset: 0;
            transform: scale(1);
        }
        80% {
            transform: scale(1.3);
        }
        95% {
            transform: scale(1);
        }
        100% {
            transform: scale(1);
        }
    }

    .success svg {
        fill: transparent;
        stroke: #2C656B;
        stroke-width: 3px;
        stroke-dasharray: 50px;
        margin: -5px 2px 0 0;
    }
    .success .success-div svg {
        animation: success 2s ease-in-out;
    }
</style>

 

 


λ‚΄κ°€ μž‘μ„±ν•œ κ°„λ‹¨ν•œ μ½”λ“œ 외에도 전문가듀이 λ§Œλ“  λ‹€μ–‘ν•œ 마이크둜 μΈν„°λž™μ…˜ νš¨κ³Όλ“€μ€

μ•„λž˜ μ‚¬μ΄νŠΈμ—μ„œ μ˜ˆμ‹œλ₯Ό λ³Ό μˆ˜κ°€ μžˆλ‹€.

 

codemyui.com/

 

CodeMyUI

Handpicked collection of Web Design & UI Inspiration with Code Snippets. βœ… GIF preview βœ… HTML CSS copy paste code.

codemyui.com

 

λ°˜μ‘ν˜•