본문 바로가기

개인 스터디

 (22)
[정보처리기사 실기] 4. UI 설계 1. UMLUML : 객체 지향 소프트웨어 개발 과정에서 산출물을 명세화할 때 사용되는 표준화된 범용 모델링 언어UML 특징가시화 언어 : 개념 모델 작성 시 오류가 적고 의사소통이 용이구축 언어 : 다양한 언어로 실행 시스템의 예측 가능, 소스 코드 변환 및 역 변환 가능명세화 언어 : 정확한 모델 제시, 완전한 모델 작성 가능문서화 언어 : 시스템에 대한 평가 및 의사소통의 문서UML 구성요소사물 : 추상적인 개념으로, 주제를 나타내는 요소관계 : 사물과 사물을 연결하여 관계를 표현하는 요소다이어그램 : 사물과 관계를 모다 그림으로 표현. 9가지로 정의 UML 다이어그램구조적(정적) 다이어그램 : 시스템의 구조 및 구성요소들 간의 관계를 나타내는 다이어그램클래스(Class) : 클래스의 속성 및 연산..
[정보처리기사 실기] 3. UI 요구사항 확인 1. UI 요구사항 확인사용자 인터페이스(UI) : 사용자와 시스템 사이 의사소통할 수 있도록 고안된 물리적, 가상의 매개체. UX 포함UX : 사용자가 직/간접적으로 경험하며 느끼는 것UI 유형CLI : 정적 텍스트 기반 인터페이스GUI : 그래칙 반응 기반 인터페이스NUI : 직관적 사용자 반응 기반 인터페이스. 신체부위 이용OUI : 유기적 상호 작용 기반 인터페이스. 모든 사물이 입출력장치로 변화 가능UI 설계 원칙직관성(Intuitiveness) : 누구나 쉽게 이해하고 쉽게 사용유효성(Efficiency) : 정확하고 완벽하게 사용자의 목표 달성학습성(Learnability) : 모두사 쉽게 배우고 사용유연성(Flexibility) : 사용자의 요구사항을 최대한 수용하고 실수를 방지  UI 요..
[정보처리기사 실기] 2. 현행 시스템 분석 1. 현행 시스템 파악현행 시스템 파악 : 현행 시스템의 SW 및 HW, 네트워크 구성 및 제공 기능 등을 파악하는 활동현행 시스템 절차 구성/기능/인터페이스 파악아키텍처 및 소프트웨어 구성 파악시스템 하드웨어 및 네트워크 구성 파악소프트웨어 아키텍처 : 소프트웨어의 구성요소와 외부 특성, 관계를 표현하는 구조소프트웨어 아키텍처 프레임워크 : 소프트웨어 시스템에서 아키텍처가 표현해야 하는 내용을 제공하는 기술 표준소프트웨어 아키텍처 4+1 뷰 : 고객의 요구사항을 정리해 놓은 시나리오를 4개의 관점에서 바라보는 접근 방법소프트웨어 아키텍처 4+1 뷰 구성요소Usecase View : 다른 뷰를 검증하는 데 사용Logical View : 기능적 요구사항이 어떻게 제공되는지 설명Process View : 시..
[정보처리기사 실기] 1. 요구사항 확인 1. 소프트웨어 개발 방법론소프트웨어 생명주기(SDLC) 모델 : 시스템 개발 생애 작업 프로세스 모델화모델 프로세스요구사항 분석 : 개발할 소프트웨어의 기능, 제약 조건, 목표, 사용자를 명확하게 정의-> 기능/비기능 요구사항설계 : 정의한 기능의 수행 바법을 논리적으로 결정 : 시스템 구조/프로그램/사용자 인터페이스 설계구현 : 문제 해결 방법을 특정 프로그래밍 언어를 사용해 작성 -> 인터페이스/자료 구조 개발, 오류 처리테스트 : 시스템이 요구를 만적하는지 평가 -> 단위/통합/시스템/인수 테스트유지 보수 : 시스템이 인수되고 설치된 후 일어나는 모든행동 -> 예방/완전/교정/적응 유지보수   SDLC 종류폭포수 모델(Waterfall Model) : 각 단계를 확실히 마무리 지은 후 다음 단계로..
Do it 웹사이트 따라 만들기 - 구글 API로 Contact Us 폼 처리하기 # 10-1. 구글 앱스 메일로 가상 서버 만들기 구글에서 제공하며, 우리가 만든 폼을 처리해주기 위한 API이다. HTML 파일 안에서 태그에 mailto 속성으로 메일을 보낼 수 있다. 자신의 구글 계정으로 로그인한 후 docs.google.com/spreadsheets/u/1/d/1Bn4m6iA_Xch1zzhNvo_6CoQWqOAgwwkOWJKC-phHx2Q/copy 를 복사해 브라우저 창에 붙여 넣고 이동한다. 엑셀 시트 상단 메뉴에서 도구 -> 스크립트 편집기를 선택한다.(지금은 확장 프로그램 -> add script로 변경) 스크립트 파일이 나오면 주석을 삭제하고 박스로 메일 자리에 본인 메일 주소를 입력한다. 상단 메뉴의 파일 -> 버전 관리를 선택하여 텍스트 입력창에 사용할 스크립트의 제목..
Do it 웹사이트 따라 만들기 -Contact Us 페이지 만들기 # 9-1. 폼 요소 살펴보기 폼 태그 form : 서버와의 상호작용을 위한 콘텐츠로, 사용자의 요청을 받고 서버에서 그에 따른 처리를 진행한다. 동작 과정 폼 내용을 입력 한 후 폼 안에 있는 모든 데이터를 웹 서버로 보낸다. 웹 서버는 폼 데이터를 처리하기 위해 폼 안에 있는 데이터를 웹 프로그램으로 보낸다. 웹 프로그램은 데이터를 처리한 후 결과를 웹 서버로 보낸다. 웹 서버에서 받은 결과를 브라우저에 보내 사용자가 볼 수 있게 된다. 폼 태그 속성 action : 폼을 통해 전송한 정보를 처리하는 웹 페이지의 URL을 나타낸다. method(default = get) : 브라우저가 폼을 전송하기 위해 사용하는 HTTP의 방식을 지정한다. 이 속성값은 get 또는 post 중 한 개를 갖는다. au..
Do it 웹사이트 따라 만들기 - FAQ 페이지 만들기 # 8-1. 사용자 인터페이스 이해하기 사용자 인터페이스란? 사용자와 시스템이 정보를 주고받기 위해 상호작용을 하는 의사소통 시스템 사용자를 위해 편의성을 고려하고, 시맨틱 마크업을 통해 시스템 배려를 고려한다. 좋은 사용자 인터페이스 만들기 간결하고 직관적으로 표현하기 일관성 있게 구현하기 명확하게 구현하기 # 8-2. 아코디언 형태로 FAQ 만들기 html 파일의 태그에서 으로 제목을 작성하고 .tit_faq 클래스를 지정한다. 제목과 제목 설명이 다른 스타일이 적용되도록 다른 태그를 사용한다. 제목은 , 설명은 태그로 작성한다. css파일에서 .tit_faq의 선택자로 작성한 후 공통인 폰트 색상은 상속을 받아 지정한다. 태그에 font-size와 padding-right 속성값을 지정한다. 태그 ..
Do it 웹사이트 따라 만들기 - 도서소개 페이지 추가하기 # 7-1. Ajax 사용하기 내용이 많아지고 하나의 태그 안에 많은 내용을 표현할 경우 페이리 로딩 속도가 느려질 수 있다. 따라서 도서별 상세 페이지를 따로 만들고, Ajax를 사용해 패당 페이지가 표시되는 동적화면을 만드는 것이 좋다. 대부분의 브라우저에서는 XSS를 막기 위해 요청한 페이지의 도메인과 HTTP 응답의 도메인이 상이할 경우 응답을 거부하는 보안 정책이 적용한다. 이런 경우 Ajax가 동작하지 않는데, 브라우저의 속성 - 대상에서 한 칸을 띄고 --allow-file-access-from-files 옵션을 추가하면 Ajax가 로컬에서 동작이 가능한 상태가 된다. class="detail_content"로 그룹화한 도서 상세 내용 페이지를 별도의 페이지로 만든다. Ajax로 불러오는 내..

티스토리툴바