Edit in JSFiddle

 var text = `I'm [Front-end developer]<br/>I'm specialized in<br/>[HTML, CSS, Javascript, VueJS] etc`;

    var newText;

    function tt(text) {
        var text = text.split("<br/>");
        // []를 감지해서 없는건 {normal:""}, 아닌것은 {span:""}으로 만든다.
        var result = text.map(one=>{
            var temp = [];
            var isSpan = false;
            var tempObj = {};
            for(var i = 0; i < one.length; i++) {
                if (one[i] === "[") {
                    isSpan = true;
                    if(tempObj.normal || tempObj.span) {
                        temp.push(tempObj);
                    }
                    tempObj = {};
                    continue;
                }
                if (one[i] === "]") {
                    isSpan = false;
                    temp.push(tempObj);
                    tempObj = {};
                    continue;
                }
                if (isSpan === false) {
                    tempObj.normal = tempObj.normal || "";
                    tempObj.normal += one[i];
                }

                if (isSpan === true) {
                    tempObj.span = tempObj.span || "";
                    tempObj.span += one[i];
                }
            }
            if(tempObj.normal || tempObj.span) temp.push(tempObj);
            return temp;
        });
        return result;
    }
    newText = tt(text); 

    function showText(text, id) {
        var arrNum = 0;
        var subArrNum = 0;
        var textNum = 0;
        var subTag = "";
        var id = document.getElementById(id);

        var dom1 = "";
        var dom2 = "";
        var pre = ""

        console.log(text);
        function oneShowText() {
            subTag = text[arrNum][subArrNum].normal ? "normal" : "span";
            if(textNum >= text[arrNum][subArrNum][subTag].length) {
                textNum = 0;
                subArrNum++;
            }
            if(subArrNum >= text[arrNum].length) {
                subArrNum = 0;
                arrNum++;
            }

            if(arrNum >= text.length) return;

            subTag = text[arrNum][subArrNum].normal ? "normal" : "span";

            if(subArrNum === 0 && textNum === 0) {
                dom1 = document.createElement("p");
                id.appendChild(dom1);
            }
            if(textNum === 0) {
                if(subTag === "span") {
                    dom2 = document.createElement(subTag);
                    dom1.appendChild(dom2);
                } else {
                    dom2 = dom1;
                }
            }

            dom2.innerHTML += text[arrNum][subArrNum][subTag][textNum];
            textNum++;
            setTimeout(oneShowText, 100);
        }
        oneShowText();
    }
    showText(newText, "a");

<div class="intro">
		<div id="a"></div>
</div>

.intro{display:table;width:100%;height:200px;border:1px solid black;}
.intro div{display:table-cell;vertical-align:middle;margin:20px;padding:20px;border:1px solid black;}
.intro div p{margin-top:10px;}
.intro div span{background-color:black;color:white;font-weight:bold;}