Hiio.com

무료 Trial을 통해 Brightics AI를 시작 할수 있게 되었다.

웹 브라우저를 통해서 솔루션을 사용해 볼 수 있다는 것은 엄청난 장점!!으로 느껴진다.

이제 사용법을 하나씩 습득해 보면서 마지막 목표는 BrighicsAI를 통한 빅데이터 분석 및 AI 활용과 개인 적으로 진행하는 프로젝트의 성능을 비교해 보는 것이다.

Step 1 

Brightics AI를 처음 실행하면 나오는 팝업에서 Go to Brightics.ai 를 선택해 듀토리얼 항목으로 진입하였다.

www.brightics.ai/kr/docs/ai/v3.7/tutorials/00_create_project_model

Brightics AI를 사용하기 위해서는 먼저 project 모델을 생성해야 하는 것 같다.

듀토리얼을 처음 부터 진행 해보도록 하자. 

1. Project 생성

첫 솔루션 화면에서 팝업 창을 끄도록 하자. 다음에 접속 할때 팝업창이 뜨는 것을 보기 싫다면 밑에 있는 체크박스를 체크하면 되지만, 아직은 처음이므로 그냥 끄도록 하자.

팝업 창을 끄면, 위와 같은 화면이 나오게 된다. sample로 들어가있는 여러가지 항목들이 들어가있는게 보인다. 

아직은 뭐가 뭔지 잘 모르므로 듀토리얼을따라가 보자.

My Project 2 옆에 있는 + 버튼을 클릭하면 create 와 import가 나오는데 새 프로젝트를 생성해야 하믄로 create를 클릭 해보자.

프로젝트 이름을 입력 하고, 설명을 입력하는 화면이 나온다. 적절한 이름과 설명을 입력하고 OK를 클릭 하자

프로젝트를 만들게 되면 좌측에 추가된 프로젝트 이름이 나오게 된다.

아직은 프로젝트 내에 만들어둔 Task가 없으므로 Task를 만들어 달라는 텍스트가 표시된다.

그럼 Task를 만들어 보자 

먼저 아래부분에 귀엽게 생긴 이모티콘이 보인다. 도움을 주는 챗봇 이지만 아직은 클릭 하지말고 옆에 + 버튼을 클릭하자

그러면 우리가 만들어 볼수 있는 Task 항목들이 나오는데 , 가장 처음에 있는 Workflow Modeler를 create 해보자

모델러를 생성하게 되면

Workflow editor가 실행되면서 Workflow이름과 설명을 입력 할수 있는 창이 뜨고, 우리가 사용할수 있는 기본 template와 샘플 template를 고를수 있다. 기본 template를 선택 하고 Ok를 클릭 하면, 빈 Workflow가 생성된다. 

이렇게 프로젝트를 만들어 보고, 그 안에 Task 중에서 Workflow Modeler를 만들어 보았다. 

다음으로는 데이터를 업로드 하는 듀토리얼을 진행해보자

빅데이터 분석 및 ML/DL을 공부하면서 삼성 SDS에서 개발하여 배포하고 있는 솔루션인 Brightics AI를 알게 되었다.

무료로 60일 trial 을 제공 하고 있기 때문에 이를 사용해보면서 기본적인 조작 방법을 살펴보고 응용가능한 부분과 현재 징행하고 있는 프로젝트 데이터를 이용하여 비교해보고자 한다.

우선 Brightics AI가 무엇인지 알아보자.

삼성 SDS 홈페이지에 접속

www.samsungsds.com/global/ko/index.html

DT 엔진 부분에 다양한 솔루션들이 있는 것을 볼수 있다.

이 카테고리 중에서 AI/Analytics를 클릭!

Brightics AI에 대한 설명을 간략히 볼수 있다. 

또는

www.brightics.ai/kr/

위 링크에 접속하면 brightics AI 소개와 함께 사용에 필요한 도움말들을 확인해 볼수 있다.

무료 trial 사용

무료체험 신청을 클릭 하거나, 메뉴 위에 보이는 My trial Beta를 클릭 하면 무료 배포 버전을 사용할수 있다.

솔루션 실행을 클릭! 해보자

Let's Start Bright AI

위 문구와 함께 첫 사용자가 무엇을 하면 좋을 지 나오는 화면과 함께 솔루션이 실행된다. 

우선은 어떤걸 해야 할지 모르는 상태이다.

3번째 항목인 Need More Tutorial?

Go to Brightics.ai 를 클릭

듀토리얼 부터 진행해보자.

안녕하세요.

이번 포스팅에서는 저번 시간에 만들었던 Text와 안내 지시선을 브라우저 크기 변화에 반응하여 원하는 위치에 계속 적으로 고정 시켜 보겠습니다.

제가 사용하고 있는 웹 브라우저의 가로와 세로 크기는 각각 1920*850입니다.

창을 최대화하여 위치를 잡아주었을 경우네는 창이 줄어 들면 처음 잡아 놨던 위치가 변하게 되어 지시선의 끝 부분이 제가 원하는 위치에 있지 않게 됩니다.

그래서 Jquery를 통해서 각 지시선이 반응하도록 만들어 줍니다.

function spanimgPose(selector, x, y) {

        var iwidth = $(window).width();
        var mainimg = $('.mainimg[data="' + selector + '"]');


        var leftT = (1920 - iwidth);
        var leftLength = x - leftT / 2;
        mainimg.offset({
            left: leftLength
        });

        var mainimgleft = mainimg.offset().left;

        // img left

        var iheight = $(window).height();

        var TopT = (850 - iheight);
        var TopLength = y - TopT / 2;
        mainimg.offset({
            top: TopLength
        });

        var mainimgTop = mainimg.offset().top; // img top

    };

먼저 함수를 만들어서 각 parameter를 정해줍니다.

저는 안내 Text의 selector와 초기 위치 x,y좌표값을 param로 하였습니다.

창의 가로와 세로 크기 값을 변수에 담아 줍니다. 그리고 창의 변화 값은 제 브라우저의 최대 크기에서 변화 후 창크기 값의 창이 를 변수에 담아 줍니다. 

브라우저가 작아 지거나 커질떄는 왼쪽과 오른쪽이 동시에 변화 하므로 2로 나누어 주면 한쪽의 변화 값을 알 수 있습니다.

이 변화값만큼 안내text가 이동하면 창크기가 변화 하더라도 제가 원하는 위치에 계속적으로 고정시킬수 있습니다. 

하지만, 창 크기를 실시간으로 변화 시킬때에는 대응을 하지 않게 됩니다.

그래서 이때는

window.resize()명령어를 사용하여 이 안에 제가 만들어 놓은 함수를 넣어 줍니다.

  spanimgPose("children", 540, 430);
    spanimgPose("acha", 1080, 200);

    function spanimgPose(selector, x, y) {

        var iwidth = $(window).width();
        var mainimg = $('.mainimg[data="' + selector + '"]');


        var leftT = (1920 - iwidth);
        var leftLength = x - leftT / 2;
        mainimg.offset({
            left: leftLength
        });

        var mainimgleft = mainimg.offset().left;

        // img left

        var iheight = $(window).height();

        var TopT = (850 - iheight);
        var TopLength = y - TopT / 2;
        mainimg.offset({
            top: TopLength
        });

        var mainimgTop = mainimg.offset().top; // img top

    };








    $(window).resize(function () {

        spanimgPose("children", 540, 430);
        spanimgPose("acha", 1080, 200);



    });

이렇게 되면 창크기가 변화 하더라도 안내 Text와 지시선은 제가 원하는 위치에 고정되어서 원하는 곳을 가르키게 됩니다.

다음 포스팅에서는 메인 이미지를 슬라이드 이미지 갤러리로 만들어 보겠습니다.

안녕하세요. 이번 포스팅에서는 Main-Image에 CSS Animation 효과를 적용시켜 보겠습니다.

현재 Main-Image에 있는 Text들과 지시선들은 하나의 이미지로 되어있습니다. 그래서 이러한 Web상에서 Text와 border를 통해서 만들어 css애니메이션 효과를 적용시켜 보겠습니다.

먼저 안내 Text들이 없는 이미지를 준비해서 Main-Image에 적용 시켜 줍니다.

그리고 나서 Main image 태그 안에 div과 span 태그를 만들어 주고 css를 통해서 위치과 크기를 잡아줍니다.

	<div class="mainimg" data="children">
		<span> Children Park</span>
	</div>

	<div class="mainimg" data="acha">
		<span>Acha Mountain</span>

	</div>

.mainimg {
    font-size: 25px;
    position: absolute;
    display: block;
}

.mainimg > span {
    display: block;
    color: white;
    text-align: left;
    width: 200px;
    height: 30px;
}

여기에 css animation 코드를 통해서 text들이 왼쪽에서 나타나고 안내선이 나타나겠끔 만들어 줍니다.

See the Pen poombNV by hongsam (@hongsamhc) on CodePen.

위 그림처럼 애니매이션 마지막 부분입니다. 

다음 포스팅에서는 Jquery 통해서 각 Text들을 고정시켜 보겠습니다.

안녕하세요. 

이번 포스팅에서는 메인이미지 부분에 그림이나 사진을 넣어 보겠습니다.

보통 그림이나 사진을 넣기 위해서는 HTML 에서 img 태그를 사용하거나, CSS background 또는 background-image를 사용합니다.

1.img tag

우선 먼저 img 태그를 사용하여 이미지를 삽입해 보겠습니다.

1 2 3 4

<div id="main-image">mainimage     <img src="" alt=""> </div>

cs

기존에 div 태그안에 img 태그를 넣은 모습입니다. 

img 태그에는 여러가지 속성이 있습니다.

위에서는 src와 alt속성이 있는데요.

 

각 속성은

 

src : 이미지경로

alt : 이미지묘사 내용

 

입니다.

 

여기서 위에서 보이는 이미지를 한번 넣어 보겠습니다.

 

 

1

<img src="/img/%EB%85%B9%EC%A7%80%EC%A7%80%EC%97%AD.jpg" alt="메인이미지">

cs

 

src에 이미지 경로를 설정해 주었습니다.

 

 

위와같이 이미지가 들어갑니다.

하지만 width값과 height값이 없기 때문에 이미지 파일의 원래 크기대로 들어간 모습입니다.

width와 height값은 img태그 내에서도 지정해 줄수 있지만, 저는 css를 통해서 해봤습니다.

1 2 3

#main-image img {     width: 100%; }

cs

width값만 100%로 설정했을때 이미자가 가로에 꽉차게 들어가게 되었습니다. 이떄 height는 비율에 맞춰 자동으로 값이 설정 되었기때문에 main-image부분을 빠져나와 footer부분을 가리게 됩니다.

 

height 값을 같이 주게 되면, main-image크기에 맞게 비율이 조정 되어 더이상 footer를 가리지 않게 되지만, 이미지의 크기가 달라져 원래의 비율에 맞지 않게 됩니다. 

2. CSS / background

이번에는 CSS / background를 통해서 이미지를 삽입해 보겠습니다.

background에 이미지를 넣을 때는 2가지를 사용할 수 있습니다. 

background 코드에 url 속성을 주거나 

따로

background-img에 url을 이용하여 이미지를 넣을 수 있습니다.

이미지를 넣고 나서는 background-repeat / background-size / background-position...를

통해서 이미지의 반복이나 크기,위치등을 조절 할수 있습니다.

제가 원하는대로 main-image안에 이미지가 비율에 맞게 들어간 모습입니다.

하지만 원래 이미지크기와 main-image의 크기가 다르다면 이미지가 잘릴수도 있습니다.

다음에는 메인이미지에 animate효과를 적용해 보도록 하겠습니다.