[6일차] UI 화면 설계 / 프로토타입

20220727(수)

• 목차
  - NCS 교육
  - CSS
  - 시험

---

• NCS 홈페이지
  https://www.ncs.go.kr/index.do

NCS 국가직무능력표준, NCS 블라인드채용

 

---

< 화면 설계 >  요구분석 & 설계 부분

• S/W 성장 문제점
  1. 개발자 : 개발자별로 능력에 따른 금액 차이가 크다. 결과물은 같지만 코딩내용이 달라서 품질이 떨어짐.
                   ➡ 표준 공정을 도입하자!
  2. 비 가시성 : 눈에 보이지 않음 
                      ➡ S/W 품질을 정량적으로 측정(품질 지표) ➡ S/W 가시화 : ISO에서 ISO9126으로 품질지표 생성함
                      ➡ S/W 품질을 높이고 저렴하게 만드는 것이 목표
  
  
• ✨ S/W process : 공정
  - 요구분석 (고객의 니즈를 맞춰주는것도 중요하지만 요구의 타당성 검토해야 함)
  - 설계 (최종 S/W의 품질이 좋아짐, S/W 불량률이 떨어짐, 비용/일정/품질에 대한 예측 가능)
  - 구현 (언어, DB 등)
  - 테스팅 (정적/동적 테스트, 경험기반, TDD 등)
  - 유지보수 (긴급 유지보수, 상시 유지보수, 요청 유지보수)
  - 폐기절차
  
  
• SDLC (Software Development Life Cycle) 소프트웨어 개발 생명주기 : 패러다임 : 생각방식
• S/W process : 패러다임으로 취하는 액션 / 실천방식(좀 더 구체화 되어있지만 방법은 빠져있음)
• S/W 개발 방법론 : S/W process 를 구체화 한 방법들

 

---

< 좋은 S/W는 뭐야? >

1) S/W를 만드는 process가 좋은가? ➡ ISO 25010 ➡ SP인증 "EMMi" : 요구분석/설계/구현/테스트/유지보수

정의 - SW기업 및 개발조직의 SW프로세스 품질역량 수준을 심사하여 등급을 부여하는 제도
목적 - SW개발/관리하는 기업 및 조직의 SW품질프로세스 품질 향상과 신뢰성 확보

https://www.swit.or.kr/GOODSW/sp/spIntro.do

SP인증제도 소개 | SWIT 소프트웨어산업정보시스템

2) S/W 자체가 좋은가? ➡ ISO9125 ➡ "GS인증"

*GS인증제도? Good S/W 인증 (패키지 소프트웨어 팔아먹으려면 무조건 인증받아야 함!

ISO 국제표준을 기준으로 SW의기능성, 신뢰성, 효율성, 사용성, 유지보수성, 이식성, 성능, 상호운용성, 연동성 및 적합성을 시험/테스트하여 인증을 부여합니다.

https://www.swit.or.kr/GOODSW/gsauthen/introBiz.do

GS인증제도안내 | SWIT 소프트웨어산업정보시스템

 

---

< UI 요구사항 확인 >

• 소프트웨어 아키텍처 : "문서"
  소프트웨어도 각각의 모듈들이 있고 서로 상호연관성이 있다. 이 연관성을 눈으로 볼 수 있게 잘 정리해 놓은 문서
  아키텍처가 왜 나와요? : UI 요구사항을 확인하기 전부터 뒤에까지 다 고려하고 들어가기 때문임
  
  
• UI 설계 원칙 : 지켜줘야 하는 것
  (가) 직관성 : 누구나 쉽게 이해하고 사용할 수 있어야 한다. (무조건 아이콘은 아니다..!)
  (나) 유효성 : 사용자의 목적을 정확하게 달성하여야 한다.
  (다) 학습성 : 누구나 쉽게 배우고 익힐 수 있어야 한다.
  (라) 유연성 : 사용자의 요구사항을 최대한 수용하며, 오류를 최소화하여야 한다.
  
  
• UI 요구사항 _ 품질 요구사항

• UI 요구사항 확인하기
  1) 응용 소프트웨어 개발을 위한 UI 표준 및 지침을 확인
  2) 개발하고자 하는 응용 소프트웨어에 적용될 UI 요구사항을 확인
       REP ➡ 요구사항 명세서 만듦 

 

---

< 프로토타입 >

아날로그적인 방법으로 스케치, 그림, 글 등을 손으로 직접 작성하는 페이퍼 프로토타입(Paper Prototype)과
컴퓨터 등 도구를 사용하여 작성하는 디지털 프로토타입(Digital Prototype)이 있다

✔ 프로토타입 툴 예시 (종이에 써도 상관없다. 눈에 보이기만 하면 됨)

1) 웹에 최적화 : https://ovenapp.io/

OvenApp.io

2) 웹 외적인 화면 : https://app.diagrams.net/

Flowchart Maker & Online Diagram Software

• UI 프로토타입의 장점과 단점

장점	단점
(가) 사용자 설득과 이해가 쉽다. (나) 개발 시간이 감소한다. (다) 오류를 사전에 발견할 수 있다.	*고객의 오해 : 너무 잘 만들면 고객이 완성된 줄 안다.                        (일부러 종이에 그려서 보여줌) (가) 너무 많은 수정 과정, 작업 시간이 늘어날 수 있다.        적절한 타협이 필요하다. (나) 자원 효율성 관점 ➡ 필요 이상으로 자원을 많이 소모한다. (다) 정확한 문서 작업이 생략될 수 있다.

 

---

• USE CASE  유스케이스 : 요구사항 가시화 가능
  - 목적 : 이 서비스가 어떤 것과 어떤 관계를 갖고 있는지 관계성을 파악하기 좋은 직관적인 다이어그램
  
  UML (Unified Modeling Language) 통합 모델링 언어 중 하나
  시스템을 모델로 표현해주는 대표적인 모델링 언어 : CLASS/시퀀스/USE CASE 등
  원활한 커뮤니케이션을 위해 적어왔다.

출처 : 위키백과

프론트 엔드는 사용자 페이지 만든다.

서버 개발자가 관리자 페이지 만든다.

 

---

• 대쉬보드
  : 내가 받을 서비스를 한 눈에 볼 수 있도록 표현한 것 / 일종의 서비스 진입점으로서 많이 사용 함

Dorothy 작업물

---

CSS

• 클래스와 아이디가 헷갈려? 클래스를 많이 쓰자!
  여러가지 스타일링을 한꺼번에 적용해야 할 때는 클래스(class)를 사용하고,
  한가지만 적용하고 싶다면 아이디(id)를 사용
  출처: https://heinafantasy.com/155 [디지털 노마드:티스토리]

 

• div 태그
  : 구분을 나눈다. 구역을 설정한다. 어떤 구역인지는 모른다.
  
  
• <수평구조를 단 분배로 바꾸는 방법>
  1) 플랙스
  2) 그리드 (브라우저에서 지원을 잘 안함)

---

• 후기
  확실히 정처기 실기 공부랑 병행하니까 겹치는 내용들이 많이 나온다.
  실기는 암기 위주였다면 수업은 이해위주인 느낌? 둘이 섞여서 더 잘 들어온다 :)
  
  오후에는 2시간 동안 html과 css를 활용한 코딩테스트를 봤는데 집에와서 다시 보니까 아쉬운 점들이 보였다.
  그래도 혼자 공부할 때 보단 단기간에 실력이 쑥쑥 늘어난 것 같아서 뿌듯했다!