개발롬의 개발일지

[CSS] CSS 스타일링의 우선순위

개발롬! — Thu, 7 Mar 2024 23:44:54 +0900

분명 !! 아는 내용인데 꼭 면접이나 누군가한테 설명할 때 머리가 하얘지고 말이 안나오는 밥 오의 CSS 우선순위 정리....

!important >>> inline >>> id선택자 >>> class명 >>> HTML태그 >>> DOM구조 상위 상속

1. !important

속성 값 뒤에 !important를 붙인 속성이다.

<div class="box">hello world</div>

.box { color: pink !important; }
.box { color: blue; }

이러케!

이러케 하면 hello world는 핑크색이 되겠죠

2. HTML 코드에 inline 스타일링

<div style="color: pink;" class="box">hello world</div>

.box { color : black; }

이러케 !

3. id로 선언

<div id="title" class="box">hello world</div>

#title { color: red; }
.box { color: pink; }

이러케 하면 hello world는 빨간색 글씨로 나온답니다.

4. class로 선언

<div class="box">hello world</div>

.box { color: pink; }

이러면 pink색 hello world 로 나오는게 당연하겠죠 ?

5. HTML 태그

<div><h3>Hello world</h3></div>

h3 { color : blue }

Hello world

요러케 나오겠죵

쉽게쉽게 가자 !

이것은 회고록인가 반성문인가 유서인가.......

개발롬! — Thu, 22 Feb 2024 23:54:31 +0900

지난 8월
1년정도 다니던 회사가 경영악화로 회사가 증발되면서 나도 같이 증발됐다.

그간 나는 1년동안 그 회사에서 React로 홈페이지, 우리회사 채용사이트, 규모가 꽤 있는 쇼핑몰플랫폼도 만들어 보았기에 좀 자만했었다.

1년이라는 시간동안 그래도 많은 경력을 쌓았다고 생각했고, 예전에 처음 취업 준비를 할 땐 이렇게까지 빡센(?) 느낌이 아니었다. 솔직히 그냥 HTML, CSS, Javascript만 어느정도 다룰 줄 알면 데려가서 가르쳐주고 역량을 키우게 하려는 회사들이 많았다. (개인적인 생각, 그리고 거의 스타트업 위주)

그래서인지 요즘의 취업시장에 대해 잘 몰랐고 그냥 자만 한 채로 몇달을 그냥 나태하게 지냈던 것 같다.

그러다가 이제 막 취업을 해야겠다 발등에 불떨어진 사람마냥 급하게 포트폴리오도 새로 만들고 그냥 예전에 만들어 놓은 포트폴리오도 있고 연락은 오겠지 하는 마음으로 마구잡이로 지원했다.

근데 아니나 다를까 연락이 안오는 곳도 많고, 비전공자라는 이유로 서류심사에서 탈락되는 일도 빈번했다.

물론 비전공자라는 타이틀 때문만은 아니라고 생각한다.

하나의 프로젝트라도 기획부터 배포까지 그리고 그 개발 사이클을 경험하면서 느낀점이나 힘들었던점, 문제 해결 방법 등 그런 경험적인 내용을 녹여낼 수 있는 포트폴리오나 자기소개서가 아니었다고 생각한다.

점점 자신감이 없어졌고 조바심이 났다.

나는 조바심이 날 때 하던 일도 잘 안되는 멘탈이 조금 약한 사람이다.

기획하고 있던 프로젝트도, 면접준비랍시고 CS지식이나 용어 공부, 코딩테스트 준비 등등 뭐하나 제대로 머릿속에 들어오는게 없었다.

그리고 어찌저찌 세군데의 회사에 면접을 보게 되었는데, 면접일정이 연달아 3일동안 잡혔다.

어제 갔던 회사에서는 그동안의 행적이나 프로젝트를 어떻게 해왔는지 등 기술적인 부분 보다는 그런 부분에 대해서 질문을 받았고

오늘 갔던 회사는..... 네트워크 분야, 그리고 클라우드 사업 이런 회사였어서 프론트앤드 지식 보다는 네트워크 적인 내가 모르는 용어들에 대해서 공부를 하고 갔었는데 그 부분에 대해서는 질문을 하나도 못받았고 정말 기초적인 지식들에 대해 질문을 받았다.

받았던 질문

- CSS 우선순위

- bundle 어떤 걸 썼는지, webpack이란?

- promise객체를 라이브러리 없이 사용할 때 어떻게 사용했는지? fetch...가 왜 기억이 안나니

- 이벤트루프가 무엇인가?

와 정말 기본적이고 기초적인 질문들 아닌가...? 사실 들어갔는데 면접관이 다섯분 계셨고 나는 좀 위축되고 너무 긴장이 많이 됐는지 저 질문에 제대로 대답을 한 게 하나도 없었다.

~~(관희씨)~~나 바본가..?

우여곡절끝에 면접실을 나오고 밖에 나왔는데 정말 내가 너무 싫고 한심했고 멘탈이 나가버렸다..

면접 분위기는 좋았는데 내가 우물쭈물 대답 못한 부분에 대해 너무 수치스럽고 창피했다

이런것도 대답못하는 사람을 개발자라 할 수 있나..?

내일도 면접인데 걱정이 너무 앞서고 머리가 너무 복잡해서 다 피하고싶다는 생각밖에 안든다....

그래도 이번을 계기로 내가 얼마나 나태했고 얼마나 자만하고 우물안에 개구리처럼 살았는지 깨달았으니 오늘의 내가 어제의 나보다는 낫다는 생각으로 혼자만의 위로를 해본다..

오늘 내가 우물쭈물 대답도 못한 면접 질문에 대한 내용을 이번 주 안에 정리를 해서 글을 올릴 것을 다짐하며

그리고 나 글 잘 못쓰지만.. 이 족으만 나의 블로그도 열심히 한번 활성화 시켜보리라

나 진짜 열심히 살아볼게

이만 총총

02 고급 SQL 작성하기

개발롬! — Tue, 18 May 2021 15:11:24 +0900

인덱스 활용

테이블 조회 시간을 단축하기 위해 사용하는 인덱스의 개념을 이해하고, 인덱스를 생성하는 DDL(Data Definition Language) 명령문을 작성할 수 있다.

인덱스 개요

1. 인덱스 개념

인덱스는 데이터를 빠르게 찾을 수 있는 수단으로서, 테이블에 대한 조회 속도를 높여 주 는 자료구조를 일컫는다. 인덱스는 다음 그림과 같이 테이블의 특정 레코드 위치를 알려 주는 용도로 사용하는데, 이러한 인덱스는 자동으로 생성되지 않는다.

PK 컬럼은 PK를 생성할 때 자동으로 인덱스가 생성된다. 즉, PK 컬럼은 PK를 생성할 때 자동으로 PK 인덱스가 생성된다. 예를 들어 위의 그림과 같은 테이블에서 일련번호를 기본키(Primary Key)로 하는 경우, 일련번호에 대한 인덱스는 자동으로 생성되나, 생년월일이나 이름을 기준으로 하는 인 덱스는 자동으로 생성되지 않는다.

조건문 where 절에서 `이름'을 비교하고 있다. 이 경우 해당 테이블의 `이름' 컬럼에 인덱 스가 없는 경우, 테이블의 전체 내용을 검색하(Table full scan)게 된다. 반면, 인덱스가 생성되어 있다면 테이블의 일부분을 검색(Range scan)하여 데이터를 빠르 게 찾을 수 있다. 조건절에 `='로 비교되는 컬럼을 대상으로 인덱스를 생성하면 검색 속도 를 높일 수 있다. 하지만 자동으로 생성되지 않기 때문에 DB 사용자는 질의문을 분석하여 인덱스를 생성해야 한다.

인덱스 사용

인덱스 사용 주체

`이름' 컬럼에 대한 인덱스가 생성되어 있다면 데이터를 빠르게 찾을 수 있다. 이때 빠르게 찾는 행위의 주체는 DBMS이다. 즉, DBMS는 인덱스를 사용하여 빠른 검색을 수행한다. 이를 위해 DB 사용자는 DBMS가 인덱스를 사용할 수 있게 준비해 주어 야 한다. 따라서 DB 사용자 입장에서는 인덱스를 사용하는 개념보다는 준비하는 개념으로 접근해야 한다. 인덱스 준비 방법에 대해 알아보도록 하자.

인덱스 준비

DB 사용자가 인덱스에 대해 조작할 수 있는 방법으로는 `생성, 삭제 그리고 변경' 조작이 있다. 참고로 인덱스 조작 명령은 SQL 표준화에 포함되지 않아 DBMS 제품 공급사마다 사용법이 약간씩 다르다.

(1) 인덱스 생성

(2) 인덱스 삭제

index_name은 생성된 인덱스 이름을 의미한다. 인덱스 관련 명령어에 대한 SQL 표 준이 없기에 제품별 Drop 명령문의 사용법은 약간씩 다르다. 보통 인덱스를 테이블의 종속 구조로 생각하여 인덱스를 삭제하기 위해 테이블의 변경을 가하는 형식의 명령 을 사용한다. 즉, ALTER TABLE 명령 뒤에 DROP INDEX 명령이 추가되는 형태로 사 용된다.

(3) 인덱스 변경

한번생성된인덱스에대해변경이필요한경우는드물다. 또인덱스관련SQL문은 표준화가 안 되었으므로 인덱스 변경에 대한 명령문 지원 여부 및 방법은 벤더별로 다르다. 일부 제품은 인덱스에 대한 변경 SQL문이 없다. 이 경우 기존 인덱스를 삭제 하고 신규 인덱스를 생성하는 방식으로 사용이 권고되고 있다.

뷰 활용

먼저 생성된 테이블들을 이용하여 새로운 테이블과 뷰를 생성하는 DDL(Data Definition Language)명령문을 작성할 수 있다.

뷰(View) 개요

뷰는 논리 테이블로서 사용자에게(생성 관점 아닌 사용 관점에서) 테이블과 동일하다. 아 래 그림에서 `테이블A'와 `테이블B'는 물리 테이블을 의미하고, `뷰C'는 두 개의 테이블을 이용하여 생성한 뷰를 의미한다.

뷰는 `테이블A'와 같은 하나의 물리 테이블로부터 생성 가능하며, 다수의 테이블 또는 다 른 뷰를 이용해 만들 수 있다. 위 그림의 뷰와 같은 결과를 만들기 위해 다음 장에서 배 울 조인(Join) 기능을 활용할 수 있으나, 뷰가 만들어져 있다면 사용자는 조인 없이 하나의 테이블을 대상으로 하는 단순한 질의어를 사용할 수 있다.

뷰 활용 상세

뷰 사용

즉, FROM 절에 있는 하나의 뷰를 통해 뷰를 구성하는 복수의 테이블을 대체하는 단 순성에 그 의의가 있다. 또 이러한 기능을 통해 테이블의 중요 데이터 일부만을 제공할 수 있는 등 다음과 같은 장점이 있다.

뷰 생성

뷰 삭제 및 변경

뷰 정의 자체를 변경하는 것은 불가능하다. 일단 뷰를 정의하면, 뷰의 물리적 내용은 뷰의 이름과 데이터를 조회하기 위한 쿼리문뿐이다. 이때 뷰의 이름이나 쿼리문을 변경하는 수 단은제공되지않는다. 이경우뷰의삭제와재생성을통해뷰에대한정의변경이가능 하다. 뷰를 삭제하는 쿼리문은 다음과 같다.

뷰 내용 변경

뷰를 통해 접근 가능한 데이터에 대한 변경이 가능하다. 하지만 모든 경우에 데이터의 변 경이 가능한 것이 아니라 일부 제약이 존재한다. 이러한 제약은 뷰 자체가 논리적 개념이 기에 물리적 상황에 의존적임을 의미한다. 예를 들어 PK에 해당하는 컬럼이 뷰에 정의되 어 있지 않은 경우 INSERT는 당연히 불가능하다.

다중 테이블 검색

조인, 서브쿼리, 집합 연산자를 사용하여 두 개 이상의 테이블로부터 데이터를 조회하는 DML(Data Maniqulation Language)명령문을 작성할 수 있다.

다중 테이블 검색 방법

관계형 데이터베이스는 데이터의 중복을 최소화하기 위해 데이터를 분해하여 저장하고 통 합하여 사용한다. 데이터를 분해하는 방법으로 정규화 기법이 사용되며, 통합하는 기법으 로 다중 테이블에 대한 검색이 사용된다. 다중 테이블을 이용하는 보다 세부적인 기법은 다음과 같다.

조인(JOIN)

1. 조인 개념
두 개의 테이블을 결합하여 데이터를 추출하는 기법 SQL문 안에 포함된 SQL문 형태의 사용 기법 테이블을 집합 개념으로 조작하는 기법 조인은 결합을 의미하며, 관계형 데이터베이스에서의 조인은 교집합 결과를 가지는 결합 방법을 의미한다. 교집합이 되는 공통점은 다양한 관점에서 정의될 수 있다. 여기서 그 관 점을 정의하는 것이 바로 조인의 조건이 된다. 조인은 두 테이블의 공통값을 이용하여 컬럼을 조합하는 수단이다. 보통 PK와 FK 값을 결합하여 사용하는 것이 일반적이다. 보다 엄밀하게 말하자면 PK, FK와 관계없이 논리적 인값들의연관을사용한다. 세개이상의테이블에대한결합은두개의테이블을우선 결합하고 그 결과와 나머지 한 개의 테이블을 다시 결합한다.
2. 조인 유형
조인은 관계형 데이터베이스의 가장 큰 장점이면서 대표적인 핵심 기능이라고 할 수 있 다. 조인은 크게 물리적 조인과 논리적 조인으로 구분할 수 있으며, 물리적 조인은 데이터 베이스의 성능을 높이기 위한 튜닝 관점에서 다루는 주제로서, 본 학습에서는 사용자가 직접 제어할 수 있는 논리적 조인에 대해 알아본다.

내부 조인에서 내부의 의미는 외부 조인에 대비하기 위해 사용 되었으므로 수식어가 없는 조인은 내부 조인을 의미한다. 내부 조인의 세부 유형은 조인의 조건에 따라 세분된다. 명시적으로 지정하지 않고, 두 테 이블의 컬럼 이름이 같은 값을 기준으로 하면 자연 조인이고, 특정 컬럼을 지정하면서 같 은 값을 비교하면 동등 조인이며, 값이 다른 것을 비교하면 비동등 조인이 된다. 외부 조인은 기준 테이블이 참조 테이블과 조인하되, 참조 테이블에 조인할 데이터가 있 는 경우는 참조 테이블의 데이터를 함께 출력하고, 참조 테이블의 조인 데이터가 없는 경 우에도 기준 테이블의 모든 데이터를 표시하고 싶은 경우에 사용한다. 보통 기준 테이블 의 모든 값에 대해 참조 테이블의 데이터가 반드시 존재한다는 보장이 없는 경우 외부 조 인을 사용한다. 또 내부 조인에서 조인의 대상이 되는 컬럼을 명시적으로 선언하기 위하여 USING 조건절 이나 ON 조건절이 사용된다.

서브쿼리(Sub Query)

1. 서브쿼리 개념
서브쿼리는 다음 그림과 같이 SQL문 안에 포함된 또 다른 SQL문을 의미한다. 서브쿼리의 용도는 알려지지 않은 기준을 위한 검색을 위해 사용한다.

2. 서브쿼리 유형
서브쿼리는 동작하는 방식이나 반환되는 데이터의 형태에 따라 분류할 수 있다. 동작하는 방식에 따른 서브쿼리의 종류는 다음과 같다.

집합 연산

1. 집합 연산 개념 테이블을 집합 개념으로 보고, 두 테이블 연산에 집합 연산자를 사용하는 방식이다. 집합 연산자는 여러 질의 결과를 연결하여 하나로 결합하는 방식을 사용한다. 즉, 집합 연산자 는 2개 이상의 질의 결과를 하나의 결과로 만들어 준다. 일반적으로 집합 연산자를 사용 하는 상황은 서로 다른 테이블에서 유사한 형태의 결과를 반환하는 것을 하나의 결과로 합치고자 할 때와 동일 테이블에서 서로 다른 질의를 수행하여 결과를 합치고자 할 때 사 용할 수 있다.
2. 집합 연산 유형
테이블을 집합의 개념으로 보고 두 테이블 사이에 가능한 집합 연산은 다음과 같은 종류 가 있다.

01 기본 SQL 작성하기

개발롬! — Mon, 10 May 2021 14:48:29 +0900

DDL 활용

테이블의 구조와 제약 조건을 생성, 삭제하고 수정하는 DDL(Data Definition Language) 명령문을 작성할 수 있다.

DDL 개요

1. DDL 대상
DDL(Data Definition Language)은 `데이터를 정의하는 언어'로서, 보다 엄밀하게 말하면 `데이터를 담는 그릇을 정의하는 언어'이며, 이러한 그릇을 DBMS에서는 오브젝트라고 한 다. DDL을 통해 정의할 수 있는 대상, 오브젝트 유형은 다음과 같다.

2. DDL 조작 방법
오브젝트를 생성, 변경 그리고 제거하기 위해 다음과 같은 명령어를 사용한다.

DDL 명령어로 분류되지는 않지만 DDL과 같이 사용되는 명령어가 있다. 비상용 제품인 M*SQL의 경우, 생성된 오브젝트의 목록을 조회하기 위해서는 SHOW 명령문을 사용하며, 내용을 조회하기 위해서는 SELECT 문을 사용한다. 상용 제품인 O*의 경우 SELECT로 목 록과 내용을 조회한다.

DDL 활용

데이터베이스를 구축하기 위해 스키마, 테이블, 도메인, 인덱스, 뷰와 같은 오브젝트에 대 한 DDL 적용이 필요하나, 본 학습에서는 테이블만을 대상으로 한다.

1. 테이블 생성
테이블 생성을 위한 DDL 사용 방법은 다음과 같이 두 종류로 분류할 수 있다.

2. 테이블 변경
ALTER를 이용하여 테이블 구조를 변경하는 문법은 다음과 같다.

3. 테이블 삭제, 절단, 이름 변경
DROP TABLE, TRUNCATE TABLE, RENAME TABLE 명령문을 사용하여 테이블을 삭 제, 절단, 이름 변경을 할 수 있다. 테이블 및 테이블 내용을 삭제하기 위한 명령어의 사 용 문법은 다음과 같다.

제약 조건 적용

1. 제약 조건 유형

2. 제약 조건 활용
테이블 생성을 위한 CREATE 문에 제약 조건을 명시하는 형태로 사용하며, ALTER를 통 해 테이블의 제약 조건을 변경할 수 있다.

SQL 활용 주요 내용

SQL은 DDL, DML 및 DCL과 같은 유형의 작업을 통해 데이터베이스 안에 그릇을 만들고 그 안에 데이터를 담거나 꺼내어 사용하는 도구다. 본 학습의 주요 내용과 이들 간의 관 계는 다음 그림과 같다.

DML 활용

한 개의 테이블에 대해 데이터를 삽입, 수정, 삭제하고 행을 조회하는 DML(Data Manipulation Language) 명령문을 작성할 수 있다.

DML 개요

1. DML 의미
데이터를 조작하는 명령어를 DML(Data Manipulation Language)이라고 한다. 여기서 조작 은 데이터 관점에서 생명 주기를 제어하는 것을 의미한다.
2. DML 유형
데이터의 생명 주기 관리 및 활용을 위해 사용하는 DML 명령어는 다음과 같다.

DML 명령문

1. 데이터 삽입(INSERT)
데이터를 삽입하기 위한 명령어로 다음과 같이 두 가지 형태의 명령문 형식을 제공한다. 이때 데이터 삽입 결과로 하나의 레코드가 추가된다. 따라서 삽입에 사용되는 정보는 하 나의 레코드를 충분히 묘사해야 한다.

2. 데이터 조회(SELECT)
데이터의 내용을 조회할 때 사용하는 명령어이다. 가장 많이 사용되는 SQL 명령어로서, 다른 DML 명령어와 같이 사용되어 SQL의 활용을 풍부하게 한다. SELECT 명령어의 기본 형식은 다음과 같다.

3. 데이터 수정(UPDATE)

4. 데이터 삭제(DELETE)

DCL 활용

업무 단위인 트랜잭션의 완료와 취소를 위한 DCL(Data Control Language) 명령문을 작성할 수 있다.

DCL 개요

1. DCL 유형
데이터베이스에서 데이터 이외의 오브젝트에 대해 조작할 필요가 있다. 이때 사용하는 SQL 명령을 DCL(Data Control Language)이라고 한다. DCL의 조작 대상, 오브젝트 유형은 다음과 같다.

트랜잭션 제어를 위한 명령어 TCL(Transaction Control Language)이 있다. TCL과 DCL은 대상이 달라 서로 별개의 개념으로 분류할 수 있으나, 제어 기능의 공통점으로 DCL의 일 부로 분류하기도 한다. 각 유형별 DCL 명령어는 다음과 같다.

DCL 활용

1. 사용자 권한 부여
권한은 시스템 권한과 객체 권한으로 분류한다. 각 권한을 부여하기 위한 명령어 사용법 은 다음과 같다.

2. 사용자 권한 회수
GRANT에 대응하는 권한 회수 명령은 REVOKE이며, 권한 유형별 대응하는 명령어 구조는 다음과 같다.

DCL 이론적 배경인 접근통제

1. 접근 통제 개념 데이터베이스의 보안을 구현하는 방법으로 접근 통제 방법을 사용한다. 접근 통제 정의는 아래와 같다.

2. 접근통제정책에따른유형
접근 통제 정책에는 크게 다음과 같은 2가지 유형이 있다.

3. 접근 통제와 DCL 관계
강제 접근 통제의 경우, 제3자의 종류에 따라 보다 세분화된 정책이 존재한다. 접근 통제 정책의 두 가지 가운데 데이터베이스관리시스템(DBMS)에서 채택한 접근 통제 정책은 임 의 접근 통제, DAC 방식이다. 데이터베이스관리, 특히 접근 통제 용도로 SQL에서 사용하 는 명령어가 바로 DCL(Data Control Language)인 것이다.

TCL활용방법

1. 트랜잭션 개념

트랜잭션은 `일 처리 단위'를 의미한다. 보다 다양한 관점에서 트랜잭션은 다음과 같은 모습을 가진다.

• 트랜잭션은 논리적 연산 단위이다. • 한 개 이상의 데이터베이스 조작이다. • 즉, 하나 이상의 SQL 문장이 포함된다. • 트랜잭션은 `거래'다. • 이때 거래 결과가 모두 반영되거나 또는 모두 취소되어야 한다. • 즉, 데이터베이스에서의 트랜잭션은 특별한, 엄격한 거래를 의미한다. • 분할할 수 없는 최소 단위이다.

2. 트랜잭션 제어
트랜잭션을 제어한다는 것은 흐름의 구조를 바꾼다는 것이 아니라 트랜잭션의 결과를 수 용하거나 취소하는 것을 의미한다. 이러한 작업을 수행하는 TCL 관련 명령어는 다음과 같다.

04 UI제작하기

개발롬! — Tue, 4 May 2021 17:47:55 +0900

UI 제작

UI화면 제어기능을 어떤 방법으로 할 것인지 선택할 수 있다.
자가 검증을 위하여 단위별 상세 체크리스트를 작성할 수 있다.
UI 구현 표준에 따라서 GUI 디자인 가이드를 기반으로 UI를 제작할 수 있다.

UI 개발환경 수립

1. UI 디자인 및 퍼블리싱 환경 수립

UI 제작을 위하여 시스템의 목표 및 범위에 따라 그래픽 저작도구 및 퍼블리싱 도구를 PC에 설치하여 이미지로 만들고, HTML 및 CSS로 웹 문서화하는 퍼블리싱을 수행한다.

2. UI 개발환경 수립

제작된 이미지와 퍼블리싱된 파일을 개발하기 위하여 Web 및 App 환경의 엔진 및 통합 개발도구를 설치한다.

UI 제작

1. UI 디자인 가이드 숙지

제작될 UI의 공통 규칙(네이밍 규칙, 폰트, 색상 등) 및 리소스 내용(레이아웃, 내비게이션, 버튼, 이미지 등) 등이 언급된 UI 디자인 가이드를 숙지한다.

2. 개발언어 숙지

(1) HTML5

(가) DOCTYPE(Document Type Declaration)
HTML5 문서 최상단에 DOCTYPE을 반드시 넣어 주어야 한다. DOCTYPE은 HTML 과 XHTML의 두 가지가 있으므로 HTML5 작성 시 HTML로 작성할지, XHTML로 작 성할지를 첫 부분에 선언해 주어야 한다.

(나) 요소(Element)
화면의 영역을 나타내는 Semantic 태그들과 화면 제어 기능과 관련된 Element 요 소들로 구성한다.

(다) 인풋 타입(input Type)
HTML 5 화면에서 사용자로부터 데이터를 받아들이기 위해 상호적인 제어가 가능 한 input Type의 태그는 여러 가지 타입으로 활용 가능하다.

(라) 속성(attribute)
속성(attribute)은 특징을 명세한다. 요소에 추가적인 정보를 제공하며, 시작 태그에 위치해야 하며 이름과 값의 쌍을 이룬다.

(마) 웹 폼(Web Form)
checkbox, radio, password 등 몇 개의 입력타입을 가지고 있는 Form이다.

(2) CSS

(가) 기본 구조
CSS 규칙은 선택자(selector)와 선언부(declaration)로 나뉜다. 선언부는 다시 속성 (property)과 속성값(value)으로 나뉜다.
(나) 적용 방법
CSS 적용 방법은 인라인/내부 스타일 시트/외부 스타일 시트의 세 가지로 적용할 수 있다.

(다) 클래스(class) 선택자
클래스를 선택 가능한 선택자이다. 예를 들어 p{color:blue}로 지정하면 문단의 색깔 이 파란색으로 지정된다.
(라) 아이디(id) 선택자
클래스는 .을 이용하여 정의하고 아이디는 #을 이용하여 정의한다. 클래스와 아이 디의 차이점은 클래스의 경우 여러 개를 사용할 수 있지만 아이디는 고유성을 가 지므로 한 문서에 한 번만 사용할 수 있는 점이다.
(마) 텍스트 color
컬러의 속성을 텍스트, 문단, 테이블 안에 적용하여 사용이 가능하다.
(바) direction
(사) line-height
라인의 높이를 지정한다. 라인의 높이라기보다 줄간격으로 해석하는 것이 좋다.

단위별 상세 체크리스트 검토

UI 자가검증을 위하여 제작한 UI에 대한 레이아웃, 색상 등 종합적인 측면의 상세 체크리스트를 작성한다.

03 UI 저작도구 활용하기

개발롬! — Tue, 4 May 2021 17:10:21 +0900

UI 저작도구 파악

개발환경에 적합한 저작도구를 파악할 수 있다.

UI 개발환경 파악

WEB 개발환경 파악

WEB 애플리케이션 개발을 위해서 구축해야 하는 개발환경을 파악한다. 보통 자바 실행을 위한 JDK(Java Development Kit), 자바와 JSP(Java Server Page) 통합 개발을 위한 Eclipse (자바 개발 프로그램), JSP로 구축된 웹사이트 파일을 실행시켜 주는 엔진 역할의 톰캣 (Tomcat)을 개발 환경에 설치한다.

App 개발환경 파악

App이 실행될 운영체제는 대체로 디바이스에 따른 안드로이드와 iOS로 구분된다. 안드로 이드는 구글에 의해 개발되고 배포되는 운영체제이며, iOS는 애플의 스마트기기에 내장되 어 있는 운영체제이다. 스마트기기에서 실행되는 애플리케이션의 경우 네이티브 앱, 웹 앱, 하이브리드 앱으로 구분된다.

UI 저작도구 파악

UI 개발 목표 및 범위 정의

시스템개발전에소프트웨어개발목표및범위정의단계에서UI 분야의개발목표및 범위 정의를 필수적으로 수행하여 시스템 개발 계획 전반에 반영하고, 성공적인 수행을 위해 이해관계자 간에 UI 개발 필요성 및 목표를 공유하고 개발 범위를 수립한다. 수립한 학습 목표 • 개발환경에 적합한 저작도구를 파악할 수 있다.

UI 화면 디자인

UI 화면 디자인에 활용될 레이아웃, 컬러 패턴, 타이포그래피, 화면 디자인 요소들을 그래 픽 형태로 정의한다. 그래픽 저작도구를 활용하여 설계된 UI에 따라 화면을 디자인한다.

UI 퍼블리싱

퍼블리싱을 통해 구현된 화면 디자인을 웹 브라우저에서 볼 수 있도록 웹 문서화하는 코 딩 작업을 수행한다. 퍼블리싱의 코딩 작업에는 HTML, CSS, 스크립트(JavaScript, jQuery) 언어를 이용한다.

UI 개발

퍼블리싱을 통해 디자인을 최대한 살려서 작성된 html, css, jquery 작업파일을 기반으로 시스템이 작동하고, 데이터와 연결해 주는 코딩을 수행한다.

UI 개발환경을 파악한다.

일반적인 사이트 개발을 위한 WEB 개발환경(JSP 기준)을 파악한다.

일반적인 웹사이트 개발을 위한 개발언어로는 jsp, asp, php 등이 사용 가능하다. jsp의 경 우, JDK 설치를 통해서 java 파일을 구동시키고, Elipse와 같은 통합 개발도구를 설치하여 java 파일과 jsp 파일을 기준으로 시스템을 개발한다. 또한, 웹서버인 Tomcat이 설치되어 jsp로 구축된 웹사이트 파일을 실행시킨다.

App 개발환경을 파악한다.

스마트폰에서 구동되는 애플리케이션인 앱(App)의 경우 운용 플랫폼 환경에 따라 크게 3 가지로 구분된다. 즉, 스마트폰 운영체제에서 프로그래밍 언어를 사용하여 제작하는 네이 티브앱, 웹브라우저를통해실행되는앱인웹앱, 웹표준기술과네이티브앱변환을 통해서 구동되는 하이브리드 앱으로 구분되며, 운영체제의 종류에 따라 Android Studio(안 드로이드 환경)와 Xcode(iOS)를 이용하여 앱을 개발한다.

UI 저작도구를 파악한다.

UI 개발 목표 및 범위를 정의한다.

시스템 개발 전에 이해관계자(예:사용자, 기획자, 디자이너, 개발자) 간에 소프트웨어 개발 목표에따른UI에대한개발목표및범위를정한다. 수립한개발목표및범위는문서편 집도구 및 프로토타입 도구를 통해서 정의하여 이해관계자 간에 공유한다.

UI 화면 디자인을 위한 저작도구를 파악한다.

UI 화면 디자인에 활용될 레이아웃, 컬러, 타이포그래피, 화면 디자인 요소 등을 정의하여 전체적으로 통일감 있게 화면 디자인을 만드는 단계로, 사용하는 디자인 저작도구에 따라 화면 디자인된 이미지의 형태가 벡터 또는 비트맵 형태로 구현된다. 대표적인 툴로서 미 국 A사에서 개발한 그래픽 저작도구의 경우 비트맵 기반으로 다양한 사진과 이미지를 저 작할수있고, 그외벡터기반의그래픽저작도구의경우벡터를기반으로빠르고유연 한 저작이 가능하며, 인터페이스 디자인 기반의 그래픽 저작도구의 경우 제작된 화면들을 실제 동작되는 것처럼 프로토타이핑할 수 있다.

UI 퍼블리싱을 위한 저작도구를 파악한다.

완성된 이미지 형태의 화면 디자인 이미지를 웹 브라우저에서 볼 수 있도록 HTML, CSS, Javascript, jQuery 형태로 웹 문서화하는 퍼블리싱 단계에서 코딩이 가능한 편집도구를 파악한다.

UI 개발을 위한 저작도구를 파악한다.

웹 개발 경우의 설치항목을 파악한다.
WEB 개발(JSP 기준)의 경우, 웹 개발을 수행하기 위해 자바 구동을 위한 자바 엔진(JDK), 웹사이트 및 앱 개발을 위한 통합 개발도구인 Eclipse, 웹서버 구동을 위한 Tomcat을 개발환경에 설치한다.

앱 개발 경우의 설치항목을 파악한다.
앱 개발의 경우, 운영체제에 따라 안드로이드에서는 Android Studio를 설치하여 안드로 이드 전용 앱 개발을 수행하고, iOS에서는 Xcode를 설치하여 iOS 전용 앱 개발을 수행 한다.

UI 저작도구 선정

UI구현 표준 검토 결과를 바탕으로 저작도구를 선정할 수 있다.

UI 구현 표준 검토 결과 파악

사이트의 특성을 고려한 UI의 요소와 패턴으로 정의되어 있는가

사이트의 특성을 고려한 UI의 요소와 패턴으로 UI가 정의되어 있는지 파악하고, 통일되고 일관되며 재사용이 가능하도록 UI의 표준이 작성되어 있는지 파악한다.

웹 호환성을 위해서 다양한 브라우저에서 실행되는가

HTML5 기반의 웹 표준을 준수하여 다양한 브라우저(예: 인터넷익스플로러, 크롬)에서 실 행되고, 다양한 형태(예: 네이티브 앱, 하이브리드 웹, web, 웹 앱)로 실행되는지 파악한다.

장애를 가진 사람과 장애를 갖지 않은 사람 모두가 웹사이트를 이용할 수 있게 웹 접근 성을 준수하는가

대체 텍스트, 광과민성 발작 예방, 멀티미디어 대체 수단, 쉬운 내비게이션 등을 통해 장 애를 가진 사람과 장애를 갖지 않은 사람 모두가 웹사이트를 이용할 수 있게 웹 접근성을 준수하는지 파악한다.

UI 저작도구 선정

프로토타입의 목적 수립

프로토타입의 목적은 주로 시나리오에 대한 검증, 또는 인터랙션에 대한 느낌의 확인이다. 목적에 따라서 시나리오 검증을 위한 툴은 빠르게 제작할 수 있고 기능이 간단하면서 충 실도가 낮은 방법을 활용하여 구현하게 된다. 반면 인터랙션 검증을 위한 툴은 느리게 제 작되지만 기능이 복잡하면서 충실도가 높은 방법으로 구현하게 된다.

프로토타입 목적에 따른 UI 저작도구 선정

프로토타입의 목적과 방법에 따라서 프로토타입 방법(예: 페이퍼 프로토타입, 스토리보드, 디지털 프로토타입)을 선택하고, 이에 따른 UI 저작도구를 선정한다.

수행 순서

프로토타입 목적을 수립한 후 이에 따른 방법을 선택한다.

시나리오 검증 목적이라면 낮은 충실도 형태의 프로토타이핑을 수행한다.

아이디어를 도출해 내기 위하여 시나리오 스케치를 한다.

아이디어 표현, 브레인스토밍을 통해서 아이디어를 도출한다(페이퍼 프로토타입의 전 단계).

속도감 있게 제작하기 위해 페이퍼 프로토타입 제작 여부를 고려하여 제작한다.

종이를 이용하여 해당 서비스를 실제 구현한 것처럼 제작하는 방법이며, 화면 설계 시 문제를 발견하고자 할 때 활용한다. 디테일에 속도감 있고 유연성 있게 활용한다.

충실도 높은 프로토타입을 위해 와이어프레임 제작 여부를 고려하여 제작한다.

와이어프레임 제작 툴을 이용하여 작업하며, 페이퍼 프로토타입 결과를 한 단계 더 구 현하여 충실도가 높은 형태로 정리하는 데 적합하다. 실제 콘텐츠의 기능을 세밀하게 표현하기도 하나 정적인 화면들로 구성되기 때문에 이용의 흐름과 같은 실제 사용자 들의 경험은 그대로 표현하지 못하는 단점이 있다.

서비스의 이해도를 높이기 위해 스토리보드 제작 여부를 고려하여 제작한다.

스토리보드는 스케치한 내용이나 그림을 순서대로 배치하여 사용 사례를 표현한 형태 이다. 서비스를 시각적이고 풍부한 묘사로 표현하므로 정제된 아이디어를 나타낼 수 있다. 프로세스나 시스템을 보여줄 때 유용하며, 서비스와 관련된 이해도를 높여준다.

인터랙션 확인 목적이라면 높은 충실도 형태의 프로토타이핑을 수행한다.

(1) 디지털 프로토타입 제작 여부를 고려하여 제작한다.

마우스클릭, 키보드입력등의인터랙션에대한사용자반응을바로확인할수있고, 반복 테스트가 중요하다. 주의할 점은 페이퍼 프로토타입과 전반적으로 유사하다.

카드보드 프로토타입 제작 여부를 고려하여 제작한다.

골판지 등을 이용해 물리적인 시제품을 만들어 서비스의 많은 측면을 검토하는 방법 으로 서비스 개발의 후반 단계에 유용한 방법이다.

피지컬 프로토타입 제작 여부를 고려하여 제작한다.

제품이나 서비스가 완성되기 전에 물리적인 프로토타입을 제작하고 테스트하는 방법 이다. 개발 초기에 신속하게 대강의 프로토타입을 제작하고, 후기에는 동작과 관련된 외형을 프로토타입으로 제작하고 검증하는 데 사용한다.

프로토타입 목적에 따른 UI 저작도구를 선정한다.

1. F 저작도구 적용의 적절성을 판단한다.

모바일 전용 프로토타입 툴로서, 화면 간의 이동을 확인함으로써 시나리오를 검증하는 데 최적화되어 있다. 화면에 터치 영역을 지정하고 이동할 화면을 선으로 연결한 뒤 트랜지 션 효과를 정해주면 간단한 화면 간 이동 효과가 만들어진다.

2. I 저작도구 적용의 적절성을 판단한다.

시나리오 검증에 최적화되어 있는 툴로서, 시중의 툴 가운데 가장 빠른 프로토타이핑을 할 수 있다. 모바일 환경에서 발생하는 대부분의 터치 인터랙션과 트랜지션을 제공한다. 웹과 와이어프레임 제작도 지원한다.

3. O 저작도구 적용의 적절성을 판단한다.

K사에서 제공하는 프로토타이핑 툴로서, 내부에서 제공하는 컴포넌트가 다양하기 때문에 준비된 리소스가 없어도 프로토타이핑이 가능하다. 트랜지션 효과는 지원하지 않는다.

4. P 저작도구 적용의 적절성을 판단한다.

준비된 화면이 있으면 빠르게 인터랙션만 추가해서 프로토타입을 할 수 있으며, 오븐처럼 기본적으로 제공되는 컴포넌트가 있기 때문에 이를 활용한 프로토타이핑도 가능하다.

5. O 저작도구 적용의 적절성을 판단한다.

패치라고 하는 각각의 기능을 가진 박스들을 선으로 연결하여 하나의 프로그램을 완성시 키는 형태이며, 인터랙션 프로토타이핑을 하는 데 최적화되어 있다. High-Fidelity 툴 중에 서는 비교적 접근하기 쉬운 툴이기는 하나 적지 않은 시간을 들여야 하고, 쿼츠컴포저가 M사 OS에서 제공되는 플랫폼이기 때문에 사용 환경이 제한적이다.

저작도구 이용하여 프로토타입 UI 제작

선정된 저작도구를 이용하여 프로토타입 UI를 제작할 수 있다.

프로토타입(Prototype)의 개요

1. 프로토타입 개념

사용자의 요구사항을 충분히 분석할 목적으로 시스템의 중요 일부분을 우선 구현한 후 반 복하는 개발 모델을 프로토타입이라고 한다.

2. 프로토타입 특징

프로토타입은 사전에 UI를 시험제작하여서 이해관계자 간의 원활한 의사소통을 수행하는 개발 모델이다. UI를 통해서 프로토타입을 개발한 후에는 이해관계자 간에 평가 및 수정 과정을 반복하면서 요구사항을 검토한다.

프로토타입 종류

프로토타입은 다양한 기능 구현의 정도를 고려하여 수평적 프로토타입과 수직적 프로토타 입으로 구분한다.

프로토타입의 개발 절차

프로토타입의 개발 절차는 시스템 개발 계획서를 기반으로 계획을 수립하고, 요구사항 분 석 과정에서 프로토타입을 식별한 후, 핵심 기능을 기준으로 프로토타입을 개발하며, 평가 한 후 폐기하거나 실제 시스템에 적용한다.

02 와이어프레임 작성하기

개발롬! — Mon, 5 Apr 2021 14:25:34 +0900

와이어프레임 작성

기획된 UI/UX 콘셉트에 따라서 화면의 기본 구조를 정의할 수 있다.
사용자 인터페이스 요소의 구성에 따라 모든 화면들을 간략하게 설계할 수 있다.
UI 기술과 개발 난이도를 고려하여 요소별 액션을 정의할 수 잇다.

구조도(사이트맵)

구조도 정의

(1) 정보 공간의 형태를 개괄적으로 보여주며, 각각 사이트 개발자와 사용자를 위한 요약 도 기능을 한다.
(2) 페이지와 다른 콘텐츠 요소들 간의 관계를 보여주기 때문에 조직화, 내비게이션, 레이 블링 시스템을 표현하는 용도로 사용하는 것이다.

구조도 설계

(1) 상위 레벨 구조도
메인 페이지에서 시작해서 하위 페이지들을 추가하고 단순성을 유지하며 구조에 계속 적으로 살을 붙여 나가며 사용자의 예상 접근 경로뿐 및 조직화 및 콘텐츠 관리에 대 한 논의를 통해 구조도를 그려 나간다. 구조도는 손으로 그릴 수도 있지만 비지오나 옴니그래플과 같은 다이어그램을 그리는 소프트웨어를 사용 할 것을 권한다.
(2) 상세 구조도
전체 사이트에 대한 계획을 다루며 메인 페이지에서부터 목적지 페이지까지 모든 정 보 계층구조를 다루고 있어야 한다.

와이어프레임 작성하기

기획된 UI/UX 콘셉트에 따라서 화면의 기본 구조를 정의할 수 있다.
(3) 구조도 조직화하기
상세 구조화 된 구조도를 고유 식별자 체계를 사용하여 모듈별로 분류하여 콘텐츠 목 록과 구조화 프로세스를 연결하도록 한다.

와이어프레임

비주얼 디자인이 시작되기 전에 흑백으로 제작되어 UX/UI 디자인의 방향을 잡는 역할을 하며 페이지나 화면에 보여지는 요소들을 정하기 위해 그려지는 일종의 ‘프로토타입’이 라고 할 수 있다. 피드백과 함께 이루어지는 작업이기 때문에 한번에 완성도를 높이기보 다 반복적 작업을 진행하는 것을 염두 해 두고 작성해야 한다.

정의

대략적인 스크린 디자인을 일컫는 것으로, 각 페이지와 기능 간의 관계와 구조를 제안하 고 시각화하는 것이다. 이러한 와이어프레임은 인터페이스 디자인에서 기본 안내서로 사 용한다. 즉, 와이어프레임은 인터페이스의 기본 요소를 담은 레이아웃을 그림 등으로 표현 한 것으로, 기획서나 스토리보드 등의 UI 디자인을 의미한다. 가벼운 스케치와 인터랙티브 프로토타입 사이에 위치한다고 본다.

(1) 개별적인 페이지 혹은 템플릿이 구조적인 관점에서 어떻게 보여야 하는지를 정의한다.
(2) 사이트의 정보구조와 시각 디자인 및 정보 디자인의 특성을 모두 가지고 있다.
(3) ‘페이지’라고 불리는 상대적으로 좁은 2차원 공간에 포함될 콘텐츠와 정보구조를 설명한다.
(4) 콘텐츠 요소를 어떻게 그룹핑 할지, 어떻게 배열할지, 어떤 요소 그룹들이 높은 우선 순위를 가질지 결정하며 화면설계 작업을 진행한다.
(5) 메인 페이지, 주요 카테고리 페이지, 검색으로 이동하는 인터페이스와 같이 사이트의 가장 중요한 페이지들과 그 밖의 중요한 애플리케이션을 위해 생성된다.

화면 설계의 종류

다양한 완성도의 수준에 따라 지니는 각각의 장단점을 항상 염두에 두게 되면, 화면설계 는 정보구조 설계 프로세스에서 커뮤니케이션과 협업을 위한 매우 강력한 도구가 된다.

(1) 낮은 완성도의 화면설계
어떤 그래픽 요소나 실제 콘텐츠가 담겨있지 않다. 이 화면설계는 시각 디자이너가 페 이지의 글로벌, 로컬, 컨텍스추얼 내비게이션 요소에 집중할 수 있도록 해준다.

(2) 중간 완성도의 화면설계
세부사항들이 잘 표현되어 있다. 이 화면설계 콘텐츠, 배열, 내비게이션의 몇 가지 측 면을 보여주기 위한 목적으로 만들어졌다.

(3) 높은 완성도 화면설계
실제 페이지 모습과 매우 흡사하다. 이 화면설계는 대부분의 인포메이션 아키텍트가 그래픽 디자이너의 도움 없이도 이미지를 사용할 수 있다는 것을 보여준다.

와이어프레임 장점

(1) 디자인을좀더세밀하게파악할수있게한다. 세밀하게작성된문구는화면을이해 하는데 도움을 준다.
(2) 와이어프레임을 몇 장 묶으면 사용성에 대한 피드백을 얻을 정도의 충분한 완성도가 나온다.
(3) 사용자에게 보여줘서 화면에 대해 어떻게 생각하는지, 어떻게 태스크를 완수할지 들여 다 볼 수 있다.
(4) 사이트의 디자인과 기능에 대한 요구 사항을 명확히 전달할 수 있는 커뮤니케이션 도 구 역할을 한다.
(5) 디자인명세문서를상당부분대체할수있다.

01 정보구조 설계

개발롬! — Wed, 31 Mar 2021 17:02:14 +0900

정보구조 설계

결정된 콘텐츠와 기능에 따라서 정보 구조를 설계할 수 있다.

정보구조 설계에서의 모호성

분류시스템은언어기반위에서성립되는것이며, 언어는하나의단어로여러가지뜻을나 타내는 경우가 많다.‘배’라는 단어도 먹는 배와 타는 배 그리고 사람의 배와 같이 다양한 뜻이 있다. 이와 같이 단어의 모호함은 정보를 분류하는 시스템을 구축하는 데 불안정한 요 소로 작용한다. 홈페이지에서 우리는 정보의 그룹을 설명할 때 대부분의 경우 단어를 사용해 서 표현을 하는데, 이런 언어의 모호함으로 이용자에게 혼돈을 줄 수 있으며 이런 문제들이 홈페이지 전체에서 일어난다면 심각한 문제가 될 수도 있다. 정보를 분류할 때는 이런 모호 성을 충분히 염두에 두고, 되도록이면 이용자들이 한번에 인식을 할 수 있는 직관적인 단어 를 선정하여 정보의 그룹을 나타내는 단어로 사용하는 것이 좋다.

정보구조 설계에서의 이질성

이질성은 성질이 다른 것들을 말한다. 앞에서 홈페이지의 정보구조를 설명하면서 언급했지만, 홈페이지에는 여러 이질적인 정보들이 모여 구성된 페이지들이 많이 있다. 한 페이지에 신문 기사에관련된내용과현재세일을하고있는상품에대한내용도들어갈수있다. 뿐만아 니라 여러 매체들이 함께 제시되고 있기도 하다. 이런 홈페이지의 이질적인 본성 때문에 일 관성 있고, 체계적인 정보구조 설계를 하는데 많은 어려움이 있다.

정보구조 설계에서의 시각차이

사람에 따라 달리 느끼는 시각의 차이를 일컫는 말이다. 사람들은 자신의 기준에서 생각을 한다. 물론 홈페이지를 제작하는 개발자도 자신의 생각에 근거하여 구축하게 된다. 그리고 개 발자들은 홈페이지의 정보구조를 설계하면서 다른 이용자들도 자신과 같은 생각을 가질 것이 라는 착각을 하여 이용자들이 아무런 문제없이 홈페이지를 이용할 것이라고 믿게 된다. 그렇 기 때문에 홈페이지의 정보구조를 설계할 때는 자신만의 관점에서 벗어나 이용자의시각에서 객관적으로 바라보는 것이 중요하다.

정보구조 설계에서의 내부정책

홈페이지 구축시 회사 내부에서 운영하는 기준인 내부정책이 있을 것이다. 이러한 내부정책 은 홈페이지를 구축 운영하는데 있어 시작부터 마무리까지 지속적인 영향을 미치게 된다. 메 인 페이지의 구성에서나, 중요한 컨텐츠의 우선순위를 정하는 문제에서도 마찬가지일 것이다. 홍보부서에서는 홈페이지를 홍보하는 내용이 가장 중요한 이슈가 되겠지만, 경리부서에서는 홍보가 가장 중요한 이슈가 아닐 수 있기 때문이다.

주제별 체계

주제나 화제에 따라 구분하는 방법으로, 전화번호에서 업종별로 분류해놓은 것이 이에 해당 된다. 홈페이지 전체가 주제 중심으로 설계된 곳은 많지 않지만, 부분적으로 적용할 경우 좋 은결과를얻을수있다. 그럼과연어디서부터어디까지의컨텐츠를하나의주제로다룰것 인가에 대해 고민해야 한다. 윤곽이 분명하지 않은 주제를 잡다보면 나중에 주제별로 나눈 영역이 서로 겹쳐 이용자에게 혼돈을 줄 수 있다.

작업 지향형 체계

정보 컨텐츠와 서비스 컨텐츠를 프로세스와 기능 그리고 업무의 집합으로 나누어 편성한다. 이 체계는 수행하려는 우선순위의 업무들이 그리 많지 않을 때 더욱 적합하다. 오늘날 웹에 는 작업 지향형 컨텐츠 체계가 많지 않은 편이다. 그러나 홈페이지에 점점 더 많은 서비스 기능들이 첨가됨에 따라 이러한 양상은 변화하게 될 것이다. 인트라넷과 엑스트라넷은 작업 지향형 체계에 적절한 형태를 보여준다. 작업 지향형 체계는 이용자들이 생각하는 작업에 의 하여 메뉴 체계가 분류되어 있기 때문이다.

이용자 구분형 체계

홈페이지를 이용하는 이용자를 두 분류 이상으로 명확히 구분할 수 있을 때 적합한 방법이 다. 이 방법은 홈페이지 내에 홈페이지가 있는 형태로, 메인 페이지에서 여러 이용자들 대상 으로혼잡한구성을하는것을피할수있다. 이용자구분형체계는개방형과폐쇄형으로나 누어서 볼 수 있다. 개방형에서는 여러 이용자들이 접속해 이용할 수 있으나 폐쇄형에서는 로그인을 통해 일정한 이용자들만이 사용할 수 있다. 이런 체계는 보안을 중시해야하는 홈페이지나 유료화 홈페이지의 설계에 적합하다.

은유형 체계

이용자가 쉽게 연상할 수 있는 것을 바탕으로 정보체계를 만드는 방법이다. 휴지통이나 폴더 등과 같이 우리가 데스크톱 화면상에서 많이 보아서 익숙해진 아이콘 개념들을 적용하여 정 보를 체계화하는 방법이다. 이는 이용자에게 상상을 할 수 있게 해준다는 이점이 있으나, 홈 페이지전체에적용을할때는충분히고려해야할사항이다. 은유형체계의성공여부는이 용자에게 얼마나 친근한 것을 사용하는가에 달려 있다.

계층구조

일반적으로 가장 많이 사용되는 구조로서 정보설계가 잘된 홈페이지의 기본구조이기도 하다. 주제들과 상호배타적인 하위 분류들의‘상하관계’는 이용자에게 간단하고 익숙한 구조이다. 그리고 처음 정보구조를 설계하는 초보자들도 간단하고 보편적인 구성 덕분에 쉽게 사용할 수있다. 그러나계층구조를설계할때는몇가지주의할사항들이있다. 첫번째, 계층을분 류할 때는 상호배타적이어야 한다는 것이다. 컨텐츠간의 적절한 배제와 포함의 균형을 이루 어야 하는데, 앞에서 언급한 것과 같이 언어의 모호성으로 말미암아 한 컨텐츠를 완전히 다 른컨텐츠와배타적으로나눌수없는경우가많기때문이다. 두번째, 폭과깊이간에적절 한균형을잡아야한다는것이다. 폭은이용자가홈페이지를방문했을때선택할수있는곳 을 말한다. 선택의 가짓수가 너무 많으면 이용자는 오히려 혼란을 느낄 수 있다. 인지과학에 서는사람이한번에기억할수있는정보의수가다섯에서아홉개정도라고한다. 폭은열 개를 넘기지 않는 한도에서 설계하는 것이 바람직하다. 그렇다고 너무 적은 폭을 사용하여 깊이가 깊어진다면 이용자는 지나치게 많은 클릭을 하게 되어 자신이 원하는 정보를 찾는데 불편함을 느낄 수 있다. 깊이는 네 단계에서 다섯 단계 이상 클릭을 하지 않도록 주의해야 한다. 그리고 앞으로 홈페이지가 지속적인 성장을 해나가야 할 곳이라면 넓고 얇은 구조를 선택하여 나중에 추가 작업을 할 때 대대적인 재구축 없이 컨텐츠를 추가하도록 하는 것이 좋다.

계 층 구 조

하이퍼텍스트 구조는 계층 구조에 비해서 비선형적인 구조를 가지는 것으로, 단위정보와 단 위정보간의링크라는두가지주요요소를포함한다. 어떤정보를들었을때잠깐동안기 억을 하게 되는데, 이때의 정보를 단위정보라고 한다. 이 단위정보는 단위기억에 의해 저장된 다. 단위기억은 감각기억보다는 길게 그리고 장기기억보다는 짧게 기억되는 것으로서, 감각기 억은 청각과 시각 등의 감각기관을 통해서 얻는 정보로 듣고 난 후 곧 잊어버리는 특징이 있 다. 반면에 단위기억은 감각기억보다는 길게 기억되지만 곧 잊어버리는 기억을 말하는 것으 로, 단기에 기억할 수 있는 기억용량을 청크라고 한다. 이러한 단위정보간의 링크를 통해 역 동적이고 유연성 있는 정보구조를 설계할 수도 있지만, 자칫 이용자에게 혼란을 줄 수도 있다. 그러므로 하이퍼텍스트 구조는 계층 구조와 데이터베이스 구조에 바탕을 둔 홈페이지에 서 보조적인 역할을 하는데 사용하는 것이 바람직할 것이다.

데이터베이스 구조

데이터베이스 구조라고 하면 생소하게 들릴지도 모르지만 많이 사용되고 있는 방법이다. 예 를 들어 친구들의 주소록을 정리할 때 친구의 이름을 먼저 적어 넣고 친구의 이름에 해당되 는전화번호, 주소, 나이등여러가지내용들을기입하게된다. 이와같이정리를하는것을 두고 데이터베이스 구조라고 한다. 이름과 같이 공통적으로 세부내용을 묶을 수 있는 것을 레코드라하고, 주소나 나이와 같이 레코드와 관련 있는 세부항목들을 필드라고 한다. 이렇게 정리된 컨텐츠는 검색이 용이하고 추가와 삭제 등 관리하는 데도 편리하기 때문에 매우 많이 사용되는 모델이다. 그리고 홈페이지가 지속적으로 발전해나갈 것이라면 늘어나는 컨텐츠를 관리하는 데도 매우 좋은 방법이다. 하지만 이 방법에도 한계가 있다. 각각의 레코드들은 엄격한 규칙에 따라야 하며, 정해진레코드형식내에서각레코드는동일한필드들을지녀야하고같은필드내에 서는 레코드들 사이에서 일정한 규칙들이 적용되어야 한다. 그러나 폭넓은 이용자층과 이질 적인 특성을 지닌 컨텐츠에서는 이러한 작업이 매우 어렵다. 그리고 이러한 작업들을 하기 위해서는 색인 작업이 필요하다. 색인 작업은 특정한 필드에서 사용될 수 있는 용어들을 정 의하는 것인데, 검색과 브라우징을 지원하는데 중요한 일관성을 부여해준다. 그렇게 색인 작 업을 마치고 나면 어떻게 이용자들이 이 정보들을 검색해야 하는지 한눈에 들어오게 된다. 이때 이용자들은 검색을 활용하면 홈페이지 전체에 구성되어 있는 컨텐츠를 좀 더 쉽게 찾을 수 있게 된다.

04 기본 개발환경 구축하기

개발롬! — Wed, 31 Mar 2021 16:49:22 +0900

운영체제 설치 및 운용

응용개발을 위하여 선정된 운영체제를 설치하고 운용할 수 있다.

운영체제 선택 및 설치

윈도즈 계열 운영체제 선택

윈도즈 계열 운영체제는 개인용, 기업용, 워크스테이션용으로 출시된다.
- Windows Home: 개인 사용자에게 최적화된 운영체제이다.
- Windows Pro: 소규모 기업용으로 최적화된 운영체제이다. Pro는 Home에 비해 관리 및 배포, 도메인 가입, 엔터프라이즈 모드, 원격 데스크톱 지원, Hyper V와 같이 향상된 기 능을 제공한다
- Windows Pro for Workstation: 트랜잭션이 몰리거나 복구 기능을 필요로 하는 소규모 기업용 운영체제이다. Pro에 비하여 CPU를 4개까지 동시 지원하여 동시 처리 성능이 뛰어나며 메모리도 6테라바이트까지 지원한다. 또 비휘발성 메모리 모듈을 지원하여 전 력이 공급되지 않아도 데이터를 유지할 수 있어 안정성이 향상되었으며 파일 복원을 위해 향상된 ReFs를 지원한다.

리눅스/유닉스 계열 운영체제 선택

오픈소스 기반의 리눅스와 유닉스는 개발사 및 제공 업체가 다양하며 리눅스는 Redhat, 페도라, 센트OS와 같은 Redhat 계열과 데비안, 우분투, 칼리, 라즈비안과 같은 데비안 계 열 그리고 기타 리눅스(젠투, 아치, 슬랙웨어) 등으로 구분된다.

운영체제 운용

외부의 침입이나 바이러스로 인해 시스템이 통제 불능의 상태가 되어 불필요한 리소스를 낭비하거나 중요한 데이터의 유실을 방지하기 위해 다음 사항을 지속 점검하여 운용한다.

1. 서버 운용 기준

- 운용 아키텍처 및 기능 파악
- 네트워크 구성 현황 및 장비 매뉴얼 확보
- 장비 가동 및 중지 매뉴얼 확인
- 백업 주기, 보안 업데이트 주기 설정 및 점검 - 트러블 발생 시 대처 방안 마련

개별 PC용 운영체제 운용 기준

- 정기적인 데이터 백업
- 주기적 보안 업데이트
- 시스템 백업 정례화
- 트러블 발생 시 문의처 정보 확인

03 네트워크 기초 활용하기

개발롬! — Wed, 31 Mar 2021 16:36:54 +0900

네트워크 계층 구조 파악

네트워크 계층 구조에서 각 층의 역할을 설명할 수 있다.

네트워크 개요

원하는 정보를 원하는 수신자 또는 기기에 정확하게 전송하기 위한 기반 인프라를 네트워 크라고 한다. 정보 전달 시에는 약속한 규칙에 따라야 하는데 이를 프로토콜이라고 한다.

WAN(Wide Area Network)

국가, 대륙과 같이 광범위한 지역을 연결하는 네트워크이다. 거리에 제약이 없으나 다양한 경로를 지나 정보가 전달되므로 LAN보다 속도가 느리고 에러율도 높다. 전용 회선 방식 은 통신 사업자가 사전에 계약을 체결한 송신자와 수신자끼리만 데이터를 교환하는 방식 이며, 교환 회선 방식은 공중망을 활용하여 다수의 사용자가 선로를 공유하는 방식이다.

(1)회선 교환 방식

물리적 전용선을 활용하여 데이터 전달 경로가 정해진 후 동일 경로로만 전달이 된다. 데이터를 동시에 전송할 수 있는 양을 의미하는 대역폭이 고정되고 안정적인 전송률 을 확보할 수 있다.

(2) 패킷 교환 방식

패킷이라는 단위를 사용하여 데이터를 송신하고 수신한다. 패킷이란 정보를 일정한 크 기로분할한뒤각각의패킷에송수신주소및부가정보를입력한것이다. 현재컴퓨 터 네트워크에서 주로 사용하는 방식이다.

OSI(Open System Interconnection) 7계층

국제 표준화 기구인 ISO(International Standardization Organization)에서 개발한 네트워크 계층 표현 모델이다. 각 계층은 서로 독립적으로 구성되어 있고, 각 계층은 하위 계층의 기능을 이용하여 상위 계층에 기능을 제공한다. 1계층인 물리 계층부터 7계층인 애플리케 이션 계층으로 정의되어 있다.

네트워크 주요 장비

1. 허브, 리피터

허브는 여러 대의 컴퓨터를 연결하여 네트워크로 보내거나 하나의 네트워크로 수신된 정보를 여러 대의 컴퓨터로 송신하기 위한 장비이다. 리피터는 디지털 신호를 증폭시켜 주는 역할을 하여 신호가 약해지지 않고 컴퓨터로 수신되도록 한다.

2. 브리지, 스위치

브리지와 스위치는 두 시스템을 연결하는 네트워킹 장치이며 두 개의 LAN을 연결하여 훨 씬 더 큰 LAN을 만들어 준다. 스위치는 하드웨어 기반으로 처리하기 때문에 속도가 빠르 며, 브리지는 소프트웨어 방식으로 처리하기 때문에 속도가 느리다. 브리지는 포트들이 같 은 속도를 지원하는 반면, 스위치는 각기 다른 속도를 지원하도록 제어할 수 있다. 스위치 는 제공하는 포트 수가 수십, 수백 개로 2~3개의 포트를 제공하는 브리지보다 많다. 브리 지는 Store and Forwarding 전송 방식만을 사용하나, 스위치는 Cut Through와 Fragment Free 방식을 같이 사용한다.
- Store and Forwarding: 데이터를 전부 받은 후 다음 처리를 하는 방식
- Cut Through: 데이터의 목적지 주소만 확인 후 바로 전송 처리하는 방식
- Fragment Free: 위 두 방식의 장점을 결합한 방식

라우터

라우터는 망 연동 장비이다. PC 등의 로컬 호스트가 LAN에 접근할 수 있도록 하며, WAN 인터페이스를 사용하여 WAN에 접근하도록 한다. 라우팅 프로토콜은 경로 설정을 하여 원하는 목적지까지 지정된 데이터가 안전하게 전달되도록 한다.