[TIL] 2023.02.16(사용자 UI/UX, 복습)

UI(User Interface,사용자 인터페이스)와 UX(User Experience,사용자 경험)

사람들이 컴퓨터와 상호작용하는 시스템을 의미한다. 화면상 요소 외에도 키보드, 마우스 등의 물리적 요소도 UI라고 볼 수 있다.

GUI(Graphical User Interface) 사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 작업환경을 의미한다. 운영체제(윈도우, 맥OS)의 화면 혹은 애플리케이션의 화면이 있다. 보통 프론트엔드 개발자가 UI를 이야기할때는 대부분 이 GUI를 의미한다.

UX는 사용자가 어떤 시스템,제품,서비스를 직간접적으로 이용하면서 느끼고 생각하는 총체적 경험을 이야기한다. 제품과 관련된 모든 요소가 UX에 영향을 준다. UX에 영향을 주는 많은 요소 중 프론트엔드 개발자에게 가장 중요한 요소는 UI이고 좋은 프론트엔드 개발자라면 사용자가 좋은 UX를 가질 수 있도록 해야한다.

UX는 UI를 포함한다. 하지만 좋은 UX가 좋은 UI를 의미하거나, 좋은 UI가 좋은 UX를 보장하지는 않는다. 

 

그리드 시스템

웹 디자인분야에서는 컬럼그리드 시스템을 사용한다. 이는 Margin, Column, Gutter라는 세가지 요소로 구성된다. Column은 콘텐츠가 위치하게 될, 세로로 나뉜 영역이다. 표준적으로 휴대폰에서 4개, 태블릿에서 8개, PC에서는 12개의 컬럼으로 나눈다.

 

피그마 과제 후기

 

 

피그마는 디자인 사용툴이다.

//오늘 과제에서는 피그마로 UI디자인패턴 컴포넌트를 구현했다.

정말 너무너무 어려웠다. 페어분의 도움이 아니었다면 전혀 하지 못했을 것 같다. 손도 못댔을 것 같음...

사실 페어분이 거의 다 해주시기도 했고... 너무 감사하다.

내일도 피그마 과제인데 잘할 수 있을까 걱정된다...//

 

---

//섹션2 복습

전통적인 웹사이트에서는 사용자가 웹사이트내의 다른페이지로 이동하면, 매번 페이지 전채를 불러와야했다.

SPA는 중복되는 부분은 새로 불러오지 않는다, 화면을 업데이트하기 위해 필요한 데이터만 서버에서 전달받아 해당하는 부분만 업데이트하는 방식으로 작동한다.

 

다른 주소에 따라 다른 뷰를 보여주는 과정을 경로에 따라 변경한다는 의미로 라우팅이라고한다.

<BrowserRouter> 컴포넌트는 웹애플리케이션에서 HTML5의 History API를 사용해 페이지를 새로고침하지 않고도 주소를 변경할 수 있게 해준다.

<Routes>,<Route> 경로를 매칭해주는 역할을 하는 컴포넌트이다.

<Routes>컴포넌트는 여러 <Route>컴포넌트를 감싸서 그 중 경로가 일치하는 단 하나의 라우터만 렌더링 시켜주는 역할을 한다. <Routes>를 사용하지 않으면 매칭되는 모든 요소를 랜더링한다.

<Route>컴포넌트는 path속성을 지정하여 해당 path에서 어떤 컴포넌트를 보여줄지 정한다. Link컴포넌트가 정해주는 URL경로와 일치하는 경우에만 작동된다.

Link는 경로를 연결해주는 역할을 하는 컴포넌트이다. 페이지를 새로 불러오지 않고 애플리케이션을 그대로 유지하여 HTML5 HISTORY API를 이용해 페이지의 주소만 변경해준다,

 

function App() {
  return (
    <BrowserRouter>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>{/* Link 컴포넌트를 이용하여 경로를 연결합니다 */}
            </li>
            <li>
              <Link to="/mypage">MyPage</Link>
            </li>
            <li>
              <Link to="/dashboard">Dashboard</Link>
            </li>
          </ul>
        </nav>

         <Routes>
          <Route path="/" element={<Home />} /> 
					{/* 경로는 path로 컴포넌트는 element로 연결해 줍니다. */}
          <Route path="/mypage" element={<MyPage />} /> 
          <Route path="/dashboard" element={<Dashboard />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

function Home() {
  return <h1>Home</h1>;
}

function MyPage() {
  return <h1>MyPage</h1>;
}

function Dashboard() {
  return <h1>Dashboard</h1>;
}

export default App;