lightstone

The Personal MBA 를 읽다가 마음에 드는 문장을 찾았다.
Value Delivery - Barrier to Competition part(참조 링크) 에 적힌 문장이다.

Your competition will take of itself.
- 경쟁에 대해서는 신경 쓰지 마세요. 알아서 잘 될 겁니다.(gemini 해석)
- 아둥바둥 상대를 따라하고 경쟁하지 말자. 경쟁은 나와 하는 것이다.(내 의역)

문장을 보자마자 여러 생각이 겹쳤다.

다른 동료를 보며 부족한 부분, 더 잘하는 부분들을 고민하던 과거가 떠올랐다.

서비스를 서로 카피하며 아이디어를 가져가는 업계 현황이 생각났다.

그리고 우리나라는 어릴 때부터 서로 경쟁하는 사회다.

가치보단 경쟁이 익숙한 나, 업계, 사회인 셈이다.

뭔가 놓치고 있는 느낌이 들었다.

경쟁보단 가치에 집중한다.

Barrier to Competition part 에서 말하는 핵심 논점이다.

Apple 과 BlackBerry 가 핸드폰 시장에서 경쟁했던 적을 이야기한다.

Apple 은 IPhone 을 통해 유저들에게 줄 수 있는 가치를 계속 발전시켰다.

BalckBerry 는 Apple 을 따라하는 데 열을 올렸다.

HP, Asus, DELL 이 열심히 노트북 경쟁을 하고 있을 때,

Apple 은 IPad 를 출시하고 또 다른 가치를 만들어 냈다.

결국 Apple은 시가총액 1등 기업, 1년에 520조원을 버는 기업이 되었다.

나는 지금 어떤 상황인가?

어떤 가치를 만들고 있는가?

어떤 시야와 관점을 가지고 일을 하고 있는가?

내가 만드는 서비스는 유저들에게 가치를 제공해주고 있는가?

단순히

남이 했던 작업이 반응이 좋아서,

이 기술이 새로 나와서,

가치보단 경쟁을 하고 있지 않았는지 생각해본다.

AI 인공지능이 발전함에 따라 인당 생산성이 올라갔다.

기업들은 신규 채용을 줄이고 생산성 도구들을 도입하고 있다.

필요한 지식을 배우는 걸 넘어 업무 방향성도 AI와 함께 논의하고 의사결정하고 있다.

여기서 한 가지 궁금한 점이 생겼다.

AI로 업무 생산성은 높아졌는데 성과도 잘 내고 있을까?

자기경영노트(피터드러커 저)는 팀원 추천으로 읽게 되었다.

"성과를 내는 경영 리더" 되는 법을 알려준다.

1967년, 무려 60년 전에 나온 고전 책이다.

생각과 정보를 발산하기 쉬운 지금과 더 어울리는 느낌을 주는 책이었다.

가장 가슴에 와닿은 포인트는

"내가 기여할 부분은 어떠한가" 라는 질문을 던지는 방법과

최고 성과를 내기 위해 노력하는 습관이었다.

적당한 자기 만족 수준에서 멈췄던 경험이 있었기에 피드백을 받는 느낌이었다.

그리고 기술 발전으로 기여할 수 있는 부분이 다양해졌기에

기여에 대한 고민이 가치가 있다고 느꼈다.

다음으론 우선 순위에 대한 이야기에 빠지게 되었다.

잘하는 경영리더들은 높은 우선순위에 집중하며 후순위는 신경 쓰지 않는다고 한다.

우선순위는 회사에서 업무할 때 공감이 되었다.

회사 업무는 생각보다 생성되는 텀이 빠르고, 다양한 상황에서 치고 들어오는 경우가 많았기 때문이다.

AI 가 발전하기 전 우리는 이미 생산성 향상을 인터넷을 통해 경험했다.

그리고 AI를 통해 할 수 있는 일은 무궁무진해졌고,

해보지 않은 업무조차 쉽게 만들 수도 있다. 업무 장벽이 허물어졌다.

결국 할 수 있는 기여는 무엇이고, 최고 수준으로 나아가는 방법에 대한 고민이

성과를 잘 내는 방향으로 이끌어줄 것이라 믿는다.

회사에서 일을 하다보면 막히는 순간들이 있다.

이론이 어려워서, 해보지 않아서,

답이 정해져 있지 않아서 등 이유는 다양하다.

회사 뿐만 아니라 인생도 마찬가지다.

어떻게 하면 인생을 잘 살 수 있는 걸까?

돈을 많이 벌고 싶은데 가능할까?

친구들, 부모님, 동료들과 잘 지내고 싶은데...

함께 자라기는 이런 불명확하고 불확실한 문제들을

풀 수 있는 방법을 알려준다.

개발을 중점에 두고 쓴 책이지만 인생에도 활용 가능하다.

책에서 먼저 살펴볼 내용은 자라기다.

자라기 파트에서 기억에 남는 건 2가지다.

1. '야생 학습'을 잘 하는 방법(타당성과 피드백 높이기)

2. 복리로 자기 성장하는 법

야생 학습이란 불분명한 목표와 명확한 평가가 없는 환경에서 학습하는 방식을 말한다.

그리고 저자는 야생 학습을 잘 하려면 타당성과 피드백을 높이라고 한다.

행동이 결과에 어떤 영향을 미치는 지 바로 알 수 있게 만들고,

짧은 주기로 본인 또는 타인에게 피드백을 구하는 게 핵심이었다.

복리로 자기 성장하는 법은

자기가 성장한 부분을 활용해서 다른 성장을 하는가?에 대한 이야기였다.

저자는 이 방법을 지수적 성장이라고 불렀고,

어제보다 나은 오늘을 만드는 선순환 방식이었다.

자라기 파트를 읽으면서

내가 일하는 환경이나 습관이 잘 자라는 방향인지 고민하게 되었다.

환경은 정말 좋은 상황으로 보이는데,

습관은 애매했다.

지식이 들어오는 인풋과 내보내는 아웃풋 사이 간극이 크기도 하고

피드백을 잘 하고 있는지 의문이 들었다.

함께 파트에선

결국 일은 혼자 할 수 없고 사회적 자본이 받춰줘야 한다는 게

핵심이라 느껴졌다.

누가 봐도 객관적으로 좋지만 우리 상사가 싫어한다면..?

설득해야 한다. 근데 평소에 상사와 유대감도 없고

사회적인 인간관계를 쌓아놓지 못했다면 아마 실패할 확률이 높다.

저자는 이런 현상을 극복하기 위해 소통을 잘해야 된다고 말한다.

그리고 협력적인 분위기를 만드는 게 중요하다고 말한다.

더 구체적인 방법은 인간관계론(데일 카네기 저) 

내용을 읽고 실천해보면 좋을 것 같다.

마지막으로,

이 책은 "함께 자라기" 방식이 결국 애자일이라는

소프트웨어 개발론에 녹여져 있다고 말하면서 핵심을

다음과 같이 말한다.

고객에게 매일 가치를 전해라.

여기서 고객은 소프트웨어를 사용하는 실제 고객뿐만 아니라

현 상황에서 모든 이해관계자들을 뜻한다.

"매일" 실천하면서 타당성과 피드백을 높이고,

"가치를 전달"하면서 협력을 하자고 말한다.

다시 한 번 생각한다.

나는 정말 고객에게 매일 가치를 전하고 있는가?

Stick! 의 두 번째 가르침은 의외성이다. 메시지에는 내 고정관념을 깨는 의외성이 있어야 한다는 것이고,

그 의외성으로부터 새로운 인지를 유발시켜야 오래 기억남는 메시지라 했다.

예를 들어, 평화로운 노래가 나오는 자동차 광고에서 갑작스레 빵! 하는 소리와 함께 사고가 나고, 음주운전을 하지 말라는 문구가 나오는 것.

평화로운 자동차 광고인 척 고정관념을 만들어 놓고, 그걸 깨버리는 것이다.

그리고 지속적으로 흥미를 유발하기 위해선 가지고 있던 지식에서 공백을 만들어 내고,

그 공백을 채우는 과정이 필요하다고 했다. 인간은 지식의 공백을 갖고 있는 것을 매우 견디기 힘들어하는데,

영화의 결말을 보기 위해 2시간을 꾹 참고 기다리는 것이 그 일종이라고 했다.

미스테리가 있어야 많은 사람들이 꾸준히 관심을 가지게 되는 것이다.

생각해보니, 블라인드는 회사에 대한 다양한 이야기를 궁금하게 만드는 엄청난 능력이 있기에 성공한 것 같다.

이 책은 나의 메시지가 남들에게 어떻게 인식되고 기억에 남는지를 중심적으로 이야기하고 있다.

하지만, 나의 메시지를 가장 처음 보는 사람은 누굴까?

바로 나일 것이다. 그래서 나는 나의 메시지를 활용해서 나를 어떻게 성장시킬 수 있는지 생각을 해보았다.

그리고 앞서 첫 번째 독후감을 본 독자라면 알겠지만, 단순함을 가지고 나를 표현했었다. 이 작업은 내 삶을 정의하면서

내 모든 삶의 행동과 생각들을 정리하고자 했기 때문이었다.

이와 비슷하게, 의외성은 또 나를 어떻게 성장시킬 수 있을 지 고민했다.

의외성, Unexpectedness 에서 제일 중요한 건 나의 고정관념과 지식을 깨부시는 것이라고 했다.

의도적으로 공백을 만들어 내고, 그 공백을 채우면서 나의 생각과 신념들이 더 발전하는 것이라고 말했다.

그래서 우선적으로는 내 고정관념과 지식을 부시는 것으로 시작을 할 것이다.

또 놀라운 것은, 이러한 이야기를 역행자에서도 했다는 것이고, 그 책에서는 자의식 해체와 유전자 오작동에 대해 이야기했었다.

(궁금하면 직접 찾아보는 것을 추천한다.)

그렇다면, 어떻게 고정관념과 지식을 부시는 것을 할 수 있을까?

여기서의 핵심은 내가 경험하지 못한 것들을 경험하도록 노력하는 것이다.

예를 들어, 경제와 미술 또는 예술에 관한 책들을 다양하게 읽으면서 내 고정관념을 서서히 부시는 것을 진행하는 것이다.

평상시에 컴퓨터 분야에 몰두되어 있었기 때문에 이런 작업을 하면서 느끼는 감정들은 충분히 나를 변화시킬 수 있을 것이다.

또한, 어떤 일이 나에게 발생했을 때, 나의 감정이 평상시보다 다르다면,

그 감정을 최대한 느껴서 무슨 이유로 나의 감정이 불편한지, 좋은지를 깨달으려고 노력할 것이다.

마지막으로, 또 중요한 점이 하나 있다.

아무리 지식의 공백을 만든다고 해도, 그 안에 들어가는 배경 지식이 없으면 크게 흥미를 느끼지 못한다는 것이다.

이럴 때 제일 중요한 건 자신이 이미 알고 있는 지식부터 시작해서 최대한 필요한 배경 지식을

한 번 경험해보고, 그 다음에 깊은 생각을 해보는 것이다.

나에게는 경제가 그런 종류에 속했는데, 아직도 배경 지식이 너무 없다보니 무엇에 흥미를 가져야 하는 지 모르겠다.

그래도 나는 나를 가꾸어 나가는 것에 있어서는 매우 적극적이고 흥미를 가지고 있으니

경제라고 하기 보다는, 나의 삶과 같이 나아갈 동반자라는 생각으로 돈과 경제를 다루어보려고 한다.

머지 않아, 경제에 대한 지식의 공백을 만들어 내고 차근차근 나아갈 것이다.

나의 선생님들 카테고리는
어떤 종류도 상관없이 무언가를 배웠고 공유하고 싶을 때
글을 쓰는 곳입니다.

Stick! 이라는 책을 읽고, 내용은 심오하면서도 간결한 메시지가 중요하다는 것을 깨달았다.

그래서 나를 스스로

좋은 영향력을 끼치는 인플루언서
The influencer who makes you happy

라고 정했다.

여러 상황에 있어서 행동을 결정하는 제일 큰 요인이며,

나는 많은 사람들에게 좋은 영향력을 끼칠 것이다.

Stick! 이라는 책의 첫 핵심 가치는 단순함이고,

단순함 = 핵심 + 간결함 이라고 정의를 내렸다.

또한, 단순할수록 끼치는 영향력이 크고, 어떤 상황에서든 올바른 생각과 행동을 할 수 있다고 한다.

이를 보면서 나의 삶을 단순하게 표현하고 싶다고 생각하게 되었고,

위와 같이 포장함으로써 항상 마음 속에 품고 다니려고 한다.

좋은 영향력을 끼치고 싶은 이유는 단순한데,

나 혼자 잘 먹고 잘 사는 것보다 같이 잘 먹고 잘 사는 게 훨씬 행복하기 때문이다.

그리고, 좋은 것을 공유한다는 건 내가 그럴만한 사람이라는 것을

증명해내는 것이기 때문에, 점점 훌륭해지는 길이라고 생각한다.

그래서 위와 같은 문장이 나에게 있어서 핵심적이면서도 간결한 문장이라 볼 수 있다.

나에 대한 생각을 하면서, 자연스럽게 나의 다양한 상황에서의 단순함도 챙기고 싶어졌다.

예를 들어, 회사에서의 나는 Data Engineer를 맡고 있기 때문에

Data Engineer를 단순하게 표현하고 싶어지기도 했고,

여자친구와 있을 때에는 나의 사랑을 단순하게 정의해보고 싶기도 했다.

아마 상황마다의 단순함은 내가 세운 삶의 한 문장과 얼라인이 맞아있으며,

조금 더 구체적인 문장이 될 것이다.

단순함, Simplicity 를 무기로 삼은 현재의 내가 어떤 방향으로 흘러갈지 궁금해진다.

Stick! 스틱은 우리 일상에서 어떠한 메시지가 가장 오래 기억이 남고, 두고두고 회자가 되는지 분석한 책이다.

오래 각인되는 메시지는 핵심을 가지고 있고, SUCCESs 특성을 가지고 있다고 주장하는데

SUCCESs 는 핵심 가치들의 앞 글자를 따서,

'간단하고 기발하며 구체적이고 진실되며 감정을 불러일으키는 스토리'를 뜻한다.

위의 독후감은 SUCCESs 에서 S 부분인 Simplicity만 보고 쓴 글이다.

그래서 내가 정의한 한 문장이 뇌리에 박히지 않을 수도 있다.

하지만 앞으로 UCCESs 에 대한 부분도 읽을 것이고,

이를 토대로 더 좋은 문장들과 메시지를 만들어 낼 수 있을 것이라 생각한다.

100쪽 정도밖에 읽지 않았지만, 이 책은 내 삶에 점점 큰 영향력을 끼칠 것이라는 것을 알게 되었다.

글을 잘 안읽고, 안 쓰던 나였기에, 이런 메시지에 대한 생각을 크게 해보지 않았던 나였기에

생각을 이야기할 때 직관에 의해서 이야기를 했었기에,

그 동안 흘러간 내 이야기도 많았을 것이다.

이 책을 다 읽으면, 조금씩 변화가 있을 것이고

매년 복리로 변화가 생긴다면 엄청난 변화가 생기지 않을까 싶다.

어떻게 메시지를 전달해야 하는가를 궁금해 한다면,

Stick! 책을 한 번 읽어보면 좋겠다

나의 선생님들 카테고리는
어떤 종류도 상관없이 무언가를 배웠고 공유하고 싶을 때
글을 쓰는 곳입니다.

지난 편에 이어서 자세한 이야기를 하기 위해 2편으로 돌아왔습니다!!

2편은 웹을 어떻게 만들었는지 설명해보려고 해요.

최대한 간단히 설명해보고 넘어가보겠습니다. 

간단히 설명하고 넘어가려 했는데, 생각보다 길어져서, 서버는 3편에 소개드리려고 해요. 우선 웹부터 보시죠!

Web Site 개발

웹 사이트 코드에 보면 사이트의 전부를 볼 수 있는데요, 정말 간단한 100줄 정도 되는 코드입니다!

그만큼, 들어간 내용이 없고 오로지 필요한 정보만 보여지게끔 만들어 놓았어요.

그리고 처음엔 검색기능이 없었는데, 나중에 추가해서 만들었습니다!

자세히 코드를 들여다 봅시다!

 let list = new Vue({
    el : '#app', 
    data : {
        search: '',
        searchedData: [],
        header: ["번호", "영업점 정보", "설문조사 현황"],
        original: [],
        ranking: [],
        names: []
}})

먼저 사이트를 이루는 데이터(변수)는 간단히 설정해두었고, Vue라는 것을 이용했습니다!

search와 searchedData는 검색 기능을 위한 변수인데, search라는 키워드에 값이 입력되면

searchData에 검색된 데이터들을 가지는 변수로 만들었어요.

header는 단순히 테이블의 열 이름들이고,

original은 제가 받아온 설문조사 현황들에 대한 모든 정보를 가지고 있는 리스트,

ranking은 테이블을 나타낼 수 있는 리스트,

names는 검색의 자동완성 기능을 위한 영업점 이름 정보들을 담고 있는 리스트에요.

이제 이 변수들로 데이터를 보여줄 거에요.

<div class="md-layout md-alignment-center-center">
    <table>
        <thead>
            <th v-for = "item in header" style="background-color: white">{{item}}</th>
        </thead>
        <tbody>
            <tr v-for="line in ranking">
                <td v-for="item in line">{{ item }}</td>
            </tr>
        </tbody>
    </table>
</div>

위 코드는 제일 핵심인 table을 보여주는 코드에요. 생각보다 매우 간단하죠?

v-for이 Vue 안에 있는 리스트 안에 있는 데이터를 보여줄 수 있는 것이라 생각하면 편한데요,

thead 에서는 table head 정보를, tbody에선 ranking 정보를 보여줬어요.

이렇게 만들면 다음과 같은 테이블이 만들어집니다!

물론 ranking이라는 테이블에 데이터가 있어야 가능하긴 해요.

이젠 ranking에 어떻게 데이터를 가져올 수 있는지 코드로 보여드릴게요.

 let list = new Vue({
    created(){
        axios.get('http://survey2022.kro.kr:5000/api/data')
        .then((res) => {
            list.ranking = res.data;
            list.original = res.data;
            for(let i=0; i<res.data.length;i++){
                list.names.push(res.data[i].name);
            }
            console.log()
        })
        .catch((err)=>{
            console.log(err);
        })
        .finally(()=>{
            console.log("Finish call data");
        })
    }
}

created 함수는 Vue라는 컴포넌트를 만들면서 실행되는 함수라 이해하시면 되고,

저는 사이트가 열릴 때 랭킹을 보여줘야 하기 때문에 created 함수에서 데이터를 가져올 수 있도록 했어요.

그래서 http://survey2022.kro.kr:5000/api/data 라는 제가 만든 서버의 api를 활용해서

설문조사 데이터를 가져오도록 했습니다!

가져오고 나서는 단순하게 ranking, original, names 리스트에 필요한 데이터만 넣었어요.

ranking과 original을 만든 이유는 검색을 하고 나서 다시 원래의 데이터를 보고 싶을 때

original을 사용할 수 있게끔 만들기 위해서였습니다!

searchMethod(){
    if(this.search){
        this.searchData = this.original.filter(
            (data) => { 
                return data.name.includes(this.search);
            }
        );
        this.ranking = this.searchData;
    }else{
        this.ranking = this.original;
    }
}

그래서 위와 같은 searchMethod()라는 function을 만들었고, 검색을 하는 경우에만

ranking 리스트에 searchData를, 검색 키워드가 없는 경우엔 original 리스트를 가질 수 있게 해두었어요.

이게 front 웹 사이트의 코드 끝입니다! 다른 건 HTML의 기본 구조와

Vue 를 사용하기 위한 헤더? 정도입니다:) 핵심 코드는 다 다뤘어요.

하지만 여기서 끝을 내면, 사실 웹 사이트를 볼 수 없는데요, 컴퓨터 안에 있는 파일을

다른 사용자들이 들어올 수 있도록 하려면 웹 서버라는 게 필요해요.

1편에서 소개 드렸던 것 중에 Nginx라는 친구가 웹 서버이고 컴퓨터 안에 있는 웹 사이트 파일을 볼 수 있게 해주었습니다!

server {
    listen 80 default_server;
    listen [::]:80 default_server;
    root /home/ubuntu/QuestionCheckSystem;
    index QCS_2.html;
}

이 설정은 Nginx.conf 의 설정이고, 간단한 의미로는 root인 저 폴더에서 QCS_2.html이라는 파일을 80번 포트로

보여주겠다라는 의미에요. 그리고 기본적인 http:// 로 시작하는 url들을 80번 포트를 쓰기 때문에

제 QCS_2.html이라는 프론트엔드 파일을 볼 수 있게 되는 거에요.

Nginx는 생각보다 다루기 어려운데, 구글에 많이 나와 있으니 찾아보면서 공부하시는 것도 좋을 것 같아요!

설정도 정말 많은 것들이 있어서 다양한 기능들을 설정할 수도 있습니다.

그리고 저는 AWS의 EC2를 사용했습니다

아무래도, 제 컴퓨터에 직접 포트를 열어서 데이터를 보여주기에는 보안의 위험이나 컴퓨터를 계속 켜두어야 하는 등의

문제가 있을 것이라 예상해서 가상 머신을 사용하기로 했어요.

그리고 이메일만 있으면 12개월 동안 무료로 정말 낮은 성능의 컴퓨터를 제공해주는 AWS가 있기에

AWS의 EC2로 컴퓨터를 사용했습니다.

Vue.js를 사용한 이유

Vue.js를 사용한 이유는 동적으로 데이터를 처리하는 걸 편하게 하고 싶었기 때문이에요.

프론트를 잘 모르지만, Vue를 가지고 data 처리를 하면 쉽게 데이터를 바꾸는 것을 할 수 있다는 것을 알았고,

정말 단순한 형태로만 사이트를 만들고 싶었어요. 그래서 script 태그 안에 Vue라는 객체를 만들어서

사용했습니다.

물론, Vue가 제일 좋은 도구라고 말할 순 없는데요, react나 일반적인 javascript + html도 충분히 만들 수 있어요.

하지만, 제일 가볍게(덜 건드리고) 만들 수 있는 형태가 Vue라고 생각했었을 뿐입니다!

프론트를 잘 모르니 가장 쉬운 걸 선택했다고 말씀드릴 수도 있어요.

AWS의 EC2(컴퓨터)를 다른 사람들에게 보여줄 수 있는 이유

AWS에는 탄력적 IP 라는 고정 IP를 받을 수 있는 기능이 있습니다! 그래서 제 EC2(작은 컴퓨터)에

고정 IP를 할당받을 수 있어요. 할당을 받고 나면, http://129.283.29.59/ 와 같은 형태로 EC2에

접근을 할 수 있죠.

물론 제 웹 페이지를 저렇게 IP 주소로 내보낼 수도 있는데, 좀 더 멋있게 내보내기 위해

DNS 서비스들을 찾아봤어요. 간단한 사이트기 때문에 돈을 내고 싶진 않아서

무료 도메인을 찾아봤고, kro.kr 로 끝나는 도메인을 얻고 연결할 수 있었습니다.

그렇게 제 사이트는 결국 http://survey2022.kro.kr/ 와 같은 형태를 띄게 되었어요.

이제 다른 사람들은 위 링크로만 들어오면 제 웹 사이트들을 볼 수 있게 됩니다:)

회고

프론트 웹 사이트를 만들어 본 적이 많지 않으니 정말 필요한 것만 찾아서 만들었어요.

이게 완성도나 깊이가 있진 않지만, 개발 시간을 많이 줄여주는 방향인 것 같아요.

물론 현업에서는 훨씬 더 정교하고, 깊이 있게 설계되어 개발이 되지만, 간단한 사이트 만들 때는

이런 방법을 사용하는 게 좋다고 느끼게 되었습니다.

앞으로 가끔 재밌는 것들을 만들어 볼까 해요. 회사에서도 다른 분들에게 도움이 되는

서비스와 자동화가 이루어진 서비스를 만들면 재밌을 것 같다는 생각도 했습니다!

그럼 3편에서 봐요~!

안녕하세요, 재미있고 행복한 일을 만드는 개발자 라스톤입니다!

오늘은 설문조사 현황을 항상 볼 수 있는 사이트를 만들어보았는데요, URL 주소 하나로 300개가 넘는 설문조사 현황을 계속 추적할 수 있는 사이트입니다. 이 과정은 웹 사이트, 서버, 배치 프로그램을 활용해서 만들었습니다! 그리고 제작 과정이 프론트+서버 개발을 궁금해하시는 다른 분들께 도움이 될 것 같아 글로 남겨볼까 해요!

(코드가 궁금하시면 Github에 들어오시면 됩니다)

어쩌다가 만들게 되었는지?

설문조사를 하면 위에 사진처럼 답변 건수 및 결과 확인 등을 통해서 자세한 설문조사 결과를 확인할 수 있는데,

갑자기 300개가 넘는 설문조사마다 몇 명이 응답했는지 체크해야 할 일이 생겼습니다. 그리고 혼자만 해당 설문조사를 보는 게 아니라,

300개가 넘는 지점에서 각 지점별 설문조사를 확인했어야 했어요.

그리고 해당 계정은 관리자 계정이기 때문에 지점에 계신 분이 자신의 지점에 대한 설문조사를 확인할 수 없었던 구조였습니다.

설문조사의 기간은 2주가 넘었고, 설문조사 기간동안 지점 별로 굉장히 많은 요청을 받을 게 눈에 보였습니다!

예를 들어, 다음과 같이 요청이 들어올 수도 있었어요.

하루 동안의 요청(예상 수치는 하루에 약 100~200번 정도 였습니다)

01:34 - 16번 설문조사를 몇 명이 참여했는지 알려줘

02:28 - 19번~20번 설문조사를 몇 명이 참여했는지 알려줘

05:50 - 68번 설문조사 현황을 알려줘

10:30 - 8번 설문조사 현황을 알려줘

.

.

.

22:30 - 오늘 설문조사 현황을 다 정리해줘

현재의 상황에서는 해당 요청들을 전부 다 사람이 확인해야 했습니다.

그래서 설문조사 정보를 웹 사이트로 나타내면 훨씬 효율적이고 시간을 절약할 수 있을 것이라 생각했어요.

(이러한 요청들을 제 지인이 전화 받고 처리했어야 했고,

하루에 100~200통의 전화를 받는다는 건 업무를 하면서 정말 쉽지 않죠..ㅠㅠ 어떻게든 해결하고 싶었습니다)

그렇게, 궁금한 설문조사가 있다면 직접 찾아볼 수 있는 설문조사 현황 사이트를 만들게 되었어요.

어떻게 만드는가?

처음에 구상했던 프로그램 동작 방식입니다! 간단하게 정리하면 HTML로 이루어진 웹 사이트가 있고,

데이터를 만드는 배치 프로그램이 데이터를 10분마다 업데이트한 뒤, 서버가 데이터를 모아서 웹 사이트로 넘겨주는 방식입니다.

이렇게 되면, 사용자들은 실시간 까지는 아니지만 10분마다 업데이트 되는 데이터를 URL를 통해 계속 볼 수 있습니다.

용어 정리!

서버(server) : 사용자들의 요청들을 받고 처리하는 역할을 하는 컴퓨터

배치 프로그램(batch) : 특정 시간마다 실행되는 프로그램. 데이터 수집을 배치 프로그램으로 만들었습니다.

HTML : 기본적인 웹 사이트를 이루는 언어.

URL : 특정 웹사이트를 들어가기 위한 인터넷 주소. (ex, https://google.co.kr)

Vue : 웹 사이트를 좀 더 생동감 있고, 효율적으로 만들 수 있는 프레임워크.

Flask : 서버를 쉽게 만들 수 있는 Python 기반 프레임워크.

Nginx : 외부에서 들어온 요청을 내부의 프로그램이 받을 수 있도록 네트워크 처리를 해주는 도구

Python : 다양한 기능들을 내장하고 있는 인터프리터 방식 프로그래밍 언어. (한 줄씩 코드를 해석하고 실행해주는 방식으로 동작합니다.)

Amazon-web-services(aws) : 클라우드 방식으로 컴퓨터 자원 및 기능들을 제공하는 서비스.

aws-ec2 : 컴퓨터를 쉽게 만들어주는 서비스입니다. Linux 운영체제 기반으로 사용했습니다.

aws-rds : 데이터베이스를 쉽게 만들어주는 서비스입니다. Postgresql를 사용했습니다.

프레임워크(Framework) : 여러 기능들을 많이 가지고 있어, 쉽게 개발할 수 있도록 만들어진 도구 모음.

여기서 개발을 좋아하시는 분이라면 전반적인 이해가 되셨을 것이라 생각이 드는데요,

이번 포스트에선 데이터 흐름과 결과 페이지를 보여드릴게요!

그리고 각 구성요소들 별로 어떻게 개발을 진행했는지는 다음 포스트에서 말씀드리겠습니다.

데이터 흐름

데이터가 어떻게 흐르고 사용자들에게 보이는 지 흐름을 적어본 거에요.

제가 만든 설문조사 사이트는 총 7개 단계로 데이터가 흐릅니다! 사용자들은 이 과정을 통해서 설문조사 데이터를 보게 돼요.

1. 사용자(User)가 웹 사이트에 들어온다.
2. 웹 사이트에서 서버에게 설문조사 데이터를 달라고 요청한다.
3. 서버는 데이터베이스에 적재되어 있는 설문조사 데이터를 가져온다.
4. 가져온 데이터를 가공하여 웹 사이트로 설문조사 데이터를 전달한다.
5. 웹 사이트는 받은 데이터를 지정된 스타일에 맞게 나타내준다.
6. 사용자는 보기 좋게 만들어진 데이터를 보면서 원하는 정보를 찾게 된다.
7. 배치 프로그램은 10분마다 설문조사 사이트에서 정보를 얻어와 데이터베이스에 데이터를 적재한다.

결과 페이지

어떻게 보면 간단한 형태의 표인데요, 각 설문조사들마다 몇 명이 설문조사를 진행했는지 바로 알 수 있는 페이지입니다!

간단한 검색 기능도 구현을 해서 사용자들은 자신이 원하는 설문조사 결과를 볼 수 있어요.

(총 300개 가까이 설문조사 데이터가 한 눈에 보입니다)

단순한 웹 사이트에 얼마나 많은 요청이 있는지 확인해보니, 평균적으로 하루 150번 정도 웹 사이트 요청이 있었고,

설문조사 마지막 날에는 330건 정도의 요청이 발생했습니다! 만약 이 사이트가 없었더라면, 제 지인이 하루에 150번 정도

전화를 받았을 것이고, 마지막 날에는 330건 정도 전화를 받았을 거에요.

이 사이트 덕분에 전화 요청을 했을 사람도, 지인도 시간을 절약할 수 있었습니다!

느낀 점

지금까지 여러 개발을 해봤었는데, 사람들이 사용하는 서비스를 만드는 게 흥미도 있고 재밌다는 것을 배웠어요.

역시 기술은 사람들이 써야 조금 더 빛을 발할 수 있는 듯 해요. 그리고 사람들의 시간을 세이브할 수 있는 사이트를 만들었던 것이 매우 뿌듯했습니다.

왜냐하면, 시간은 항상 소중하다고 생각하기 때문이에요. 효율을 추구하기 때문에 반복작업을 없앴다는 거에 큰 의의를 두었고, 목표를 이루어서 좋았습니다.

또한, 개발 한 것 중에 이 간단한 사이트 만큼 트래픽이 나왔던 적은 없었던 것 같아요.

개발 기간도 짧았고, 큰 기술이 들어간 것도 아닌데 말이죠.

어떻게 보면, 사람들이 필요한 것을 개발하는 것이 더 중요한 것이라고 생각하게 되었습니다. 앞으로는 더 많은 사람들이 쓸 수 있는 것들을 개발하고 싶네요.

긴 글 읽어주셔서 감사드리고, 자세한 개발 과정은 다음 포스트에 적어볼게요!