3구 개발 및 보안

1. UI 프로토타입의 개요

프로토타입은 사용자 요구사항을 기반으로 실제 동작하는 것처럼 만든 동적인 형태의 모형, 테스트가 가능하다.

• 사용자의 요구사항을 개발자가 맞게 해석했는지 검증하기 위한 것, 최대한 간단하게

• 일부 핵심적인 기능만을 제공, 최종 제품의 작동 방식을 이해 시키는데 필요한 기능은 반드시 포함

• 사용자의 요구사항이 모두 반용될 때까지 프로토타입을 계속하여 개선하고 보완해야 한다.

• 프로토타이핑 및 테스트를 거치지 않고는 실제 사용자와 제품 간의 상호 작용 방식을 예측하기 어려우므로 실제 사용자를 대상으로 테스트하는 것이 좋다.

2. UI프로토타입의 장 단점

3. 프로토타이핑의 종류

4. UI프로토타입 계획 및 작성 시 고려 사항

개발 계획을 수립하는 과정과 프로토타입의 개발한 후 결과를 보고하는 과정으로 진행

5. UI 프로토타입 제작 단계

아나콘다(Anaconda)란?

파이썬의 배포판인데요, 수 백가지의 파이썬 패키지를 포함하고 있고 무료로 사용할 수 있습니다. 

패키지에도 용이하고 개발에도 용이합니다. 

아나콘다 설치하는 법을 알려드리도록 하겠습니다.

아래 사이트를 이용해주세요!

https://www.anaconda.com/distribution/

저 사이트에 들어가서 저와같이 다운받아주시면 됩니다. 윈도우를 쓰고 있으시면 윈도우 맥을 쓰고 있으시면 맥용을 다운 받아주세요! 

환경변수 설정 단계입니다. 저처럼 Add 는 추가 안 해주고 Register Anaconda3체크해줍니다.

글 보다는 그림으로 간결하게 하는 게 나을 것 같아서 글은 많이 안 적었습니다. 

웹 스크래핑(Web Scraping)

1. 실시간 개념이 존재 가능
2. 필요로 하는 특정 정보를 추출
3. 가공 및 저장해서 비교 분석 자료로 활용
4. 주로 CMS 어플리케이션의 원천 기술
5. 프로토콜(Protocol), 브라우저 방식 존재

머신러닝
(인간의 학습을 통해 컴퓨터 또는 기계 구현)

1. 알고리즘을 통해 데이터를 분석 및 학습 -> 컴퓨터로 학습 내용을 기반으로 판단, 추세, 예측
2. 대량의 데이터와 알고리즘을 통해 학습시키는 것에 목표
3. 문자, 음성, 얼굴, 지문, 게임, 의료, 로봇 등 다양한 분야에서 사용된다.
ex) 아마존 기존 상품에 있는 상품평(리뷰)가 있는데 판매자는 리뷰에 예민하다. 왜냐하면 판매량 때문에 그렇다. 

아마존은 돈을 받고 올린 듯한 리뷰(조작) 의미없는 리뷰, 그 밖에 규정에 어긋나는 리뷰 이런 것들을 자동삭제하거나 관리자에게 통보 

머신러닝

학습을 하면 인간이 개입해야 된다.

딥러닝

학습을 하면 인간이 개입하지 않는다.
시스템 서능 GPU가 좋아야 한다.
ex) 알파고는 CPU 1202, GPU 176, 서버급 300대가 필요하다.

머신러닝의 프로세스

1. 데이터 수집 2. 데이터 가공 3. 데이터 학습 4. 학습 방법 선택 5 매개변수 조정 6. 모델학습 7. 정확도 평가 -> 성공 

이상포스터를 마치겠습니다.

1. 유닛테스트

python에서는 unittest(Unit testing framework) 모듈을 사용할 수 있다. 
유닛테스트 코드를 작성하기 위해서는 다음과 같은 절차를 따른다.

1. import unittest
2. unittest.TestCase로 부터 파생된 사용자 테스트 클래스를 만든다.
3. 테스트 클래스 안에 "test"로 시작하는 테스트 메서드를 생성한다. 
테스트 메서드에서는 일반적으로 테스트하고자 하는 함수나 메서드를 호출하고
그 결과값을 self.assert*() 메서드를 사용하여 확인한다.(assertEqual, assertTure, assertFalse, assertRaises, assertReget 등)
4. 테스트 클래스가 완성되면, unittest.main()을 호출하여 테스트를 실행

밑에는 유닛 테스트의 예시이다.

#myCalc.py

def add(a, b):
    return a + b

def substract(a, b):
    return a - b

 test.py 코드는 unittest.TestCase로 부터 파생된 MyCalcTest 클래스로 작성, test_add와 test_substract 테스트 메서드를 작성하였고, 그 안에서 myCalc함수를 실행한 결과 self.assertEqual()를 사용하여 검사, 마지막으로 unittest.main()이 실행되면, 테스트 메서들이 실행하게 된다.

#test.py
import unittest
import myCalc

class MyCalcTest(unittest.TestCase):

    def test_add(self):
        c = myCalc.add(20, 10)
        self.assertEqual(c, 30)

    def test_substract(self):
        c = myCalc.substract(20, 10)
        self.assertEqual(c, 10)

if __name__ == '__main__':
    unittest.main()
    

, 파이썬의 unittest는 전체 스크립트 단위, 테스트 클래스 단위, 메서드/함수 단위로 실행할 수 있다. 

2. Test Fixture

테스트 전에 테스를 위한 사전 준비 작업을 필요할 때 쓴다. 또한, 테스트가 끝난 후 Clean up을 해야하는 경우에 쓴다. unittest는 이렇게 사전 준비 작업을 위해 setUp() 이라는 메서드를, 사후 Clean up 처리를 위해 tearDown()이라는 메서드를 사용할 수 있다.

테스트 메서드가 실행되기 전과 후에 매번 실행된다.

#myUtil.py
import os

def filelen(filename):
    f = open(filename, "r")
    f.seek(0, os.SEEK_END)
    return f.tell()

def count_in_file(filename, char_to_find):
    count = 0
    f = open(filename, "r")
    for word in f:
        for char in word:
            if char == char_to_find:
                count += 1
    return count

아래 코드는 test_filelen(), test_count_in_file() 두 개의 메서드를 가지고 있다. 테스트 메서드가 실행되기 전에 setUP() 메서드가 실행되어 테스트 파일을 생성, 테스트 실행 후 testDown()메서드가 실행하여 사용한 테스트 파일을 지우게 된다.

이상포스터를 마치겠습니다.

우연히 컴파일을 하면서 Subprocess Connection Error 라는 에러가 떴다.

IDLE's subprocess didn't make connection, See the 'Startup failure' section of the IDLE doc, online at https://docs.pthon.org/3/libray/idle.html#startup-failure라는 오류가 떴다. 

제가 뭐 만진 것도 없고 모듈을 삭제한 적도 프로세스를 삭제한 것도 없었다. 

문제가 된 이유는 파일이 엉키고 충돌된 것으로 판정됐다.

파이썬파일에 들어가서 (python38-32) .py에 관한 것을 옮겨 준다던가, 그 전에 했었을 때 오류가 난 것을 삭제해주면 된다 . 

or 아니면 하나씩 삭제해서 무슨 파일이 문제인지 확인해 주면된다. 

내 파일은 threading.py 이였는데 이 파일을 삭제해주니 말끔하게 실행이 됐다.

이상포스터를 마치겠습니다.

1. UI 설계 도구

사용자의 요구사항에 맞게 UI의 화면 구조나 화면 배치 등을 설계할 때 사용하는 도구

즉, 건물을 짓기 전에 건물에 대한 설계도를 그리듯이 UI도 그렇게 함

UI종류

2. 와이어프레임(Wireframe)

기획 단계의 초기에 제작하는 것, 페이지에 대한 개략적인 레이아웃이나 UI요소 등에 대한 뼈대를 설계하는 단계

• 제작할 때는 각 페이지의 영역 구분, 콘텐츠, 텍스트 배치 등을 화면 단위로 설계한다.

• 개발자나 디자이너 등이 레이아웃을 협의하거나 현재 진행 상태 등을 공유하기 위해 와이어프레임을 사용한다.

• 와이어프레임 툴 : 손그림, 파워포인트, 키노트, 스케치, 일러스트, 포토샵 등

3. 목업(Mockup)

디자인, 사용 방법, 설명, 평가 등을 위해 와이어프레임보다 좀 더 실제 화면과 유사하게 만든 정적인 형태의 모형이다.

• 시각적으로만  구성 요소를 배치하는 것

• 목업 툴 : 파워 목업, 발사믹 목업 등

4. 스토리보드(Story Board)

와이어프레임에 콘텐츠에 대한 설명, 페이지 간 이동 흐름 등을 추가한 문서이다.

• 디자이너와 개발자가 최종적으로 참고하는 작업 지침서, 정책, 프로세스, 콘텐츠 구성, 와이어프레임, 기능 정의 등 서비스 구축을 위한 모든 정보가 들어 있다.

• 상단이나 우측에는 제목, 작성자 등을 입력하고, 좌측에는 UI화면 우측에는 디스크립션을 기입

• 디스크립션은 화면에 대한 설명, 전반적인 로직, 분기처리, 예외처리 등을 작성하는 부분, 명확하고 세부적으로 작성해야 한다.

• 스토리보드 툴 : 파워포인트, 키노트, 스케치, Axure 등

5. 프로토타입(Prototype)

인터랙션을 적용, 실제 구현된 것처럼 테스트가 가능한 동적인 형태의 모형

• 사용자 테스트나 작업자 간 서비스 이해를 위해 작성하는 샘플

• 작성 방법에 따라 페이퍼 프로토타입과 디지털 타입으로 나눔

• 프로토타입 툴 : HTML/CSS, Axure, Flinto, 네이버 프로토나우, 카카오 오븐 등

6. 유스케이스(Use Case)

사용자 측면에서의 요구사항, 사용자가 원하는 목표를 달성하기 위해 수행할 내용을 기술

• 프로젝트의 초기에 시스템의 기능적인 요구를 결정하고 그 결과를 문서화할 수 있다.
• 자연어로 작성된 사용자의 요구사항을 구조적으로 표현한 것, 다이어그램 형식으로 묘사

• 다이어그램이 완성되면, 각각의 유스케이스에 대해 유스케이스 명세서를 작성한다.

이상포스터를 마치겠습니다.

1. 사용자 인터페이스(UI, User Interface)의 개요

사용자와 시스템 간의 상호작용이 원활하게 이뤄지도록 도와주는 장치나 소프트웨어를 의미

• 정보 내용을 전달하기 위한 표현 방법

사용자 인터페이스의 세 가지 분야

- 정보 제공과 전달을 위한 물리적 제어에 관한 분야

- 콘텐츠의 상세적인 표현과 전체적인 구성에 관하 분야

- 모든 사용자가 편리하고 간편하게 사용하도록 하는 기능에 관한 분야

2. 사용자 인터페이스(UI)의 특징

• 사용자의 만족도에 가장 큰 영향을 미치는 중요한 요소

• 사용자의 편리성과 가독성을 높임, 작업 시간을 단축시키고 업무에 대한 이해도를 높여준다.

• 최소한의 노력으로 원하는 결과를 얻음

• 기능에 대해 구체적인 방법을 제시

• 정보 제공자와 공급자 간의 매개 역할을 수행

• 사용자 인터페이스를 설계하기 위해서는 소프트웨어 아키텍처를 반드시 숙지해야 한다.

3. 사용자 인터페이스 구분

• CLI(Command Line Interface) : 명령과 출력이 텍스트 형태로 이뤄지는 인터페이스

• GUI(Graphical User Interface) : 아이콘이나 메뉴를 마우스로 선택하여 작업을 수행하는 그래픽 환경의 인터페이스

• NUI(Natural User Interface) : 사용자의 말이나 행동으로 기기를 조작하는 인터페이스

4. 사용자 인터페이스의 기본 원칙

• 직관성 : 누구나 쉽게 이해하고 사용할 수 있어야 한다.

• 유효성 : 사용자의 목적을 정확하고 완벽하게 달성해야 한다.

• 학습성 : 누구나 쉽게 배우고 익힐 수 있어야 한다.

• 유연성 : 사용자의 요구사항을 최대한 수용하고 실수를 최소화해야 한다.

5. 사용자 인터페이스의 설계 지침

• 사용자 중심 : 사용자가 쉽게 이해하고 편리하게 사용할 수 있어야 한다.

• 일관성 : 버튼이나 조작 방법 등을 일관성 있게 해야한다.

• 단순성 : 인지적 부담을 감소시켜야 한다.

• 결과 예측 가능 : 기능만 보고도 결과를 미리 예측할 수 있게 설계해야 한다.

• 가시성 : 최대한 조작이 쉽도록 설계해야 한다.

• 표준화 : 한 번 학습한 이후에는 쉽게 사용할 수 있도록 설계해야 한다.

• 접근성 : 연령, 성별 등 다양한 계층이 사용할 수 있도록 설계해야 한다.

• 명확성 : 개념적으로 쉽게 인지할 수 있게 해야 한다.

• 오류 발생 해결 : 쉽게 인지할 수 있도록 설계해야 한다.

이상포스터를 마치겠습니다.

1. UI 설계 도구

UI종류에는 와이어프레임, 목업, 스토리보드 , 프로토타입, 유스케이스 등이 있다.

2. 와이퍼프레임(Wireteframe)

초기에 제작하는 것, 페이지에 대한 개략적인 레이아웃이나 UI 요소 등에 대한 뼈대를 설계하는 단계

• 와이어프레임을 제작할 때는 각 페이지의 영역 구분, 콘텐츠, 텍스트 배치 등을 화면 단위로 설계

• 개발자, 디자이너 등이 레이아웃을 협의 or 현재 진행 상태 등을 공유하기 위해 사용

• 와이어프레임 툴: 손그림, 파워포인트, 키노트, 스케치, 일러스트, 포토샵 등

3. 목업(Mockup)

디자인, 사용방법 설명, 평가 등을 위해 와이어프레임보다 좀 더 실제 화면과 유사하게 만든 정적인 형태의 모형

• 시각적으로 구성 요소를 배치

• 목업 툴 : 파워목업, 발사믹 목업 등

4. 스토리보드(Story Board)

와이어프레임에 콘텐츠에 대한 설명, 페이지 간 이동 흐름 등을 추가한 문서

• 최종적으로 참고하는 작업 지침서, 정책, 프로세스, 콘텐츠 구성, 와이어프레임 등 서비스 구축을 위한 모든 정보

• 상단,우측에는 제목, 작성자 등으 입력, 좌측에는 UI화면, 우측에는 디스크립션을 기입

• 디스크립션은 화면에 대한 설명, 전반적인 로직, 분기처리, 예외처리 등을 작성하는 부분

• 스토리보드 툴 : 파워포인트, 키노트,  스케치, Axure 등

5. 프로토타입(Prototype)

와이어프레임, 스토리보드 등에 인터랙션을 적용하면서 실제 구현 된 것처럼 테스트가 가능한 동적인 형태의 모형

• 사용성 테스타트나 작업자 간 서비스 이해를 위해 작성하는 샘플

• 작성 방법에 따라 페이퍼 프로토타입과 디지털 프로토타입으로 나뉜다.

• 프로타입 툴 : HTML/CSS, Axure, Flinto, 네이버 프로토나우, ㅏ카오 오븐 등

6. 유스케이스(USe Case)

사용자 측면에서의 요구사항, 사용자가 원하는 목표를 달성하기 위해 수행할 내용을 기술

• 프로젝트의 초기에 시스템의 기능적인 요구를 결정하고 그 결과를 문서화 할 수 있다.

• 자연어로 작성된 사용자의 요구사항을 구조적으로 표현한 것으로, 다이어그램형식으로 묘사

• 유스케이스가 다이어그램이 완성되면, 각각의 유스케이스에 대해 유스케이스 명세서를 작성한다.

인터랙션(Interaction)이란?

사용자와 시스템을 연결하는 것이 UI라면 인터랙션은 UI를 통해 시스템을 사용하는 일련의 상호 작용을 의미

즉, 마우스로 화면의 어떤 아이콘을 클릭하면 화면이 그에 맞게 반응하는 것

이상포스터를 마치겠습니다.