소리치는 아키텍처 - 개발공정 - UI 구현

### 목차
- [(서문) 개발공정](https://ohhoonim.blogspot.com/2024/02/blog-post_62.html)
- [1. 이벤트스토밍](https://ohhoonim.blogspot.com/2024/02/blog-post_47.html)
- [2. 유스케이스 구현](https://ohhoonim.blogspot.com/2024/02/blog-post_92.html)
- [3. 인프라 테스트](https://ohhoonim.blogspot.com/2024/02/blog-post_39.html)  
- [4. UI 구현](https://ohhoonim.blogspot.com/2024/02/ui_21.html) <- 현재문서
## abstract
사용자가 애플리케이션을 이용하는 방법에는 화면(그래픽)을 제공하거나, 명령어 형태가 있다. 여기서는 프로그래밍을 잘 모르는 일반 사용자를 대상으로 하는 웹브라우저 그래픽 UI 구현으로 한정한다. 
## tool
- Html / Css / Javascript : 브라우저에서 그래픽 화면을 제공하기 위한 필수 프로그래밍 언어이다. 
- Nodejs : Javascript 를 브라우저가 아닌 서버 환경에서도 동작할 수 있게해준다. 
- Vuejs : 화면 애플리케이션을 제작하는 프레임워크이다. 화면 애플리케이션을 Front-end라고도 부르는데 Front-end 애플리케이션을 제작하기 위한 프레임워크로는 Reactjs, Angularjs 등이 있다. 
- Visual Studio Code : Front-end를 개발할 때 사용하는 대표적인 [[개발용어#^9f3a50|IDE]]이다.
- Typescript : Javascript는 객체 타입 정의와 관련한 문법이 존재하지 않는다. 이를 보완하는 superset 언어이다.
- Chrome Browser : 크롬 브라우저의 dev tool은 개발자를 위한 편의 기능을 제공한다. 브라우저의 개발 도구는 Edge, Firefox, Safari 에서도 사용할 수 있다. 
## activity
- UX 디자인
	- [[유스케이스 구현]] 공정에서 도출된 유스케이스를 기준으로 사용자가 UI를 이용하는 성향(경험)을 분석하고 적절한 UI 요소들의 배치를 디자인한다.
- UI 구현
	- UX 디자인에서 제시한 가이드를 기준으로 컴포넌트를 구현한다. Material Design과 같이 잘 알려진 프레임워크를 사용할 수 도 있다. 
	- 대부분 유스케이스를 기준으로 화면이 제작되지만 그렇지 않는 경우도 다수 발생한다. 
	- Back-end의 Api 연결 
- E2E 테스트
	- Front-end to Back-end 
	- 전 구간에 대해 실무자가 애플리케이션을 테스트한다. 
## output
- 디자인 가이드
	- 애플리케이션의 UI에 대한 일관된 가이드를 제공한다.
- UX 컴포넌트
	- 공유하여 사용할 공통 컴포넌트이다. 
- 애플리케이션 시나리오
	- 실 사용자가 애플리케이션을 사용하기 위한 가이드 시나리오이다.
	- E2E 테스트에서도 그대로 활용 된다. 
- 화면
## 구현사례
- [[회원가입 UI 구현]]